pict-section-inlinedocumentation 1.0.0 → 1.0.2

package/example_applications/basic/docs/_brand.json

@@ -0,0 +1,18 @@
+{
+	"Hash": "pict-section-inlinedocumentation/basic",
+	"Name": "basic",
+	"Tagline": "",
+	"Palette": "carnival",
+	"Icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"frame-pict-section-inlinedocumentation_basic-filled-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#e4a926\"/>\n\t\t<g clip-path=\"url(#frame-pict-section-inlinedocumentation_basic-filled-light)\"><circle cx=\"48\" cy=\"48\" r=\"36\" fill=\"none\" stroke=\"#66efae\" stroke-width=\"2\" opacity=\"0.45\"/>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"22\" fill=\"rgba(255,255,255,0.18)\"/>\n\t\t\t\t\t<circle cx=\"13.69\" cy=\"37.09\" r=\"9\" fill=\"#66efae\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"28\" font-weight=\"600\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">PSI</text>\n\t</svg>",
+	"IconType": "svg",
+	"Favicon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation_basic-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#e4a926\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation_basic-light)\"><circle cx=\"48\" cy=\"48\" r=\"28\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"FaviconDark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation_basic-dark\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#eac87c\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation_basic-dark)\"><circle cx=\"48\" cy=\"48\" r=\"28\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#101418\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"Colors": {
+		"Primary": "#e4a926",
+		"Secondary": "#66efae",
+		"PrimaryLight": "#e4a926",
+		"PrimaryDark": "#eac87c",
+		"SecondaryLight": "#66efae",
+		"SecondaryDark": "#a6f2ce"
+	}
+}

package/example_applications/bookshop/docs/_brand.json

@@ -0,0 +1,18 @@
+{
+	"Hash": "pict-section-inlinedocumentation/bookshop",
+	"Name": "bookshop",
+	"Tagline": "Bookshop example demonstrating inline contextual documentation with pict-section-inlinedocumentation",
+	"Palette": "carnival",
+	"Icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"frame-pict-section-inlinedocumentation_bookshop-filled-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#f3a513\"/>\n\t\t<g clip-path=\"url(#frame-pict-section-inlinedocumentation_bookshop-filled-light)\"><circle cx=\"48\" cy=\"48\" r=\"38\" fill=\"rgba(255,255,255,0.18)\"/>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"21\" fill=\"#38ec8f\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"28\" font-weight=\"700\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">PSI</text>\n\t</svg>",
+	"IconType": "svg",
+	"Favicon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation_bookshop-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#f3a513\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation_bookshop-light)\"><circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"rgba(255,255,255,0.22)\"/>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"21\" fill=\"#38ec8f\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"FaviconDark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation_bookshop-dark\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#f3c56f\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation_bookshop-dark)\"><circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"rgba(255,255,255,0.22)\"/>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"21\" fill=\"#8ff0be\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#101418\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"Colors": {
+		"Primary": "#f3a513",
+		"Secondary": "#38ec8f",
+		"PrimaryLight": "#f3a513",
+		"PrimaryDark": "#f3c56f",
+		"SecondaryLight": "#38ec8f",
+		"SecondaryDark": "#8ff0be"
+	}
+}

package/example_applications/bookshop/package.json

@@ -30,5 +30,13 @@
 			"from": "./data/pict_documentation_topics.json",
 			"to": "./dist/docs/"
 		}
