pict-docuserve 0.0.28 → 0.0.30

package/dist/pict-docuserve.js

@@ -52,14 +52,14 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
     1: [function (require, module, exports) {
       module.exports = {
         "name": "fable-serviceproviderbase",
-        "version": "3.0.18",
+        "version": "3.0.19",
         "description": "Simple base classes for fable services.",
         "main": "source/Fable-ServiceProviderBase.js",
         "scripts": {
           "start": "node source/Fable-ServiceProviderBase.js",
-          "test": "npx mocha -u tdd -R spec",
-          "tests": "npx mocha -u tdd --exit -R spec --grep",
-          "coverage": "npx nyc --reporter=lcov --reporter=text-lcov npx mocha -- -u tdd -R spec",
+          "test": "npx quack test",
+          "tests": "npx quack test -g",
+          "coverage": "npx quack coverage",
           "build": "npx quack build",
           "types": "tsc -p ./tsconfig.build.json",
           "check": "tsc -p . --noEmit"
@@ -89,8 +89,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         "homepage": "https://github.com/stevenvelozo/fable-serviceproviderbase",
         "devDependencies": {
           "@types/mocha": "^10.0.10",
-          "fable": "^3.1.55",
-          "quackage": "^1.0.51",
+          "fable": "^3.1.62",
+          "quackage": "^1.0.58",
           "typescript": "^5.9.3"
         }
       };
@@ -3228,18 +3228,18 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
     4: [function (require, module, exports) {
       module.exports = {
         "name": "pict-application",
-        "version": "1.0.32",
+        "version": "1.0.33",
         "description": "Application base class for a pict view-based application",
         "main": "source/Pict-Application.js",
         "scripts": {
-          "test": "npx mocha -u tdd -R spec",
+          "test": "npx quack test",
           "start": "node source/Pict-Application.js",
-          "coverage": "npx nyc --reporter=lcov --reporter=text-lcov npx mocha -- -u tdd -R spec",
+          "coverage": "npx quack coverage",
           "build": "npx quack build",
           "docker-dev-build": "docker build ./ -f Dockerfile_LUXURYCode -t pict-application-image:local",
           "docker-dev-run": "docker run -it -d --name pict-application-dev -p 30001:8080 -p 38086:8086 -v \"$PWD/.config:/home/coder/.config\"  -v \"$PWD:/home/coder/pict-application\" -u \"$(id -u):$(id -g)\" -e \"DOCKER_USER=$USER\" pict-application-image:local",
           "docker-dev-shell": "docker exec -it pict-application-dev /bin/bash",
-          "tests": "npx mocha -u tdd --exit -R spec --grep",
+          "tests": "npx quack test -g",
           "lint": "eslint source/**",
           "types": "tsc -p ."
         },
@@ -3261,7 +3261,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           "pict": "^1.0.348",
           "pict-provider": "^1.0.10",
           "pict-view": "^1.0.66",
-          "quackage": "^1.0.51",
+          "quackage": "^1.0.58",
           "typescript": "^5.9.3"
         },
         "mocha": {
@@ -3276,7 +3276,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           "watch-ignore": ["lib/vendor"]
         },
         "dependencies": {
-          "fable-serviceproviderbase": "^3.0.18"
+          "fable-serviceproviderbase": "^3.0.19"
         }
       };
     }, {}],
@@ -4518,14 +4518,14 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
     6: [function (require, module, exports) {
       module.exports = {
         "name": "pict-provider",
-        "version": "1.0.10",
+        "version": "1.0.12",
         "description": "Pict Provider Base Class",
         "main": "source/Pict-Provider.js",
         "scripts": {
           "start": "node source/Pict-Provider.js",
-          "test": "npx mocha -u tdd -R spec",
-          "tests": "npx mocha -u tdd --exit -R spec --grep",
-          "coverage": "npx nyc --reporter=lcov --reporter=text-lcov npx mocha -- -u tdd -R spec",
+          "test": "npx quack test",
+          "tests": "npx quack test -g",
+          "coverage": "npx quack coverage",
           "build": "npx quack build",
           "docker-dev-build": "docker build ./ -f Dockerfile_LUXURYCode -t pict-provider-image:local",
           "docker-dev-run": "docker run -it -d --name pict-provider-dev -p 24125:8080 -p 30027:8086 -v \"$PWD/.config:/home/coder/.config\"  -v \"$PWD:/home/coder/pict-provider\" -u \"$(id -u):$(id -g)\" -e \"DOCKER_USER=$USER\" pict-provider-image:local",
@@ -4547,12 +4547,12 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         "devDependencies": {
           "@eslint/js": "^9.39.1",
           "eslint": "^9.39.1",
-          "pict": "^1.0.348",
-          "quackage": "^1.0.51",
+          "pict": "^1.0.351",
+          "quackage": "^1.0.58",
           "typescript": "^5.9.3"
         },
         "dependencies": {
-          "fable-serviceproviderbase": "^3.0.18"
+          "fable-serviceproviderbase": "^3.0.19"
         },
         "mocha": {
           "diff": true,
@@ -4577,6 +4577,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         AutoInitialize: true,
         AutoInitializeOrdinal: 0,
         AutoLoadDataWithApp: true,
+        AutoLoadDataOrdinal: 0,
         AutoSolveWithApp: true,
         AutoSolveOrdinal: 0,
         Manifests: {},
@@ -4859,6 +4860,664 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       "fable-serviceproviderbase": 2
     }],
     8: [function (require, module, exports) {
+      /**
+       * Simple syntax highlighter for use with CodeJar.
+       *
+       * Provides basic keyword/string/number/comment highlighting for common languages.
+       * Can be replaced with Prism.js or highlight.js for more sophisticated highlighting
+       * by passing a custom highlight function to the view options.
+       *
+       * @module Pict-Code-Highlighter
+       */
+
+      // Language definition map
+      const _LanguageDefinitions = {
+        'javascript': {
+          // Combined regex to tokenize: comments, strings, template literals, regex, then everything else
+          tokenizer: /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|(["'])(?:(?!\2|\\).|\\.)*?\2|(`(?:[^`\\]|\\.)*?`)|(\/(?![/*])(?:\\.|\[(?:\\.|[^\]])*\]|[^/\\\n])+\/[gimsuvy]*)/g,
+          keywords: /\b(async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|export|extends|finally|for|from|function|get|if|import|in|instanceof|let|new|of|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/g,
+          builtins: /\b(true|false|null|undefined|NaN|Infinity|console|window|document|Math|JSON|Array|Object|String|Number|Boolean|Date|RegExp|Map|Set|Promise|Error|Symbol|parseInt|parseFloat|require|module|exports)\b/g,
+          numbers: /\b(\d+\.?\d*(?:e[+-]?\d+)?|0x[0-9a-fA-F]+|0b[01]+|0o[0-7]+)\b/g
+        },
+        'json': {
+          tokenizer: /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:[^"\\]|\\.)*")/g,
+          keywords: /\b(true|false|null)\b/g,
+          numbers: /-?\b\d+\.?\d*(?:e[+-]?\d+)?\b/g
+        },
+        'html': {
+          // Tokenizer captures: (1) comments, (2) strings, (3) tags with attributes
+          tokenizer: /(<!--[\s\S]*?-->)|(["'])(?:(?!\2|\\).|\\.)*?\2|(<\/?[a-zA-Z][a-zA-Z0-9-]*(?:\s+[a-zA-Z-]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*))?)*\s*\/?>)/g,
+          // tagToken group index for identifying tag matches
+          tagGroupIndex: 3
+        },
+        'css': {
+          tokenizer: /(\/\*[\s\S]*?\*\/)|(["'])(?:(?!\2|\\).|\\.)*?\2/g,
+          selectors: /([.#]?[a-zA-Z_][\w-]*(?:\s*[>+~]\s*[.#]?[a-zA-Z_][\w-]*)*)\s*\{/g,
+          properties: /\b([a-zA-Z-]+)\s*:/g,
+          numbers: /\b(\d+\.?\d*)(px|em|rem|%|vh|vw|s|ms|deg|fr)?\b/g,
+          keywords: /\b(important|inherit|initial|unset|none|auto|block|inline|flex|grid)\b/g
+        },
+        'sql': {
+          tokenizer: /(--[^\n]*|\/\*[\s\S]*?\*\/)|(["'])(?:(?!\2|\\).|\\.)*?\2/g,
+          keywords: /\b(SELECT|FROM|WHERE|AND|OR|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|DROP|ALTER|ADD|COLUMN|INDEX|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AS|ORDER|BY|GROUP|HAVING|LIMIT|OFFSET|UNION|ALL|DISTINCT|COUNT|SUM|AVG|MIN|MAX|NOT|NULL|IS|IN|BETWEEN|LIKE|EXISTS|CASE|WHEN|THEN|ELSE|END|PRIMARY|KEY|FOREIGN|REFERENCES|CONSTRAINT|DEFAULT|CHECK|UNIQUE|CASCADE|GRANT|REVOKE|COMMIT|ROLLBACK|BEGIN|TRANSACTION|INT|VARCHAR|DATETIME|AUTO_INCREMENT|CURRENT_TIMESTAMP)\b/gi,
+          numbers: /\b\d+\.?\d*\b/g
+        }
+      };
+
+      // Alias some common language names
+      _LanguageDefinitions['js'] = _LanguageDefinitions['javascript'];
+      _LanguageDefinitions['htm'] = _LanguageDefinitions['html'];
+
+      /**
+       * Escape HTML special characters to prevent XSS when inserting into innerHTML.
+       *
+       * @param {string} pString - The string to escape
+       * @returns {string} The escaped string
+       */
+      function escapeHTML(pString) {
+        return pString.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      }
+
+      /**
+       * Highlight a segment of code that is NOT inside a string or comment.
+       * This applies keyword, number, and structural highlighting.
+       *
+       * @param {string} pCode - The code segment to highlight (already HTML-escaped)
+       * @param {object} pLanguageDef - The language definition
+       * @returns {string} The highlighted HTML
+       */
+      function highlightCodeSegment(pCode, pLanguageDef) {
+        let tmpResult = pCode;
+
+        // CSS selectors
+        if (pLanguageDef.selectors) {
+          pLanguageDef.selectors.lastIndex = 0;
+          tmpResult = tmpResult.replace(pLanguageDef.selectors, '<span class="function-name">$1</span>{');
+        }
+
+        // CSS properties
+        if (pLanguageDef.properties) {
+          pLanguageDef.properties.lastIndex = 0;
+          tmpResult = tmpResult.replace(pLanguageDef.properties, '<span class="property">$1</span>:');
+        }
+
+        // Keywords
+        if (pLanguageDef.keywords) {
+          pLanguageDef.keywords.lastIndex = 0;
+          tmpResult = tmpResult.replace(pLanguageDef.keywords, '<span class="keyword">$1</span>');
+        }
+
+        // Builtins
+        if (pLanguageDef.builtins) {
+          pLanguageDef.builtins.lastIndex = 0;
+          tmpResult = tmpResult.replace(pLanguageDef.builtins, '<span class="keyword">$1</span>');
+        }
+
+        // Numbers (CSS numbers may have units as a capture group, others do not)
+        if (pLanguageDef.numbers) {
+          pLanguageDef.numbers.lastIndex = 0;
+          tmpResult = tmpResult.replace(pLanguageDef.numbers, pMatch => {
+            return "<span class=\"number\">".concat(pMatch, "</span>");
+          });
+        }
+        return tmpResult;
+      }
+
+      /**
+       * Highlight an HTML tag token, applying tag name, attribute name, and attribute value colors.
+       *
+       * The approach: parse the raw tag into structured pieces first, then build the
+       * highlighted output from those pieces. This avoids mixing raw text with HTML span
+       * tags, which would cause regex replacements to match span attributes on subsequent passes.
+       *
+       * @param {string} pTag - The raw (unescaped) tag string
+       * @returns {string} The highlighted HTML
+       */
+      function highlightHTMLTag(pTag) {
+        let tmpResult = '';
+        let tmpRest = pTag;
+
+        // 1. Extract the opening bracket and tag name: < or </  followed by tagname
+        let tmpTagNameMatch = tmpRest.match(/^(<\/?)([a-zA-Z][a-zA-Z0-9-]*)/);
+        if (!tmpTagNameMatch) {
+          // Not a recognizable tag, just escape the whole thing
+          return escapeHTML(pTag);
+        }
+        tmpResult += escapeHTML(tmpTagNameMatch[1]);
+        tmpResult += '<span class="tag">' + escapeHTML(tmpTagNameMatch[2]) + '</span>';
+        tmpRest = tmpRest.substring(tmpTagNameMatch[0].length);
+
+        // 2. Parse attributes from the remaining text (before the closing > or />)
+        // Repeatedly match: whitespace + attr-name + optional =value
+        let tmpAttrRegex = /^(\s+)([a-zA-Z-]+)(?:(\s*=\s*)(["'])([^"']*?)\4)?/;
+        let tmpAttrMatch;
+        while ((tmpAttrMatch = tmpRest.match(tmpAttrRegex)) !== null) {
+          // Whitespace before the attribute
+          tmpResult += tmpAttrMatch[1];
+          // Attribute name
+          tmpResult += '<span class="attr-name">' + escapeHTML(tmpAttrMatch[2]) + '</span>';
+
+          // If there's an = value part
+          if (tmpAttrMatch[3]) {
+            tmpResult += escapeHTML(tmpAttrMatch[3]);
+            tmpResult += '<span class="attr-value">' + escapeHTML(tmpAttrMatch[4]) + escapeHTML(tmpAttrMatch[5]) + escapeHTML(tmpAttrMatch[4]) + '</span>';
+          }
+          tmpRest = tmpRest.substring(tmpAttrMatch[0].length);
+        }
+
+        // 3. Whatever remains (whitespace, />, >) — escape it all
+        tmpResult += escapeHTML(tmpRest);
+        return tmpResult;
+      }
+
+      /**
+       * Create a highlight function for a given language.
+       *
+       * The approach: use a single tokenizer regex to split the code into protected tokens
+       * (comments, strings) and code segments. Process each segment independently.
+       * This avoids placeholder/sentinel issues entirely.
+       *
+       * @param {string} pLanguage - The language identifier (e.g. "javascript", "json", "html")
+       * @returns {function} A function that takes an element and highlights its textContent
+       */
+      function createHighlighter(pLanguage) {
+        return function highlightElement(pElement) {
+          let tmpCode = pElement.textContent;
+          let tmpLanguageName = typeof pLanguage === 'string' ? pLanguage.toLowerCase() : 'javascript';
+          let tmpLanguageDef = _LanguageDefinitions[tmpLanguageName];
+          if (!tmpLanguageDef) {
+            // No highlighting rules for this language; just escape and return
+            pElement.innerHTML = escapeHTML(tmpCode);
+            return;
+          }
+          if (!tmpLanguageDef.tokenizer) {
+            // No tokenizer; just escape and apply keyword highlighting
+            pElement.innerHTML = highlightCodeSegment(escapeHTML(tmpCode), tmpLanguageDef);
+            return;
+          }
+
+          // Split the code into tokens using the tokenizer regex.
+          // The tokenizer captures comments and strings as groups.
+          // We process everything between matches as code.
+          let tmpResult = '';
+          let tmpLastIndex = 0;
+          let tmpTagGroupIndex = tmpLanguageDef.tagGroupIndex || 0;
+          tmpLanguageDef.tokenizer.lastIndex = 0;
+          let tmpMatch;
+          while ((tmpMatch = tmpLanguageDef.tokenizer.exec(tmpCode)) !== null) {
+            // Add the code segment before this match
+            if (tmpMatch.index > tmpLastIndex) {
+              let tmpSegment = tmpCode.substring(tmpLastIndex, tmpMatch.index);
+              tmpResult += highlightCodeSegment(escapeHTML(tmpSegment), tmpLanguageDef);
+            }
+            let tmpFullMatch = tmpMatch[0];
+
+            // Determine token type from capture groups
+            // Group 1 is always comments, Group 2+ are strings/template literals/regex
+            if (tmpMatch[1]) {
+              // Comment
+              tmpResult += "<span class=\"comment\">".concat(escapeHTML(tmpFullMatch), "</span>");
+            } else if (tmpTagGroupIndex > 0 && tmpMatch[tmpTagGroupIndex]) {
+              // HTML tag — highlight tag name, attributes, and values
+              tmpResult += highlightHTMLTag(tmpFullMatch);
+            } else {
+              // String, template literal, or regex
+              tmpResult += "<span class=\"string\">".concat(escapeHTML(tmpFullMatch), "</span>");
+            }
+            tmpLastIndex = tmpLanguageDef.tokenizer.lastIndex;
+          }
+
+          // Add any remaining code after the last match
+          if (tmpLastIndex < tmpCode.length) {
+            let tmpSegment = tmpCode.substring(tmpLastIndex);
+            tmpResult += highlightCodeSegment(escapeHTML(tmpSegment), tmpLanguageDef);
+          }
+          pElement.innerHTML = tmpResult;
+        };
+      }
+      module.exports = createHighlighter;
+      module.exports.LanguageDefinitions = _LanguageDefinitions;
+    }, {}],
+    9: [function (require, module, exports) {
+      module.exports = {
+        "RenderOnLoad": true,
+        "DefaultRenderable": "CodeEditor-Wrap",
+        "DefaultDestinationAddress": "#CodeEditor-Container-Div",
+        "Templates": [{
+          "Hash": "CodeEditor-Container",
+          "Template": "<!-- CodeEditor-Container Rendering Soon -->"
+        }],
+        "Renderables": [{
+          "RenderableHash": "CodeEditor-Wrap",
+          "TemplateHash": "CodeEditor-Container",
+          "DestinationAddress": "#CodeEditor-Container-Div"
+        }],
+        "TargetElementAddress": "#CodeEditor-Container-Div",
+        // Address in AppData or other Pict address space to read/write code content
+        "CodeDataAddress": false,
+        // The language for syntax highlighting (e.g. "javascript", "html", "css", "json")
+        "Language": "javascript",
+        // Whether the editor is read-only
+        "ReadOnly": false,
+        // Tab character: use tab or spaces
+        "Tab": "\t",
+        // Whether to indent with the same whitespace as the previous line
+        "IndentOn": /[({[]$/,
+        // Whether to add a closing bracket/paren/brace
+        "MoveToNewLine": /^[)}\]]/,
+        // Whether to handle the closing character
+        "AddClosing": true,
+        // Whether to preserve indentation on new lines
+        "CatchTab": true,
+        // Whether to show line numbers
+        "LineNumbers": true,
+        // Default code content if no address is provided
+        "DefaultCode": "// Enter your code here\n",
+        // CSS for the code editor
+        "CSS": ".pict-code-editor-wrap\n{\n\tdisplay: flex;\n\tfont-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;\n\tfont-size: 14px;\n\tline-height: 1.5;\n\tborder: 1px solid #D0D0D0;\n\tborder-radius: 4px;\n\toverflow: auto;\n}\n.pict-code-editor-wrap .pict-code-line-numbers\n{\n\tposition: sticky;\n\tleft: 0;\n\twidth: 40px;\n\tmin-width: 40px;\n\tpadding: 10px 0;\n\ttext-align: right;\n\tbackground: #F5F5F5;\n\tborder-right: 1px solid #D0D0D0;\n\tcolor: #999;\n\tfont-size: 13px;\n\tline-height: 1.5;\n\tuser-select: none;\n\tpointer-events: none;\n\tbox-sizing: border-box;\n\tz-index: 1;\n}\n.pict-code-editor-wrap .pict-code-line-numbers span\n{\n\tdisplay: block;\n\tpadding: 0 8px 0 0;\n}\n.pict-code-editor-wrap .pict-code-editor\n{\n\tmargin: 0;\n\tpadding: 10px 10px 10px 8px;\n\tmin-height: 100px;\n\tflex: 1;\n\tmin-width: 0;\n\toutline: none;\n\ttab-size: 4;\n\twhite-space: pre;\n\toverflow-wrap: normal;\n\tcolor: #383A42;\n\tbackground: #FAFAFA;\n\tcaret-color: #526FFF;\n\tborder-radius: 0 4px 4px 0;\n}\n.pict-code-editor-wrap .pict-code-editor.pict-code-no-line-numbers\n{\n\tpadding-left: 10px;\n\tborder-radius: 4px;\n}\n.pict-code-editor-wrap .pict-code-editor .keyword { color: #A626A4; }\n.pict-code-editor-wrap .pict-code-editor .string { color: #50A14F; }\n.pict-code-editor-wrap .pict-code-editor .number { color: #986801; }\n.pict-code-editor-wrap .pict-code-editor .comment { color: #A0A1A7; font-style: italic; }\n.pict-code-editor-wrap .pict-code-editor .operator { color: #0184BC; }\n.pict-code-editor-wrap .pict-code-editor .punctuation { color: #383A42; }\n.pict-code-editor-wrap .pict-code-editor .function-name { color: #4078F2; }\n.pict-code-editor-wrap .pict-code-editor .property { color: #E45649; }\n.pict-code-editor-wrap .pict-code-editor .tag { color: #E45649; }\n.pict-code-editor-wrap .pict-code-editor .attr-name { color: #986801; }\n.pict-code-editor-wrap .pict-code-editor .attr-value { color: #50A14F; }\n"
+      };
+    }, {}],
+    10: [function (require, module, exports) {
+      const libPictViewClass = require('pict-view');
+      const libCreateHighlighter = require('./Pict-Code-Highlighter.js');
+      const _DefaultConfiguration = require('./Pict-Section-Code-DefaultConfiguration.js');
+      class PictSectionCode extends libPictViewClass {
+        constructor(pFable, pOptions, pServiceHash) {
+          let tmpOptions = Object.assign({}, _DefaultConfiguration, pOptions);
+          super(pFable, tmpOptions, pServiceHash);
+          this.initialRenderComplete = false;
+
+          // The CodeJar instance
+          this.codeJar = null;
+
+          // The highlight function (can be overridden)
+          this._highlightFunction = null;
+
+          // The current language
+          this._language = this.options.Language || 'javascript';
+        }
+        onBeforeInitialize() {
+          super.onBeforeInitialize();
+          this._codeJarPrototype = null;
+          this.targetElement = false;
+
+          // Build the default highlight function for the configured language
+          this._highlightFunction = libCreateHighlighter(this._language);
+          return super.onBeforeInitialize();
+        }
+
+        /**
+         * Connect the CodeJar prototype.  If not passed explicitly, try to find it
+         * as a global (window.CodeJar) or require it from the npm package.
+         *
+         * @param {function} [pCodeJarPrototype] - The CodeJar constructor function
+         * @returns {boolean|void}
+         */
+        connectCodeJarPrototype(pCodeJarPrototype) {
+          if (typeof pCodeJarPrototype === 'function') {
+            this._codeJarPrototype = pCodeJarPrototype;
+            return;
+          }
+
+          // Try to find CodeJar in global scope
+          if (typeof window !== 'undefined') {
+            if (typeof window.CodeJar === 'function') {
+              this.log.trace("PICT-Code Found CodeJar in window.CodeJar.");
+              this._codeJarPrototype = window.CodeJar;
+              return;
+            }
+          }
+          this.log.error("PICT-Code No CodeJar prototype found. Include codejar via script tag or call connectCodeJarPrototype(CodeJar) explicitly.");
+          return false;
+        }
+        onAfterRender(pRenderable) {
+          // Ensure the CSS from all registered views is injected into the DOM
+          this.pict.CSSMap.injectCSS();
+          if (!this.initialRenderComplete) {
+            this.onAfterInitialRender();
+            this.initialRenderComplete = true;
+          }
+          return super.onAfterRender(pRenderable);
+        }
+        onAfterInitialRender() {
+          // Resolve the CodeJar prototype if not already set
+          if (!this._codeJarPrototype) {
+            this.connectCodeJarPrototype();
+          }
+          if (!this._codeJarPrototype) {
+            this.log.error("PICT-Code Cannot initialize editor; no CodeJar prototype available.");
+            return false;
+          }
+          if (this.codeJar) {
+            this.log.error("PICT-Code editor is already initialized!");
+            return false;
+          }
+
+          // Find the target element
+          let tmpTargetElementSet = this.services.ContentAssignment.getElement(this.options.TargetElementAddress);
+          if (!tmpTargetElementSet || tmpTargetElementSet.length < 1) {
+            this.log.error("PICT-Code Could not find target element [".concat(this.options.TargetElementAddress, "]!"));
+            this.targetElement = false;
+            return false;
+          }
+          this.targetElement = tmpTargetElementSet[0];
+
+          // Build the editor DOM structure
+          this._buildEditorDOM();
+
+          // Get initial code content
+          let tmpCode = this._resolveCodeContent();
+
+          // Create the CodeJar options
+          let tmpCodeJarOptions = {};
+          if (this.options.Tab) {
+            tmpCodeJarOptions.tab = this.options.Tab;
+          }
+          if (this.options.IndentOn) {
+            tmpCodeJarOptions.indentOn = this.options.IndentOn;
+          }
+          if (this.options.MoveToNewLine) {
+            tmpCodeJarOptions.moveToNewLine = this.options.MoveToNewLine;
+          }
+          if (typeof this.options.AddClosing !== 'undefined') {
+            tmpCodeJarOptions.addClosing = this.options.AddClosing;
+          }
+          if (typeof this.options.CatchTab !== 'undefined') {
+            tmpCodeJarOptions.catchTab = this.options.CatchTab;
+          }
+          this.customConfigureEditorOptions(tmpCodeJarOptions);
+
+          // Instantiate CodeJar on the editor element
+          let tmpEditorElement = this._editorElement;
+          this.codeJar = this._codeJarPrototype(tmpEditorElement, this._highlightFunction, tmpCodeJarOptions);
+
+          // CodeJar forces white-space:pre-wrap and overflow-wrap:break-word
+          // via inline styles, which causes line wrapping that breaks the
+          // line-number alignment.  Override back to non-wrapping so the
+          // wrap container scrolls horizontally instead.
+          this._resetEditorWrapStyles();
+
+          // Set the initial code
+          if (tmpCode) {
+            this.codeJar.updateCode(tmpCode);
+          }
+
+          // Wire up the change handler
+          this.codeJar.onUpdate(pCode => {
+            this._updateLineNumbers();
+            this.onCodeChange(pCode);
+          });
+
+          // Initial line number render
+          this._updateLineNumbers();
+
+          // Handle read-only
+          if (this.options.ReadOnly) {
+            tmpEditorElement.setAttribute('contenteditable', 'false');
+          }
+        }
+
+        /**
+         * Build the editor DOM elements inside the target container.
+         */
+        _buildEditorDOM() {
+          // Clear the target
+          this.targetElement.innerHTML = '';
+
+          // Create wrapper
+          let tmpWrap = document.createElement('div');
+          tmpWrap.className = 'pict-code-editor-wrap';
+
+          // Create line numbers container
+          if (this.options.LineNumbers) {
+            let tmpLineNumbers = document.createElement('div');
+            tmpLineNumbers.className = 'pict-code-line-numbers';
+            tmpWrap.appendChild(tmpLineNumbers);
+            this._lineNumbersElement = tmpLineNumbers;
+          }
+
+          // Create the editor element (CodeJar needs a pre or div)
+          let tmpEditor = document.createElement('div');
+          tmpEditor.className = 'pict-code-editor language-' + this._language;
+          if (!this.options.LineNumbers) {
+            tmpEditor.className += ' pict-code-no-line-numbers';
+          }
+          tmpWrap.appendChild(tmpEditor);
+          this.targetElement.appendChild(tmpWrap);
+          this._editorElement = tmpEditor;
+          this._wrapElement = tmpWrap;
+        }
+
+        /**
+         * Update the line numbers display based on current code content.
+         */
+        _updateLineNumbers() {
+          if (!this.options.LineNumbers || !this._lineNumbersElement || !this._editorElement) {
+            return;
+          }
+          let tmpCode = this._editorElement.textContent || '';
+          let tmpLineCount = tmpCode.split('\n').length;
+          let tmpHTML = '';
+          for (let i = 1; i <= tmpLineCount; i++) {
+            tmpHTML += "<span>".concat(i, "</span>");
+          }
+          this._lineNumbersElement.innerHTML = tmpHTML;
+        }
+
+        /**
+         * Reset inline styles that CodeJar sets on the editor element.
+         *
+         * CodeJar forces white-space:pre-wrap and overflow-wrap:break-word so
+         * long lines wrap visually.  That breaks line-number alignment because
+         * each wrapped visual row is not a logical line.  Resetting to pre /
+         * normal makes the outer .pict-code-editor-wrap scroll horizontally.
+         */
+        _resetEditorWrapStyles() {
+          if (!this._editorElement) {
+            return;
+          }
+          this._editorElement.style.whiteSpace = 'pre';
+          this._editorElement.style.overflowWrap = 'normal';
+        }
+
+        /**
+         * Resolve the initial code content from address or default.
+         *
+         * @returns {string} The code content
+         */
+        _resolveCodeContent() {
+          if (this.options.CodeDataAddress) {
+            const tmpAddressSpace = {
+              Fable: this.fable,
+              Pict: this.fable,
+              AppData: this.AppData,
+              Bundle: this.Bundle,
+              Options: this.options
+            };
+            let tmpAddressedData = this.fable.manifest.getValueByHash(tmpAddressSpace, this.options.CodeDataAddress);
+            if (typeof tmpAddressedData === 'string') {
+              return tmpAddressedData;
+            } else {
+              this.log.warn("PICT-Code Address [".concat(this.options.CodeDataAddress, "] did not return a string; it was ").concat(typeof tmpAddressedData, "."));
+            }
+          }
+          return this.options.DefaultCode || '';
+        }
+
+        /**
+         * Hook for subclasses to customize CodeJar options before instantiation.
+         *
+         * @param {object} pOptions - The CodeJar options object to modify
+         */
+        customConfigureEditorOptions(pOptions) {
+          // Override in subclass to tweak options
+        }
+
+        /**
+         * Called when the code content changes.  Override in subclasses to handle changes.
+         *
+         * @param {string} pCode - The new code content
+         */
+        onCodeChange(pCode) {
+          // Write back to data address if configured
+          if (this.options.CodeDataAddress) {
+            const tmpAddressSpace = {
+              Fable: this.fable,
+              Pict: this.fable,
+              AppData: this.AppData,
+              Bundle: this.Bundle,
+              Options: this.options
+            };
+            this.fable.manifest.setValueByHash(tmpAddressSpace, this.options.CodeDataAddress, pCode);
+          }
+        }
+
+        // -- Public API Methods --
+
+        /**
+         * Get the current code content.
+         *
+         * @returns {string} The current code
+         */
+        getCode() {
+          if (!this.codeJar) {
+            this.log.warn('PICT-Code getCode called before editor initialized.');
+            return '';
+          }
+          return this.codeJar.toString();
+        }
+
+        /**
+         * Set the code content.
+         *
+         * @param {string} pCode - The code to set
+         */
+        setCode(pCode) {
+          if (!this.codeJar) {
+            this.log.warn('PICT-Code setCode called before editor initialized.');
+            return;
+          }
+          this.codeJar.updateCode(pCode);
+          this._updateLineNumbers();
+        }
+
+        /**
+         * Change the editor language and re-highlight.
+         *
+         * @param {string} pLanguage - The language identifier
+         */
+        setLanguage(pLanguage) {
+          this._language = pLanguage;
+          this._highlightFunction = libCreateHighlighter(pLanguage);
+          if (this._editorElement) {
+            // Update the class
+            this._editorElement.className = 'pict-code-editor language-' + pLanguage;
+            if (!this.options.LineNumbers) {
+              this._editorElement.className += ' pict-code-no-line-numbers';
+            }
+          }
+          if (this.codeJar) {
+            // Re-create the editor with the new highlight function
+            let tmpCode = this.codeJar.toString();
+            this.codeJar.destroy();
+            this.codeJar = this._codeJarPrototype(this._editorElement, this._highlightFunction, {
+              tab: this.options.Tab,
+              catchTab: this.options.CatchTab,
+              addClosing: this.options.AddClosing
+            });
+            this._resetEditorWrapStyles();
+            this.codeJar.updateCode(tmpCode);
+            this.codeJar.onUpdate(pCode => {
+              this._updateLineNumbers();
+              this.onCodeChange(pCode);
+            });
+          }
+        }
+
+        /**
+         * Set a custom highlight function to replace the built-in highlighter.
+         * Useful for integrating Prism.js, highlight.js, or any other library.
+         *
+         * @param {function} pHighlightFunction - A function that takes a DOM element and highlights its textContent
+         */
+        setHighlightFunction(pHighlightFunction) {
+          if (typeof pHighlightFunction !== 'function') {
+            this.log.error('PICT-Code setHighlightFunction requires a function.');
+            return;
+          }
+          this._highlightFunction = pHighlightFunction;
+          if (this.codeJar) {
+            let tmpCode = this.codeJar.toString();
+            this.codeJar.destroy();
+            this.codeJar = this._codeJarPrototype(this._editorElement, this._highlightFunction, {
+              tab: this.options.Tab,
+              catchTab: this.options.CatchTab,
+              addClosing: this.options.AddClosing
+            });
+            this._resetEditorWrapStyles();
+            this.codeJar.updateCode(tmpCode);
+            this.codeJar.onUpdate(pCode => {
+              this._updateLineNumbers();
+              this.onCodeChange(pCode);
+            });
+          }
+        }
+
+        /**
+         * Set the read-only state of the editor.
+         *
+         * @param {boolean} pReadOnly - Whether the editor should be read-only
+         */
+        setReadOnly(pReadOnly) {
+          this.options.ReadOnly = pReadOnly;
+          if (this._editorElement) {
+            this._editorElement.setAttribute('contenteditable', pReadOnly ? 'false' : 'true');
+          }
+        }
+
+        /**
+         * Destroy the editor and clean up.
+         */
+        destroy() {
+          if (this.codeJar) {
+            this.codeJar.destroy();
+            this.codeJar = null;
+          }
+        }
+
+        /**
+         * Marshal code content from the data address into the view.
+         */
+        marshalToView() {
+          super.marshalToView();
+          if (this.codeJar && this.options.CodeDataAddress) {
+            let tmpCode = this._resolveCodeContent();
+            if (typeof tmpCode === 'string') {
+              this.codeJar.updateCode(tmpCode);
+              this._updateLineNumbers();
+            }
+          }
+        }
+
+        /**
+         * Marshal the current code content back to the data address.
+         */
+        marshalFromView() {
+          super.marshalFromView();
+          if (this.codeJar && this.options.CodeDataAddress) {
+            this.onCodeChange(this.codeJar.toString());
+          }
+        }
+      }
+      module.exports = PictSectionCode;
+      module.exports.default_configuration = _DefaultConfiguration;
+      module.exports.createHighlighter = libCreateHighlighter;
+    }, {
+      "./Pict-Code-Highlighter.js": 8,
+      "./Pict-Section-Code-DefaultConfiguration.js": 9,
+      "pict-view": 15
+    }],
+    11: [function (require, module, exports) {
       // The container for all the Pict-Section-Content related code.
 
       // The main content view class
@@ -4867,11 +5526,12 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       // The content provider (markdown parsing, HTML escaping)
       module.exports.PictContentProvider = require('./providers/Pict-Provider-Content.js');
     }, {
-      "./providers/Pict-Provider-Content.js": 9,
-      "./views/Pict-View-Content.js": 10
+      "./providers/Pict-Provider-Content.js": 12,
+      "./views/Pict-View-Content.js": 13
     }],
-    9: [function (require, module, exports) {
+    12: [function (require, module, exports) {
       const libPictProvider = require('pict-provider');
+      const libCreateHighlighter = require('pict-section-code').createHighlighter;
 
       /**
        * Content Provider for Pict Section Content
@@ -4879,6 +5539,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
        * A general-purpose markdown-to-HTML parser with support for:
        * - Headings, paragraphs, lists, blockquotes, horizontal rules
        * - Fenced code blocks with language tags (nested fence support)
+       * - Syntax highlighting and line numbers for code blocks (via pict-section-code)
        * - Tables (GFM pipe syntax)
        * - Mermaid diagram blocks
        * - KaTeX math (inline and display)
@@ -4891,14 +5552,55 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           super(pFable, pOptions, pServiceHash);
         }
 
+        /**
+         * Highlight a code string using pict-section-code's syntax highlighter.
+         * Uses a mock element to interface with the highlighter's DOM-based API.
+         *
+         * @param {string} pCode - The raw code string
+         * @param {string} pLanguage - The language identifier (e.g. "javascript", "html")
+         * @returns {string} The syntax-highlighted HTML
+         */
+        highlightCode(pCode, pLanguage) {
+          if (!pCode) {
+            return '';
+          }
+          let tmpHighlighter = libCreateHighlighter(pLanguage);
+          // Create a mock element to interface with the highlighter
+          let tmpMockElement = {
+            textContent: pCode,
+            innerHTML: ''
+          };
+          tmpHighlighter(tmpMockElement);
+          return tmpMockElement.innerHTML;
+        }
+
+        /**
+         * Generate line number HTML for a code block.
+         *
+         * @param {string} pCode - The raw code string
+         * @returns {string} HTML string with line number spans
+         */
+        generateLineNumbers(pCode) {
+          if (!pCode) {
+            return '<span>1</span>';
+          }
+          let tmpLineCount = pCode.split('\n').length;
+          let tmpHTML = '';
+          for (let i = 1; i <= tmpLineCount; i++) {
+            tmpHTML += '<span>' + i + '</span>';
+          }
+          return tmpHTML;
+        }
+
         /**
          * Parse a markdown string into HTML.
          *
          * @param {string} pMarkdown - The raw markdown text
          * @param {Function} [pLinkResolver] - Optional callback for link resolution: (pHref, pLinkText) => { href, target, rel } or null
+         * @param {Function} [pImageResolver] - Optional callback for image URL resolution: (pSrc, pAlt) => resolvedSrc or null
          * @returns {string} The parsed HTML
          */
-        parseMarkdown(pMarkdown, pLinkResolver) {
+        parseMarkdown(pMarkdown, pLinkResolver, pImageResolver) {
           if (!pMarkdown) {
             return '';
           }
@@ -4920,7 +5622,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           let fFlushParagraph = () => {
             if (tmpParagraphLines.length > 0) {
               tmpHTML.push('<p>' + tmpParagraphLines.map(pLine => {
-                return this.parseInline(pLine, pLinkResolver);
+                return this.parseInline(pLine, pLinkResolver, pImageResolver);
               }).join(' ') + '</p>');
               tmpParagraphLines = [];
             }
@@ -4944,7 +5646,7 @@ 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'), pLinkResolver) + '</blockquote>');
+                  tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pLinkResolver, pImageResolver) + '</blockquote>');
                   tmpInBlockquote = false;
                   tmpBlockquoteLines = [];
                 }
@@ -4969,7 +5671,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
                     // 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>');
+                    let tmpCodeText = tmpCodeLines.join('\n');
+                    let tmpHighlightedCode = this.highlightCode(tmpCodeText, tmpCodeLang);
+                    let tmpLineNumbersHTML = this.generateLineNumbers(tmpCodeText);
+                    tmpHTML.push('<div class="pict-content-code-wrap"><div class="pict-content-code-line-numbers">' + tmpLineNumbersHTML + '</div><pre><code class="language-' + this.escapeHTML(tmpCodeLang) + '">' + tmpHighlightedCode + '</code></pre></div>');
                   }
                   tmpInCodeBlock = false;
                   tmpCodeFenceLength = 0;
@@ -4990,7 +5695,7 @@ 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'), pLinkResolver) + '</blockquote>');
+                  tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pLinkResolver, pImageResolver) + '</blockquote>');
                   tmpInBlockquote = false;
                   tmpBlockquoteLines = [];
                 }
@@ -5022,7 +5727,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'), pLinkResolver) + '</blockquote>');
+              tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pLinkResolver, pImageResolver) + '</blockquote>');
               tmpInBlockquote = false;
               tmpBlockquoteLines = [];
             }
@@ -5047,7 +5752,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], pLinkResolver);
+              let tmpText = this.parseInline(tmpHeadingMatch[2], pLinkResolver, pImageResolver);
               let tmpID = tmpHeadingMatch[2].toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
               tmpHTML.push('<h' + tmpLevel + ' id="' + tmpID + '">' + tmpText + '</h' + tmpLevel + '>');
               continue;
@@ -5065,7 +5770,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], pLinkResolver) + '</li>');
+              tmpHTML.push('<li>' + this.parseInline(tmpULMatch[2], pLinkResolver, pImageResolver) + '</li>');
               continue;
             }
 
@@ -5081,7 +5786,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], pLinkResolver) + '</li>');
+              tmpHTML.push('<li>' + this.parseInline(tmpOLMatch[2], pLinkResolver, pImageResolver) + '</li>');
               continue;
             }
 
@@ -5113,7 +5818,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(), pLinkResolver) + '</th>';
+                tmpTableHTML += '<th>' + this.parseInline(tmpHeaders[h].trim(), pLinkResolver, pImageResolver) + '</th>';
               }
               tmpTableHTML += '</tr></thead>';
 
@@ -5129,7 +5834,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(), pLinkResolver) + '</td>';
+                  tmpTableHTML += '<td>' + this.parseInline(tmpCells[c].trim(), pLinkResolver, pImageResolver) + '</td>';
                 }
                 tmpTableHTML += '</tr>';
               }
@@ -5151,10 +5856,13 @@ 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'), pLinkResolver) + '</blockquote>');
+            tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pLinkResolver, pImageResolver) + '</blockquote>');
           }
           if (tmpInCodeBlock) {
-            tmpHTML.push('<pre><code>' + this.escapeHTML(tmpCodeLines.join('\n')) + '</code></pre>');
+            let tmpCodeText = tmpCodeLines.join('\n');
+            let tmpHighlightedCode = this.highlightCode(tmpCodeText, tmpCodeLang);
+            let tmpLineNumbersHTML = this.generateLineNumbers(tmpCodeText);
+            tmpHTML.push('<div class="pict-content-code-wrap"><div class="pict-content-code-line-numbers">' + tmpLineNumbersHTML + '</div><pre><code>' + tmpHighlightedCode + '</code></pre></div>');
           }
           return tmpHTML.join('\n');
         }