-	]
+	],
+	"retold": {
+		"ExampleApplication": {
+			"Stage": true,
+			"Title": "Bookshop",
+			"Summary": "E-commerce demo with route-mapped help, data-attribute tooltips, and F1 toggling for pict-section-inlinedocumentation.",
+			"Complexity": "Intermediate"
+		}
+	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pict-section-inlinedocumentation",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "Pict embeddable inline documentation browser with topic support",
 	"main": "source/Pict-Section-InlineDocumentation.js",
 	"scripts": {
@@ -13,27 +13,27 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/stevenvelozo/pict-section-inlinedocumentation.git"
+		"url": "git+https://github.com/fable-retold/pict-section-inlinedocumentation.git"
 	},
 	"author": "steven velozo <steven@velozo.com>",
 	"license": "MIT",
 	"bugs": {
-		"url": "https://github.com/stevenvelozo/pict-section-inlinedocumentation/issues"
+		"url": "https://github.com/fable-retold/pict-section-inlinedocumentation/issues"
 	},
-	"homepage": "https://github.com/stevenvelozo/pict-section-inlinedocumentation#readme",
+	"homepage": "https://github.com/fable-retold/pict-section-inlinedocumentation#readme",
 	"dependencies": {
 		"lunr": "^2.3.9",
 		"pict-provider": "^1.0.13",
-		"pict-section-content": "^1.0.0",
+		"pict-section-content": "^1.0.7",
 		"pict-section-markdowneditor": "^1.0.15",
-		"pict-section-modal": "^1.0.1",
+		"pict-section-modal": "^1.1.4",
 		"pict-view": "^1.0.68"
 	},
 	"devDependencies": {
-		"pict": "^1.0.368",
-		"pict-docuserve": "^1.0.0",
+		"pict": "^1.0.372",
+		"pict-docuserve": "^1.4.4",
 		"puppeteer": "^24.40.0",
-		"quackage": "^1.2.3"
+		"quackage": "^1.3.0"
 	},
 	"mocha": {
 		"diff": true,

package/source/providers/Pict-Provider-InlineDocumentation.js

@@ -2213,24 +2213,48 @@ class InlineDocumentationProvider extends libPictProvider
 			}
 			else if (tmpCurrentGroup)
 			{
-				// Indented item — document within the current group
+				// Indented item — a document (link) or a sub-folder (no link)
+				// within the current group. Capture the nesting Level from the
+				// indentation so the nav can render real hierarchy.
+				let tmpLevel = Math.max(0, Math.floor((tmpIndent - 2) / 2));
 				if (tmpLinkMatch)
 				{
 					tmpCurrentGroup.Items.push({
 						Name: tmpLinkMatch[1].trim(),
-						Path: this._normalizePath(tmpLinkMatch[2].trim())
+						Path: this._normalizePath(tmpLinkMatch[2].trim()),
+						Level: tmpLevel
 					});
 				}
 				else
 				{
 					tmpCurrentGroup.Items.push({
 						Name: tmpItemContent,
-						Path: ''
+						Path: '',
+						Level: tmpLevel,
+						IsFolder: true
 					});
 				}
 			}
 		}
 
+		// Make sub-folder nodes actionable: resolve each folder's first
+		// descendant document (the items are in depth-first order, so scan
+		// forward until we leave the folder's subtree) so clicking the folder
+		// opens its first child.
+		for (let g = 0; g < tmpGroups.length; g++)
+		{
+			let tmpItems = tmpGroups[g].Items || [];
+			for (let a = 0; a < tmpItems.length; a++)
+			{
+				if (!tmpItems[a].IsFolder) { continue; }
+				for (let b = a + 1; b < tmpItems.length; b++)
+				{
+					if ((tmpItems[b].Level || 0) <= (tmpItems[a].Level || 0)) { break; }
+					if (tmpItems[b].Path) { tmpItems[a].FirstChildPath = tmpItems[b].Path; break; }
+				}
+			}
+		}
+
 		return tmpGroups;
 	}
 

package/source/views/Pict-View-InlineDocumentation-Content.js

@@ -60,9 +60,13 @@ const _ViewConfiguration =
 		.pict-inline-doc-content a:hover {
 			text-decoration: underline;
 		}
+		/* Code blocks: bg + text both flow from background/text tokens
+		   so they re-skin coherently across themes. (Previous version
+		   paired background-tertiary with text-on-brand — both light
+		   in most palettes, producing invisible text.) */
 		.pict-inline-doc-content pre {
-			background: var(--theme-color-text-primary, #3D3229);
-			color: var(--theme-color-text-on-brand, #E8E0D4);
+			background: var(--theme-color-background-tertiary, #F0ECE4);
+			color:      var(--theme-color-text-primary,        #3D3229);
 			padding: 1em;
 			border-radius: 5px;
 			overflow-x: auto;
@@ -84,7 +88,7 @@ const _ViewConfiguration =
 			font-size: inherit;
 		}
 		.pict-inline-doc-content blockquote {
-			border-left: 3px solid #2E7D74;
+			border-left: 3px solid var(--theme-color-brand-primary, #2E7D74);
 			margin: 0.8em 0;
 			padding: 0.4em 0.8em;
 			background: var(--theme-color-background-secondary, #F7F5F0);
@@ -197,13 +201,13 @@ const _ViewConfiguration =
 			stroke-linejoin: round;
 		}
 		.pict-content-code-action-btn:hover {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #FFFFFF);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #FFFFFF);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-content-code-action-btn.is-copied {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #FFFFFF);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #FFFFFF);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-edit-toolbar {
@@ -229,7 +233,7 @@ const _ViewConfiguration =
 			align-items: center;
 			justify-content: center;
 			padding: 0.25em 0.6em;
-			border: 1px solid #D4A373;
+			border: 1px solid var(--theme-color-border-default, #D4A373);
 			border-radius: 3px;
 			background: var(--theme-color-background-panel,    #fff);
 			color: var(--theme-color-text-secondary, #5E5549);
@@ -241,12 +245,12 @@ const _ViewConfiguration =
 			background: var(--theme-color-background-tertiary, #F0ECE4);
 		}
 		.pict-inline-doc-edit-btn.primary {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-edit-btn.primary:hover {
-			background: #266D65;
+			background: var(--theme-color-brand-primary-hover, #266D65);
 		}
 		.pict-inline-doc-edit-btn .btn-icon {
 			margin-right: 0.3em;
@@ -256,7 +260,7 @@ const _ViewConfiguration =
 		}
 		/* Tooltip placeholder: edit mode indicators */
 		[data-d-tooltip].pict-inline-doc-tooltip-edit-target {
-			outline: 1px dashed #2E7D74;
+			outline: 1px dashed var(--theme-color-brand-primary, #2E7D74);
 			outline-offset: 2px;
 			cursor: pointer;
 			position: relative;
@@ -268,8 +272,8 @@ const _ViewConfiguration =
 			right: -6px;
 			width: 14px;
 			height: 14px;
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-radius: 50%;
 			font-size: 9px;
 			line-height: 14px;
@@ -292,7 +296,7 @@ const _ViewConfiguration =
 		/* Empty icon tooltip in edit mode */
 		.pict-inline-doc-tooltip-empty .pict-inline-doc-tooltip-icon {
 			opacity: 0.4;
-			outline: 1px dashed #8A7F72;
+			outline: 1px dashed var(--theme-color-text-muted, #8A7F72);
 			outline-offset: 1px;
 			border-radius: 50%;
 		}

package/source/views/Pict-View-InlineDocumentation-Layout.js

@@ -25,14 +25,27 @@ const _ViewConfiguration =
 			overflow: hidden;
 		}
 		.pict-inline-doc-nav-container {
-			width: 240px;
-			min-width: 200px;
-			max-width: 300px;
+			width: var(--pict-inline-doc-nav-width, 240px);
+			min-width: 160px;
+			max-width: 640px;
 			border-right: 1px solid var(--theme-color-border-default, #E5DED4);
 			background: var(--theme-color-background-secondary, #F7F5F0);
 			overflow-y: auto;
 			flex-shrink: 0;
 		}
+		.pict-inline-doc-resizer {
+			flex: 0 0 6px;
+			width: 6px;
+			margin: 0 -3px;
+			z-index: 2;
+			cursor: col-resize;
+			background: transparent;
+			transition: background 0.12s ease;
+		}
+		.pict-inline-doc-resizer:hover,
+		.pict-inline-doc-resizer.pict-inline-doc-resizing {
+			background: var(--theme-color-brand-primary, #2E7D74);
+		}
 		.pict-inline-doc-content-container {
 			flex: 1;
 			overflow-y: auto;
@@ -55,6 +68,9 @@ const _ViewConfiguration =
 			overflow-y: visible;
 			flex-shrink: 0;
 		}
+		.pict-inline-doc.pict-inline-doc-compact .pict-inline-doc-resizer {
+			display: none;
+		}
 	`,
 
 	Templates:
@@ -64,6 +80,7 @@ const _ViewConfiguration =
 			Template: /*html*/`
 <div class="pict-inline-doc">
 	<div class="pict-inline-doc-nav-container" id="InlineDoc-Nav-Container"></div>
+	<div class="pict-inline-doc-resizer" id="InlineDoc-Resizer" title="Drag to resize the navigation"></div>
 	<div class="pict-inline-doc-content-container" id="InlineDoc-Content-Container"></div>
 </div>
 `
@@ -93,12 +110,107 @@ class InlineDocumentationLayoutView extends libPictView
 		// Inject all view CSS into the PICT-CSS style element
 		this.pict.CSSMap.injectCSS();
 
+		// Restore any saved nav width, then make the nav/content divider draggable
+		this._restoreNavWidth();
+		this._wireNavResizer();
+
 		// Watch for size changes and toggle compact mode
 		this._setupCompactModeObserver();
 
 		return super.onAfterRender();
 	}
 
+	/**
+	 * Make the divider between the nav and the content draggable so the reader
+	 * can widen or narrow the navigation. The width lives in a CSS custom
+	 * property on the layout container and is persisted to localStorage.
+	 */
+	_wireNavResizer()
+	{
+		if (typeof document === 'undefined')
+		{
+			return;
+		}
+
+		let tmpResizer = document.getElementById('InlineDoc-Resizer');
+		let tmpContainer = document.querySelector('.pict-inline-doc');
+		let tmpNav = document.getElementById('InlineDoc-Nav-Container');
+		if (!tmpResizer || !tmpContainer || !tmpNav)
+		{
+			return;
+		}
+
+		let tmpMin = 160;
+		let tmpMax = 640;
+		let tmpSelf = this;
+
+		tmpResizer.addEventListener('mousedown', (pDownEvent) =>
+		{
+			pDownEvent.preventDefault();
+			let tmpStartX = pDownEvent.clientX;
+			let tmpStartWidth = tmpNav.offsetWidth;
+
+			tmpResizer.classList.add('pict-inline-doc-resizing');
+			document.body.style.userSelect = 'none';
+			document.body.style.cursor = 'col-resize';
+
+			// A drag needs document-level move/up tracking; both listeners are
+			// removed on release, so nothing leaks across renders.
+			let fMove = (pMoveEvent) =>
+			{
+				let tmpWidth = tmpStartWidth + (pMoveEvent.clientX - tmpStartX);
+				tmpWidth = Math.max(tmpMin, Math.min(tmpMax, tmpWidth));
+				tmpContainer.style.setProperty('--pict-inline-doc-nav-width', tmpWidth + 'px');
+			};
+			let fUp = () =>
+			{
+				document.removeEventListener('mousemove', fMove);
+				document.removeEventListener('mouseup', fUp);
+				tmpResizer.classList.remove('pict-inline-doc-resizing');
+				document.body.style.userSelect = '';
+				document.body.style.cursor = '';
+				tmpSelf._persistNavWidth(tmpContainer.style.getPropertyValue('--pict-inline-doc-nav-width'));
+			};
+
+			document.addEventListener('mousemove', fMove);
+			document.addEventListener('mouseup', fUp);
+		});
+	}
+
+	_persistNavWidth(pWidth)
+	{
+		try
+		{
+			if (pWidth && typeof localStorage !== 'undefined')
+			{
+				localStorage.setItem('pict-inline-doc-nav-width', pWidth);
+			}
+		}
+		catch (pError) { /* storage unavailable — the width just won't persist */ }
+	}
+
+	_restoreNavWidth()
+	{
+		try
+		{
+			if (typeof localStorage === 'undefined')
+			{
+				return;
+			}
+			let tmpSaved = localStorage.getItem('pict-inline-doc-nav-width');
+			if (!tmpSaved)
+			{
+				return;
+			}
+			let tmpContainer = document.querySelector('.pict-inline-doc');
+			if (tmpContainer)
+			{
+				tmpContainer.style.setProperty('--pict-inline-doc-nav-width', tmpSaved);
+			}
+		}
+		catch (pError) { /* ignore */ }
+	}
+
 	/**
 	 * Set up a ResizeObserver to toggle compact mode when the container
 	 * is too narrow for a side-by-side nav + content layout.

package/source/views/Pict-View-InlineDocumentation-Nav.js

@@ -112,7 +112,7 @@ const _ViewConfiguration =
 		}
 		.pict-inline-doc-nav-item {
 			display: block;
-			padding: 0.25em 0.8em 0.25em 1.6em;
+			padding: 0.25em 0.8em 0.25em calc(1.6em + var(--doc-nav-level, 0) * 0.85em);
 			color: var(--theme-color-text-secondary, #5E5549);
 			text-decoration: none;
 			font-size: 0.85em;
@@ -123,15 +123,34 @@ const _ViewConfiguration =
 		.pict-inline-doc-nav-item:hover {
 			background: var(--theme-color-background-tertiary, #EDE8DF);
 		}
+		.pict-inline-doc-nav-folder {
+			font-weight: 600;
+			color: var(--theme-color-text-primary, #3D3229);
+		}
+		.pict-inline-doc-nav-folder-icon {
+			margin-right: 0.4em;
+			vertical-align: -0.12em;
+			opacity: 0.65;
+		}
+		.pict-inline-doc-nav-file-icon {
+			margin-right: 0.4em;
+			vertical-align: -0.12em;
+			opacity: 0.55;
+		}
+		.pict-inline-doc-nav-section-dot {
+			margin-right: 0.4em;
+			vertical-align: -0.12em;
+			opacity: 0.3;
+		}
 		.pict-inline-doc-nav-item.active {
-			background: #E8E3D8;
+			background: var(--theme-color-background-hover, #E8E3D8);
 			color: var(--theme-color-brand-primary, #2E7D74);
 			border-left-color: var(--theme-color-brand-primary, #2E7D74);
 			font-weight: 500;
 		}
 		.pict-inline-doc-nav-heading {
 			display: block;
-			padding: 0.15em 0.8em 0.15em 2.4em;
+			padding: 0.15em 0.8em 0.15em calc(2.4em + var(--doc-nav-level, 0) * 0.85em);
 			color: var(--theme-color-text-muted, #8A7F72);
 			font-size: 0.78em;
 			cursor: pointer;
@@ -143,7 +162,7 @@ const _ViewConfiguration =
 			color: var(--theme-color-text-secondary, #5E5549);
 		}
 		.pict-inline-doc-nav-heading.h3 {
-			padding-left: 3.2em;
+			padding-left: calc(3.2em + var(--doc-nav-level, 0) * 0.85em);
 			font-size: 0.72em;
 		}
 		/* Search icon in collapsed header */
@@ -214,8 +233,8 @@ const _ViewConfiguration =
 			display: inline-block;
 			margin: 0.5em 1em;
 			padding: 0.3em 0.7em;
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-radius: 4px;
 			font-size: 0.8em;
 			font-weight: 500;
@@ -258,15 +277,15 @@ const _ViewConfiguration =
 			color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-nav-toolbar-btn.accent:hover {
-			background: #F0F9F7;
+			background: var(--theme-color-background-hover, #F0F9F7);
 		}
 		.pict-inline-doc-nav-toolbar-btn.active {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-nav-toolbar-btn.active:hover {
-			background: #266D65;
+			background: var(--theme-color-brand-primary-hover, #266D65);
 		}
 		.pict-inline-doc-nav-toolbar-spacer {
 			flex: 1;
@@ -624,22 +643,44 @@ class InlineDocumentationNavView extends libPictView
 				let tmpActive = (pCurrentPath === tmpGroup.Path) ? ' active' : '';
 				tmpHTML += '<a class="pict-inline-doc-nav-item' + tmpActive
 					+ '" data-doc-path="' + this._escapeHTML(tmpGroup.Path) + '">'
+					+ this._fileIconSVG()
 					+ this._escapeHTML(tmpGroup.Name)
 					+ '</a>';
 
 				// If this is the active item, render heading sub-items
 				if (pCurrentPath === tmpGroup.Path)
 				{
-					tmpHTML += this._renderHeadingSubItems(pHeadings, tmpFilterLower);
+					tmpHTML += this._renderHeadingSubItems(pHeadings, tmpFilterLower, 0);
 				}
 			}
 
 			for (let j = 0; j < tmpGroupItems.length; j++)
 			{
 				let tmpItem = tmpGroupItems[j];
+				let tmpIndent = ' style="--doc-nav-level:' + (tmpItem.Level || 0) + '"';
+
+				// Sub-folder node (no document of its own). Indent it by its
+				// level and, when it has descendants, make it clickable so it
+				// opens its first child document; mark it with a folder glyph.
 				if (!tmpItem.Path)
 				{
-					tmpHTML += '<span class="pict-inline-doc-nav-item">' + this._escapeHTML(tmpItem.Name) + '</span>';
+					if (tmpItem.FirstChildPath)
+					{
+						// Folders are navigational shortcuts to their first child; the
+						// child item carries the active highlight, so the folder doesn't.
+						tmpHTML += '<a class="pict-inline-doc-nav-item pict-inline-doc-nav-folder'
+							+ '" data-doc-path="' + this._escapeHTML(tmpItem.FirstChildPath) + '"' + tmpIndent + '>'
+							+ this._folderIconSVG()
+							+ this._escapeHTML(tmpItem.Name)
+							+ '</a>';
+					}
+					else
+					{
+						tmpHTML += '<span class="pict-inline-doc-nav-item pict-inline-doc-nav-folder"' + tmpIndent + '>'
+							+ this._folderIconSVG()
+							+ this._escapeHTML(tmpItem.Name)
+							+ '</span>';
+					}
 					continue;
 				}
 
@@ -647,7 +688,8 @@ class InlineDocumentationNavView extends libPictView
 				{
 					// External link — opens in a new tab
 					tmpHTML += '<a class="pict-inline-doc-nav-item pict-inline-doc-nav-item-external'
-						+ '" data-external-url="' + this._escapeHTML(tmpItem.ExternalURL) + '">'
+						+ '" data-external-url="' + this._escapeHTML(tmpItem.ExternalURL) + '"' + tmpIndent + '>'
+						+ this._fileIconSVG()
 						+ this._escapeHTML(tmpItem.Name)
 						+ '<svg class="pict-inline-doc-nav-external-icon" width="0.75em" height="0.75em" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4a1 1 0 01-1 1H3a1 1 0 01-1-1V5a1 1 0 011-1h4"/><polyline points="8,2 14,2 14,8"/><line x1="14" y1="2" x2="7" y2="9"/></svg>'
 						+ '</a>';
@@ -656,14 +698,15 @@ class InlineDocumentationNavView extends libPictView
 				{
 					let tmpActive = (pCurrentPath === tmpItem.Path) ? ' active' : '';
 					tmpHTML += '<a class="pict-inline-doc-nav-item' + tmpActive
-						+ '" data-doc-path="' + this._escapeHTML(tmpItem.Path) + '">'
+						+ '" data-doc-path="' + this._escapeHTML(tmpItem.Path) + '"' + tmpIndent + '>'
+						+ this._fileIconSVG()
 						+ this._escapeHTML(tmpItem.Name)
 						+ '</a>';
 
 					// If this is the active item, render heading sub-items
 					if (pCurrentPath === tmpItem.Path)
 					{
-						tmpHTML += this._renderHeadingSubItems(pHeadings, tmpFilterLower);
+						tmpHTML += this._renderHeadingSubItems(pHeadings, tmpFilterLower, tmpItem.Level || 0);
 					}
 				}
 			}
@@ -675,6 +718,40 @@ class InlineDocumentationNavView extends libPictView
 		return tmpHTML;
 	}
 
+	/**
+	 * A small folder glyph for sub-folder nav nodes. Uses currentColor so it
+	 * follows the theme like the other inline nav icons.
+	 *
+	 * @returns {string} inline SVG HTML
+	 */
+	_folderIconSVG()
+	{
+		return '<svg class="pict-inline-doc-nav-folder-icon" width="0.85em" height="0.85em" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 5a1 1 0 0 1 1-1h3.2l1.3 1.4h5.5a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z"/></svg>';
+	}
+
+	/**
+	 * A small document glyph (a page with a folded corner) for markdown file
+	 * nodes. Same footprint as the folder glyph so files and folders line up at
+	 * the same depth.
+	 *
+	 * @returns {string} inline SVG HTML
+	 */
+	_fileIconSVG()
+	{
+		return '<svg class="pict-inline-doc-nav-file-icon" width="0.85em" height="0.85em" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2.5H9L12 5.5V13.5H4Z"/><polyline points="9 2.5 9 5.5 12 5.5"/></svg>';
+	}
+
+	/**
+	 * A small filled dot marking an in-document section (a heading sub-item shown
+	 * beneath the active document). currentColor + low opacity keeps it quiet.
+	 *
+	 * @returns {string} inline SVG HTML
+	 */
+	_sectionDotSVG()
+	{
+		return '<svg class="pict-inline-doc-nav-section-dot" width="0.85em" height="0.85em" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="2.3" fill="currentColor"/></svg>';
+	}
+
 	/**
 	 * Render heading sub-items (h2 and h3) beneath the active nav item.
 	 *
@@ -682,13 +759,16 @@ class InlineDocumentationNavView extends libPictView
 	 * @param {string} pFilterText - Lowercase filter text
 	 * @returns {string} HTML string for heading sub-items
 	 */
-	_renderHeadingSubItems(pHeadings, pFilterText)
+	_renderHeadingSubItems(pHeadings, pFilterText, pBaseLevel)
 	{
 		if (!pHeadings || pHeadings.length < 1)
 		{
 			return '';
 		}
 
+		// Indent the headings relative to their (possibly nested) parent
+		// document item, so they line up one notch under it at any tree depth.
+		let tmpLevelStyle = ' style="--doc-nav-level:' + (pBaseLevel || 0) + '"';
 		let tmpHTML = '';
 
 		for (let i = 0; i < pHeadings.length; i++)
@@ -704,7 +784,8 @@ class InlineDocumentationNavView extends libPictView
 
 			let tmpLevelClass = (tmpHeading.Level === 3) ? ' h3' : '';
 			tmpHTML += '<a class="pict-inline-doc-nav-heading' + tmpLevelClass
-				+ '" data-heading-slug="' + this._escapeHTML(tmpHeading.Slug) + '">'
+				+ '" data-heading-slug="' + this._escapeHTML(tmpHeading.Slug) + '"' + tmpLevelStyle + '>'
+				+ this._sectionDotSVG()
 				+ this._escapeHTML(tmpText)
 				+ '</a>';
 		}