@@ -5164,9 +5872,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
          *
          * @param {string} pText - The text to parse
          * @param {Function} [pLinkResolver] - Optional callback: (pHref, pLinkText) => { href, target, rel } or null
+         * @param {Function} [pImageResolver] - Optional callback: (pSrc, pAlt) => resolvedSrc or null
          * @returns {string} HTML with inline elements
          */
-        parseInline(pText, pLinkResolver) {
+        parseInline(pText, pLinkResolver, pImageResolver) {
           if (!pText) {
             return '';
           }
@@ -5187,7 +5896,16 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           tmpResult = tmpResult.replace(/\$([^\$\s])\$/g, '<span class="pict-content-katex-inline">$1</span>');
 
           // Images
-          tmpResult = tmpResult.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+          tmpResult = tmpResult.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (pMatch, pAlt, pSrc) => {
+            let tmpSrc = pSrc;
+            if (typeof pImageResolver === 'function') {
+              let tmpResolved = pImageResolver(pSrc, pAlt);
+              if (tmpResolved) {
+                tmpSrc = tmpResolved;
+              }
+            }
+            return '<img src="' + tmpSrc + '" alt="' + pAlt + '">';
+          });
 
           // Links
           tmpResult = tmpResult.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (pMatch, pLinkText, pHref) => {
@@ -5241,16 +5959,17 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         AutoInitializeOrdinal: 0
       };
     }, {
-      "pict-provider": 7
+      "pict-provider": 7,
+      "pict-section-code": 10
     }],
-    10: [function (require, module, exports) {
+    13: [function (require, module, exports) {
       const libPictView = require('pict-view');
       const _ViewConfiguration = {
         ViewIdentifier: "Pict-Content",
         DefaultRenderable: "Pict-Content-Display",
         DefaultDestinationAddress: "#Pict-Content-Container",
         AutoRender: false,
-        CSS: /*css*/"\n\t\t.pict-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.pict-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: #8A7F72;\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.pict-content h1 {\n\t\t\tfont-size: 2em;\n\t\t\tcolor: #3D3229;\n\t\t\tborder-bottom: 1px solid #DDD6CA;\n\t\t\tpadding-bottom: 0.3em;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t.pict-content h2 {\n\t\t\tfont-size: 1.5em;\n\t\t\tcolor: #3D3229;\n\t\t\tborder-bottom: 1px solid #EAE3D8;\n\t\t\tpadding-bottom: 0.25em;\n\t\t\tmargin-top: 1.5em;\n\t\t}\n\t\t.pict-content h3 {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: #3D3229;\n\t\t\tmargin-top: 1.25em;\n\t\t}\n\t\t.pict-content h4, .pict-content h5, .pict-content h6 {\n\t\t\tcolor: #5E5549;\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.pict-content p {\n\t\t\tline-height: 1.7;\n\t\t\tcolor: #423D37;\n\t\t\tmargin: 0.75em 0;\n\t\t}\n\t\t.pict-content a {\n\t\t\tcolor: #2E7D74;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.pict-content a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.pict-content pre {\n\t\t\tbackground: #3D3229;\n\t\t\tcolor: #E8E0D4;\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.pict-content code {\n\t\t\tbackground: #F0ECE4;\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: #9E6B47;\n\t\t}\n\t\t.pict-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.pict-content blockquote {\n\t\t\tborder-left: 4px solid #2E7D74;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tbackground: #F7F5F0;\n\t\t\tcolor: #5E5549;\n\t\t}\n\t\t.pict-content blockquote p {\n\t\t\tmargin: 0.25em 0;\n\t\t}\n\t\t.pict-content ul, .pict-content ol {\n\t\t\tpadding-left: 2em;\n\t\t\tline-height: 1.8;\n\t\t}\n\t\t.pict-content li {\n\t\t\tmargin: 0.25em 0;\n\t\t\tcolor: #423D37;\n\t\t}\n\t\t.pict-content hr {\n\t\t\tborder: none;\n\t\t\tborder-top: 1px solid #DDD6CA;\n\t\t\tmargin: 2em 0;\n\t\t}\n\t\t.pict-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.pict-content table th {\n\t\t\tbackground: #F5F0E8;\n\t\t\tborder: 1px solid #DDD6CA;\n\t\t\tpadding: 0.6em 0.8em;\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: #3D3229;\n\t\t}\n\t\t.pict-content table td {\n\t\t\tborder: 1px solid #DDD6CA;\n\t\t\tpadding: 0.5em 0.8em;\n\t\t\tcolor: #423D37;\n\t\t}\n\t\t.pict-content table tr:nth-child(even) {\n\t\t\tbackground: #F7F5F0;\n\t\t}\n\t\t.pict-content img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\t\t.pict-content pre.mermaid {\n\t\t\tbackground: #fff;\n\t\t\tcolor: #3D3229;\n\t\t\ttext-align: center;\n\t\t\tpadding: 1em;\n\t\t}\n\t\t.pict-content .pict-content-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.pict-content .pict-content-katex-inline {\n\t\t\tdisplay: inline;\n\t\t}\n\t",
+        CSS: /*css*/"\n\t\t.pict-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.pict-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: #8A7F72;\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.pict-content h1 {\n\t\t\tfont-size: 2em;\n\t\t\tcolor: #3D3229;\n\t\t\tborder-bottom: 1px solid #DDD6CA;\n\t\t\tpadding-bottom: 0.3em;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t.pict-content h2 {\n\t\t\tfont-size: 1.5em;\n\t\t\tcolor: #3D3229;\n\t\t\tborder-bottom: 1px solid #EAE3D8;\n\t\t\tpadding-bottom: 0.25em;\n\t\t\tmargin-top: 1.5em;\n\t\t}\n\t\t.pict-content h3 {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: #3D3229;\n\t\t\tmargin-top: 1.25em;\n\t\t}\n\t\t.pict-content h4, .pict-content h5, .pict-content h6 {\n\t\t\tcolor: #5E5549;\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.pict-content p {\n\t\t\tline-height: 1.7;\n\t\t\tcolor: #423D37;\n\t\t\tmargin: 0.75em 0;\n\t\t}\n\t\t.pict-content a {\n\t\t\tcolor: #2E7D74;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.pict-content a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.pict-content-code-wrap {\n\t\t\tposition: relative;\n\t\t\tfont-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 1.5;\n\t\t\tborder-radius: 6px;\n\t\t\toverflow: auto;\n\t\t\tmargin: 1em 0;\n\t\t\tbackground: #3D3229;\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: 40px;\n\t\t\tpadding: 1.25em 0;\n\t\t\ttext-align: right;\n\t\t\tbackground: #342A22;\n\t\t\tborder-right: 1px solid #4A3F35;\n\t\t\tcolor: #8A7F72;\n\t\t\tfont-size: 13px;\n\t\t\tline-height: 1.5;\n\t\t\tuser-select: none;\n\t\t\tpointer-events: none;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers span {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0 8px 0 0;\n\t\t}\n\t\t.pict-content-code-wrap pre {\n\t\t\tmargin: 0;\n\t\t\tbackground: #3D3229;\n\t\t\tcolor: #E8E0D4;\n\t\t\tpadding: 1.25em 1.25em 1.25em 52px;\n\t\t\tborder-radius: 6px;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t.pict-content-code-wrap 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\tfont-family: inherit;\n\t\t}\n\t\t.pict-content-code-wrap .keyword { color: #C678DD; }\n\t\t.pict-content-code-wrap .string { color: #98C379; }\n\t\t.pict-content-code-wrap .number { color: #D19A66; }\n\t\t.pict-content-code-wrap .comment { color: #7F848E; font-style: italic; }\n\t\t.pict-content-code-wrap .operator { color: #56B6C2; }\n\t\t.pict-content-code-wrap .punctuation { color: #E8E0D4; }\n\t\t.pict-content-code-wrap .function-name { color: #61AFEF; }\n\t\t.pict-content-code-wrap .property { color: #E06C75; }\n\t\t.pict-content-code-wrap .tag { color: #E06C75; }\n\t\t.pict-content-code-wrap .attr-name { color: #D19A66; }\n\t\t.pict-content-code-wrap .attr-value { color: #98C379; }\n\t\t.pict-content pre {\n\t\t\tbackground: #3D3229;\n\t\t\tcolor: #E8E0D4;\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.pict-content code {\n\t\t\tbackground: #F0ECE4;\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: #9E6B47;\n\t\t}\n\t\t.pict-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.pict-content blockquote {\n\t\t\tborder-left: 4px solid #2E7D74;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tbackground: #F7F5F0;\n\t\t\tcolor: #5E5549;\n\t\t}\n\t\t.pict-content blockquote p {\n\t\t\tmargin: 0.25em 0;\n\t\t}\n\t\t.pict-content ul, .pict-content ol {\n\t\t\tpadding-left: 2em;\n\t\t\tline-height: 1.8;\n\t\t}\n\t\t.pict-content li {\n\t\t\tmargin: 0.25em 0;\n\t\t\tcolor: #423D37;\n\t\t}\n\t\t.pict-content hr {\n\t\t\tborder: none;\n\t\t\tborder-top: 1px solid #DDD6CA;\n\t\t\tmargin: 2em 0;\n\t\t}\n\t\t.pict-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.pict-content table th {\n\t\t\tbackground: #F5F0E8;\n\t\t\tborder: 1px solid #DDD6CA;\n\t\t\tpadding: 0.6em 0.8em;\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: #3D3229;\n\t\t}\n\t\t.pict-content table td {\n\t\t\tborder: 1px solid #DDD6CA;\n\t\t\tpadding: 0.5em 0.8em;\n\t\t\tcolor: #423D37;\n\t\t}\n\t\t.pict-content table tr:nth-child(even) {\n\t\t\tbackground: #F7F5F0;\n\t\t}\n\t\t.pict-content img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\t\t.pict-content pre.mermaid {\n\t\t\tbackground: #fff;\n\t\t\tcolor: #3D3229;\n\t\t\ttext-align: center;\n\t\t\tpadding: 1em;\n\t\t}\n\t\t.pict-content .pict-content-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.pict-content .pict-content-katex-inline {\n\t\t\tdisplay: inline;\n\t\t}\n\t",
         Templates: [{
           Hash: "Pict-Content-Template",
           Template: /*html*/"\n<div class=\"pict-content\" id=\"Pict-Content-Body\">\n\t<div class=\"pict-content-loading\">Loading content...</div>\n</div>\n"
@@ -5379,19 +6098,19 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       module.exports = PictContentView;
       module.exports.default_configuration = _ViewConfiguration;
     }, {
-      "pict-view": 12
+      "pict-view": 15
     }],
-    11: [function (require, module, exports) {
+    14: [function (require, module, exports) {
       module.exports = {
         "name": "pict-view",
-        "version": "1.0.66",
+        "version": "1.0.67",
         "description": "Pict View Base Class",
         "main": "source/Pict-View.js",
         "scripts": {
-          "test": "mocha -u tdd -R spec",
-          "tests": "mocha -u tdd -R spec -g",
+          "test": "npx quack test",
+          "tests": "npx quack test -g",
           "start": "node source/Pict-View.js",
-          "coverage": "nyc --reporter=lcov --reporter=text-lcov npm test",
+          "coverage": "npx quack coverage",
           "build": "npx quack build",
           "docker-dev-build": "docker build ./ -f Dockerfile_LUXURYCode -t pict-view-image:local",
           "docker-dev-run": "docker run -it -d --name pict-view-dev -p 30001:8080 -p 38086:8086 -v \"$PWD/.config:/home/coder/.config\"  -v \"$PWD:/home/coder/pict-view\" -u \"$(id -u):$(id -g)\" -e \"DOCKER_USER=$USER\" pict-view-image:local",
@@ -5415,7 +6134,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           "browser-env": "^3.3.0",
           "eslint": "^9.39.1",
           "pict": "^1.0.348",
-          "quackage": "^1.0.51",
+          "quackage": "^1.0.58",
           "typescript": "^5.9.3"
         },
         "mocha": {
@@ -5430,12 +6149,12 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           "watch-ignore": ["lib/vendor"]
         },
         "dependencies": {
-          "fable": "^3.1.57",
-          "fable-serviceproviderbase": "^3.0.18"
+          "fable": "^3.1.63",
+          "fable-serviceproviderbase": "^3.0.19"
         }
       };
     }, {}],
-    12: [function (require, module, exports) {
+    15: [function (require, module, exports) {
       const libFableServiceBase = require('fable-serviceproviderbase');
       const libPackage = require('../package.json');
       const defaultPictViewSettings = {
@@ -6599,10 +7318,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       }
       module.exports = PictView;
     }, {
-      "../package.json": 11,
+      "../package.json": 14,
       "fable-serviceproviderbase": 2
     }],
-    13: [function (require, module, exports) {
+    16: [function (require, module, exports) {
       module.exports = {
         "Name": "Pict Docuserve",
         "Hash": "Docuserve",
@@ -6615,7 +7334,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         }
       };
     }, {}],
-    14: [function (require, module, exports) {
+    17: [function (require, module, exports) {
       const libPictApplication = require('pict-application');
 
       // Provider
@@ -6672,7 +7391,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           // Load the catalog, then render the layout
           let tmpDocProvider = this.pict.providers['Docuserve-Documentation'];
           tmpDocProvider.loadCatalog(() => {
-            // Set the page title from cover.md or _topbar.md
+            // Set the page title from _cover.md or _topbar.md
             let tmpDocuserve = this.pict.AppData.Docuserve;
             if (tmpDocuserve.CoverLoaded && tmpDocuserve.Cover && tmpDocuserve.Cover.Title) {
               document.title = tmpDocuserve.Cover.Title.replace(/<[^>]*>/g, '');
@@ -6880,17 +7599,17 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       module.exports = DocuserveApplication;
       module.exports.default_configuration = require('./Pict-Application-Docuserve-Configuration.json');
     }, {
-      "./Pict-Application-Docuserve-Configuration.json": 13,
-      "./providers/Pict-Provider-Docuserve-Documentation.js": 15,
-      "./views/PictView-Docuserve-Content.js": 16,
-      "./views/PictView-Docuserve-Layout.js": 17,
-      "./views/PictView-Docuserve-Search.js": 18,
-      "./views/PictView-Docuserve-Sidebar.js": 19,
-      "./views/PictView-Docuserve-Splash.js": 20,
-      "./views/PictView-Docuserve-TopBar.js": 21,
+      "./Pict-Application-Docuserve-Configuration.json": 16,
+      "./providers/Pict-Provider-Docuserve-Documentation.js": 18,
+      "./views/PictView-Docuserve-Content.js": 19,
+      "./views/PictView-Docuserve-Layout.js": 20,
+      "./views/PictView-Docuserve-Search.js": 21,
+      "./views/PictView-Docuserve-Sidebar.js": 22,
+      "./views/PictView-Docuserve-Splash.js": 23,
+      "./views/PictView-Docuserve-TopBar.js": 24,
       "pict-application": 5
     }],
-    15: [function (require, module, exports) {
+    18: [function (require, module, exports) {
       const libPictProvider = require('pict-provider');
       const libLunr = require('lunr');
       const libPictSectionContent = require('pict-section-content');
@@ -6947,10 +7666,40 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         }
 
         /**
-         * Load all documentation data sources: catalog, cover.md, _sidebar.md.
+         * Create an image resolver closure for the content provider.
+         *
+         * Resolves relative image URLs against the directory of the document
+         * being rendered, so that images referenced with relative paths in
+         * markdown (e.g. `![graph](diagram.svg)`) resolve correctly even
+         * when the page uses hash-based routing.
+         *
+         * @param {string} pDocURL - The URL the markdown document was fetched from
+         * @returns {Function} An image resolver callback: (pSrc, pAlt) => resolvedSrc
+         */
+        _createImageResolver(pDocURL) {
+          // Extract the directory portion of the document URL
+          let tmpBaseDir = '';
+          if (pDocURL) {
+            let tmpLastSlash = pDocURL.lastIndexOf('/');
+            if (tmpLastSlash >= 0) {
+              tmpBaseDir = pDocURL.substring(0, tmpLastSlash + 1);
+            }
+          }
+          return (pSrc, pAlt) => {
+            // Leave absolute URLs, data URIs, and root-relative paths unchanged
+            if (pSrc.match(/^https?:\/\//) || pSrc.match(/^data:/) || pSrc.match(/^\//)) {
+              return pSrc;
+            }
+            // Prepend the document's directory to make relative paths work
+            return tmpBaseDir + pSrc;
+          };
+        }
+
+        /**
+         * Load all documentation data sources: catalog, _cover.md, _sidebar.md.
          *
          * Loads the catalog first (it provides the fallback data), then attempts
-         * to load cover.md and _sidebar.md in parallel.  If those markdown files
+         * to load _cover.md and _sidebar.md in parallel.  If those markdown files
          * exist they drive the splash and sidebar views; otherwise the catalog
          * data is used as a fallback.
          *
@@ -6960,7 +7709,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           let tmpCallback = typeof fCallback === 'function' ? fCallback : () => {};
           let tmpCatalogURL = this.pict.AppData.Docuserve.CatalogURL || 'retold-catalog.json';
           let tmpLoadOptionalFiles = () => {
-            // Load cover.md, _sidebar.md, _topbar.md, errorpage.md and keyword index in parallel.
+            // Load _cover.md, _sidebar.md, _topbar.md, errorpage.md and keyword index in parallel.
             // When all are done, if we still have no sidebar data, try to auto-discover
             // a README.md so the site works with plain markdown folders.
             let tmpPending = 5;
@@ -7060,9 +7809,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         }
 
         /**
-         * Fetch and parse cover.md into structured data for the splash view.
+         * Fetch and parse _cover.md into structured data for the splash view.
          *
-         * The expected cover.md format follows the docsify convention:
+         * The expected _cover.md format follows the docsify convention:
          *   # Title
          *   > Tagline
          *   Description paragraph text.
@@ -7077,29 +7826,29 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         loadCover(fCallback) {
           let tmpCallback = typeof fCallback === 'function' ? fCallback : () => {};
           let tmpDocsBase = this.pict.AppData.Docuserve.DocsBaseURL || '';
-          fetch(tmpDocsBase + 'cover.md').then(pResponse => {
+          fetch(tmpDocsBase + '_cover.md').then(pResponse => {
             if (!pResponse.ok) {
               return null;
             }
             return pResponse.text();
           }).then(pMarkdown => {
             if (!pMarkdown) {
-              this.log.info('Docuserve: No cover.md found; splash will use catalog data.');
+              this.log.info('Docuserve: No _cover.md found; splash will use catalog data.');
               return tmpCallback();
             }
             this.pict.AppData.Docuserve.Cover = this.parseCover(pMarkdown);
             this.pict.AppData.Docuserve.CoverLoaded = true;
             return tmpCallback();
           }).catch(pError => {
-            this.log.warn("Docuserve: Error loading cover.md: ".concat(pError));
+            this.log.warn("Docuserve: Error loading _cover.md: ".concat(pError));
             return tmpCallback();
           });
         }
 
         /**
-         * Parse cover.md markdown text into a structured object.
+         * Parse _cover.md markdown text into a structured object.
          *
-         * @param {string} pMarkdown - Raw cover.md content
+         * @param {string} pMarkdown - Raw _cover.md content
          * @returns {Object} Parsed cover data
          */
         parseCover(pMarkdown) {
@@ -7913,7 +8662,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._ContentProvider.parseMarkdown(pMarkdown, this._createLinkResolver(pCurrentGroup, pCurrentModule, pCurrentDocPath));
+            let tmpHTML = this._ContentProvider.parseMarkdown(pMarkdown, this._createLinkResolver(pCurrentGroup, pCurrentModule, pCurrentDocPath), this._createImageResolver(pURL));
             this._ContentCache[pURL] = tmpHTML;
             return tmpCallback(null, tmpHTML);
           }).catch(pError => {
@@ -7997,9 +8746,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
     }, {
       "lunr": 3,
       "pict-provider": 7,
-      "pict-section-content": 8
+      "pict-section-content": 11
     }],
-    16: [function (require, module, exports) {
+    19: [function (require, module, exports) {
       const libPictContentView = require('pict-section-content');
       const _ViewConfiguration = {
         ViewIdentifier: "Docuserve-Content",
@@ -8062,9 +8811,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       module.exports = DocuserveContentView;
       module.exports.default_configuration = _ViewConfiguration;
     }, {
-      "pict-section-content": 8
+      "pict-section-content": 11
     }],
-    17: [function (require, module, exports) {
+    20: [function (require, module, exports) {
       const libPictView = require('pict-view');
       const _ViewConfiguration = {
         ViewIdentifier: "Docuserve-Layout",
@@ -8117,9 +8866,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       module.exports = DocuserveLayoutView;
       module.exports.default_configuration = _ViewConfiguration;
     }, {
-      "pict-view": 12
+      "pict-view": 15
     }],
-    18: [function (require, module, exports) {
+    21: [function (require, module, exports) {
       const libPictView = require('pict-view');
       const _ViewConfiguration = {
         ViewIdentifier: "Docuserve-Search",
@@ -8247,9 +8996,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       module.exports = DocuserveSearchView;
       module.exports.default_configuration = _ViewConfiguration;
     }, {
-      "pict-view": 12
+      "pict-view": 15
     }],
-    19: [function (require, module, exports) {
+    22: [function (require, module, exports) {
       const libPictView = require('pict-view');
       const _ViewConfiguration = {
         ViewIdentifier: "Docuserve-Sidebar",
@@ -8470,9 +9219,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       module.exports = DocusserveSidebarView;
       module.exports.default_configuration = _ViewConfiguration;
     }, {
-      "pict-view": 12
+      "pict-view": 15
     }],
-    20: [function (require, module, exports) {
+    23: [function (require, module, exports) {
       const libPictView = require('pict-view');
       const _ViewConfiguration = {
         ViewIdentifier: "Docuserve-Splash",
@@ -8506,7 +9255,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         }
 
         /**
-         * Render the splash screen from parsed cover.md data.
+         * Render the splash screen from parsed _cover.md data.
          *
          * @param {Object} pCover - The parsed cover data { Title, Tagline, Description, Highlights, Actions }
          */
@@ -8549,7 +9298,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         }
 
         /**
-         * Render the splash screen from catalog data as a fallback when cover.md
+         * Render the splash screen from catalog data as a fallback when _cover.md
          * is not available.
          *
          * @param {Object} pDocuserve - The AppData.Docuserve state
@@ -8624,9 +9373,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       module.exports = DocusserveSplashView;
       module.exports.default_configuration = _ViewConfiguration;
     }, {
-      "pict-view": 12
+      "pict-view": 15
     }],
-    21: [function (require, module, exports) {
+    24: [function (require, module, exports) {
       const libPictView = require('pict-view');
       const _ViewConfiguration = {
         ViewIdentifier: "Docuserve-TopBar",
@@ -8727,8 +9476,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
       module.exports = DocuserveTopBarView;
       module.exports.default_configuration = _ViewConfiguration;
     }, {
-      "pict-view": 12
+      "pict-view": 15
     }]
-  }, {}, [14])(14);
+  }, {}, [17])(17);
 });
 //# sourceMappingURL=pict-docuserve.js.map