kempo-server 3.0.5 → 3.0.7

package/dist/templating/index.js

@@ -1 +1 @@
-import{readFile,writeFile,mkdir,readdir}from"fs/promises";import path from"path";import{extractAttrs,extractContentBlocks,mergeContentBlocks,replaceLocations,resolveVars,resolveIfs,resolveForeach,resolveFragmentTags}from"./parse.js";import{readFileSync,statSync}from"fs";const findFileUpSync=(filename,startDir,rootDir)=>{let dir=startDir;const root=path.resolve(rootDir);for(;;){const candidate=path.join(dir,filename);try{return statSync(candidate),candidate}catch(e){}if(path.resolve(dir)===root)return null;const parent=path.dirname(dir);if(parent===dir)return null;dir=parent}},loadVersion=rootDir=>{try{return JSON.parse(readFileSync(path.join(rootDir,"package.json"),"utf8")).version||""}catch(e){return""}},walkGlobals=async dir=>{const entries=await readdir(dir,{withFileTypes:!0}),results=[];for(const entry of entries){const full=path.join(dir,entry.name);entry.isDirectory()?results.push(...await walkGlobals(full)):entry.name.endsWith(".global.html")&&results.push(full)}return results},loadGlobalContent=async rootDir=>{const files=await walkGlobals(rootDir),maps=await Promise.all(files.map(async f=>extractContentBlocks(await readFile(f,"utf8"))));return mergeContentBlocks(...maps)},renderPage=async(pageFilePath,rootDir,globals={},state={},maxDepth=10,preloadedGlobalContent=null)=>{const pageContent=await readFile(pageFilePath,"utf8"),pageTagMatch=pageContent.match(/^[\s\S]*?<page\s([^>]*)>/);if(!pageTagMatch)throw new Error(`Invalid page file: missing <page> root element in ${pageFilePath}`);const pageAttrs=extractAttrs(pageTagMatch[1]),templateName=pageAttrs.template||"default";delete pageAttrs.template;const pageDir=path.dirname(pageFilePath),templateFile=findFileUpSync(`${templateName}.template.html`,pageDir,rootDir);if(!templateFile)throw new Error(`Template not found: ${templateName}.template.html (searched from ${pageDir} to ${rootDir})`);const globalContent=preloadedGlobalContent??await loadGlobalContent(rootDir),rawPageBlocks=extractContentBlocks(pageContent),pageBlocks={};for(const[name,entries]of Object.entries(rawPageBlocks))pageBlocks[name]=entries.map(e=>({...e,html:replaceLocations(e.html,globalContent)}));const contentBlocks=mergeContentBlocks(pageBlocks,globalContent);let templateHtml=readFileSync(templateFile,"utf8");templateHtml=resolveFragmentTags(templateHtml,name=>{const filePath=findFileUpSync(name+".fragment.html",pageDir,rootDir);return filePath?readFileSync(filePath,"utf8"):null},0,maxDepth),templateHtml=replaceLocations(templateHtml,contentBlocks);const rel=path.relative(rootDir,path.dirname(pageFilePath)),depth=rel?rel.split(path.sep).length:0,now=new Date,vars={pathToRoot:depth>0?"../".repeat(depth):"./",year:String(now.getFullYear()),date:now.toISOString().slice(0,10),datetime:now.toISOString(),timestamp:String(Date.now()),version:loadVersion(rootDir),env:process.env.NODE_ENV||"",...globals,...state,...pageAttrs};for(const[key,val]of Object.entries(vars))"function"==typeof val&&(vars[key]=val());return templateHtml=resolveIfs(templateHtml,vars),templateHtml=resolveForeach(templateHtml,vars),templateHtml=resolveVars(templateHtml,vars),templateHtml},walkPages=async dir=>{const entries=await readdir(dir,{withFileTypes:!0}),results=[];for(const entry of entries){const full=path.join(dir,entry.name);entry.isDirectory()?results.push(...await walkPages(full)):entry.name.endsWith(".page.html")&&results.push(full)}return results},renderDir=async(inputDir,outputDir,globals={},state={},maxDepth=10)=>{const[pages,globalContent]=await Promise.all([walkPages(inputDir),loadGlobalContent(inputDir)]);let count=0;for(const page of pages){const outRel=path.relative(inputDir,page).replace(/\.page\.html$/,".html"),outPath=path.join(outputDir,outRel);await mkdir(path.dirname(outPath),{recursive:!0});const html=await renderPage(page,inputDir,globals,state,maxDepth,globalContent);await writeFile(outPath,html,"utf8"),count++}return count};export{renderPage,renderDir};
+import{readFile,writeFile,mkdir,readdir}from"fs/promises";import path from"path";import{extractAttrs,extractContentBlocks,mergeContentBlocks,replaceLocations,resolveVars,resolveIfs,resolveForeach,resolveFragmentTags}from"./parse.js";import{readFileSync,statSync}from"fs";const findFileUpSync=(filename,startDir,rootDir)=>{let dir=startDir;const root=path.resolve(rootDir);for(;;){const candidate=path.join(dir,filename);try{return statSync(candidate),candidate}catch(e){}if(path.resolve(dir)===root)return null;const parent=path.dirname(dir);if(parent===dir)return null;dir=parent}},loadVersion=rootDir=>{try{return JSON.parse(readFileSync(path.join(rootDir,"package.json"),"utf8")).version||""}catch(e){return""}},walkGlobals=async dir=>{const entries=await readdir(dir,{withFileTypes:!0}),results=[];for(const entry of entries){const full=path.join(dir,entry.name);entry.isDirectory()?results.push(...await walkGlobals(full)):entry.name.endsWith(".global.html")&&results.push(full)}return results},loadGlobalContent=async rootDir=>{const files=await walkGlobals(rootDir),maps=await Promise.all(files.map(async f=>extractContentBlocks(await readFile(f,"utf8"))));return mergeContentBlocks(...maps)},renderPage=async(pageFilePath,rootDir,globals={},state={},maxDepth=10,preloadedGlobalContent=null)=>{const pageContent=await readFile(pageFilePath,"utf8"),pageTagMatch=pageContent.match(/^[\s\S]*?<page((?:[^>"']|"[^"]*"|'[^']*')*)>/);if(!pageTagMatch)throw new Error(`Invalid page file: missing <page> root element in ${pageFilePath}`);const pageAttrs=extractAttrs(pageTagMatch[1]),templateName=pageAttrs.template||"default";delete pageAttrs.template;const pageDir=path.dirname(pageFilePath),templateFile=findFileUpSync(`${templateName}.template.html`,pageDir,rootDir);if(!templateFile)throw new Error(`Template not found: ${templateName}.template.html (searched from ${pageDir} to ${rootDir})`);const globalContent=preloadedGlobalContent??await loadGlobalContent(rootDir),rawPageBlocks=extractContentBlocks(pageContent),pageBlocks={};for(const[name,entries]of Object.entries(rawPageBlocks))pageBlocks[name]=entries.map(e=>({...e,html:replaceLocations(e.html,globalContent)}));const contentBlocks=mergeContentBlocks(pageBlocks,globalContent);let templateHtml=readFileSync(templateFile,"utf8");templateHtml=resolveFragmentTags(templateHtml,name=>{const filePath=findFileUpSync(name+".fragment.html",pageDir,rootDir);return filePath?readFileSync(filePath,"utf8"):null},0,maxDepth),templateHtml=replaceLocations(templateHtml,contentBlocks);const rel=path.relative(rootDir,path.dirname(pageFilePath)),depth=rel?rel.split(path.sep).length:0,now=new Date,vars={pathToRoot:depth>0?"../".repeat(depth):"./",year:String(now.getFullYear()),date:now.toISOString().slice(0,10),datetime:now.toISOString(),timestamp:String(Date.now()),version:loadVersion(rootDir),env:process.env.NODE_ENV||"",...globals,...state,...pageAttrs};for(const[key,val]of Object.entries(vars))"function"==typeof val&&(vars[key]=val());return templateHtml=resolveIfs(templateHtml,vars),templateHtml=resolveForeach(templateHtml,vars),templateHtml=resolveVars(templateHtml,vars),templateHtml},walkPages=async dir=>{const entries=await readdir(dir,{withFileTypes:!0}),results=[];for(const entry of entries){const full=path.join(dir,entry.name);entry.isDirectory()?results.push(...await walkPages(full)):entry.name.endsWith(".page.html")&&results.push(full)}return results},renderDir=async(inputDir,outputDir,globals={},state={},maxDepth=10)=>{const[pages,globalContent]=await Promise.all([walkPages(inputDir),loadGlobalContent(inputDir)]);let count=0;for(const page of pages){const outRel=path.relative(inputDir,page).replace(/\.page\.html$/,".html"),outPath=path.join(outputDir,outRel);await mkdir(path.dirname(outPath),{recursive:!0});const html=await renderPage(page,inputDir,globals,state,maxDepth,globalContent);await writeFile(outPath,html,"utf8"),count++}return count};export{renderPage,renderDir};

package/dist/templating/parse.js

@@ -1 +1 @@
-const extractAttrs=tagString=>{const attrs={},re=/(\w[\w-]*)=(?:"([^"]*)"|'([^']*)')/g;let match;for(;null!==(match=re.exec(tagString));)attrs[match[1]]=match[2]??match[3];return attrs},extractContentBlocks=xml=>{const blocks={},re=/<content(?:\s+([^>]*))?\s*>([\s\S]*?)<\/content>/g;let match;for(;null!==(match=re.exec(xml));){const attrs=extractAttrs(match[1]||""),name=attrs.location||"default",priority=parseInt(attrs.priority||"0",10);blocks[name]||(blocks[name]=[]),blocks[name].push({html:match[2],priority:priority})}return blocks},mergeContentBlocks=(...maps)=>{const merged={};for(const map of maps)for(const[name,entries]of Object.entries(map))merged[name]||(merged[name]=[]),merged[name].push(...entries);return merged},resolveLocation=entries=>entries?.length?[...entries].sort((a,b)=>b.priority-a.priority).map(e=>e.html).join(""):null,replaceLocations=(html,contentMap)=>html.replace(/<location(?:\s+name="([^"]*)")?>([\s\S]*?)<\/location>/g,(_,name,fallback)=>resolveLocation(contentMap[name||"default"])??fallback).replace(/<location(?:\s+name="([^"]*)")?\s*\/>/g,(_,name)=>resolveLocation(contentMap[name||"default"])??""),stripFragmentWrapper=xml=>{const match=xml.match(/^\s*<fragment\b[^>]*>([\s\S]*)<\/fragment>\s*$/);return match?match[1]:xml},resolvePath=(obj,dotPath)=>dotPath.split(".").reduce((cur,key)=>cur?.[key],obj),resolveVars=(html,vars)=>html.replace(/\{\{([^}]+)\}\}/g,(_,key)=>{const trimmed=key.trim(),val=resolvePath(vars,trimmed);return"function"==typeof val?val():val??""}),resolveIfs=(html,vars)=>{const re=/<if\s+condition="([^"]+)">([\s\S]*?)<\/if>/g;let prev,result=html;do{prev=result,result=result.replace(re,(_,condition,inner)=>evalCondition(condition,vars)?inner:"")}while(result!==prev);return result},resolveForeach=(html,vars)=>{const re=/<foreach\s+in="([^"]+)"\s+as="([^"]+)">([\s\S]*?)<\/foreach>/g;let prev,result=html;do{prev=result,result=result.replace(re,(_,inAttr,asAttr,inner)=>{const arr=resolvePath(vars,inAttr.trim());return Array.isArray(arr)?arr.map(item=>{const scopedVars={...vars,[asAttr]:item};return resolveVars(inner,scopedVars)}).join(""):""})}while(result!==prev);return result},resolveFragmentTags=(html,findFragmentFile,depth,maxDepth)=>{if(depth>maxDepth)throw new Error(`Fragment depth exceeded maximum of ${maxDepth}`);return html.replace(/<fragment\s+name="([^"]+)"(?:\s*\/>|>([\s\S]*?)<\/fragment>)/g,(_,name,fallback)=>{const content=findFragmentFile(name);if(null===content)return fallback??"";const stripped=stripFragmentWrapper(content);return resolveFragmentTags(stripped,findFragmentFile,depth+1,maxDepth)})},TOKEN_TYPES_NUMBER="NUMBER",TOKEN_TYPES_STRING="STRING",TOKEN_TYPES_BOOLEAN="BOOLEAN",TOKEN_TYPES_IDENTIFIER="IDENTIFIER",TOKEN_TYPES_OPERATOR="OPERATOR",TOKEN_TYPES_NOT="NOT",TOKEN_TYPES_LPAREN="LPAREN",TOKEN_TYPES_RPAREN="RPAREN",evalCondition=(expression,vars)=>!!((tokens,vars)=>{let pos=0;const peek=()=>tokens[pos],advance=()=>tokens[pos++],parsePrimary=()=>{const tok=peek();if(!tok)throw new Error("Unexpected end of expression");if(tok.type===TOKEN_TYPES_NOT)return advance(),!parsePrimary();if(tok.type===TOKEN_TYPES_LPAREN){advance();const val=parseOr();if(!peek()||peek().type!==TOKEN_TYPES_RPAREN)throw new Error("Missing closing parenthesis");return advance(),val}if(tok.type===TOKEN_TYPES_NUMBER||tok.type===TOKEN_TYPES_STRING||tok.type===TOKEN_TYPES_BOOLEAN)return advance(),tok.value;if(tok.type===TOKEN_TYPES_IDENTIFIER)return advance(),resolvePath(vars,tok.value);throw new Error(`Unexpected token: ${JSON.stringify(tok)}`)},parseComparison=()=>{let left=parsePrimary();for(;peek()&&peek().type===TOKEN_TYPES_OPERATOR&&["===","!==",">","<",">=","<="].includes(peek().value);){const op=advance().value,right=parsePrimary();switch(op){case"===":left=left===right;break;case"!==":left=left!==right;break;case">":left=left>right;break;case"<":left=left<right;break;case">=":left=left>=right;break;case"<=":left=left<=right}}return left},parseAnd=()=>{let left=parseComparison();for(;peek()&&peek().type===TOKEN_TYPES_OPERATOR&&"&&"===peek().value;){advance();const right=parseComparison();left=left&&right}return left},parseOr=()=>{let left=parseAnd();for(;peek()&&peek().type===TOKEN_TYPES_OPERATOR&&"||"===peek().value;){advance();const right=parseAnd();left=left||right}return left},result=parseOr();if(pos<tokens.length)throw new Error(`Unexpected token after expression: ${JSON.stringify(tokens[pos])}`);return result})((expr=>{const tokens=[];let i=0;for(;i<expr.length;){if(/\s/.test(expr[i])){i++;continue}if("("===expr[i]){tokens.push({type:TOKEN_TYPES_LPAREN}),i++;continue}if(")"===expr[i]){tokens.push({type:TOKEN_TYPES_RPAREN}),i++;continue}if("!"===expr[i]&&"="!==expr[i+1]){tokens.push({type:TOKEN_TYPES_NOT}),i++;continue}const opMatch=expr.slice(i).match(/^(===|!==|>=|<=|&&|\|\||>|<)/);if(opMatch){tokens.push({type:TOKEN_TYPES_OPERATOR,value:opMatch[1]}),i+=opMatch[1].length;continue}if('"'===expr[i]||"'"===expr[i]){const quote=expr[i];let str="";for(i++;i<expr.length&&expr[i]!==quote;)str+=expr[i],i++;if(i>=expr.length)throw new Error(`Unterminated string in condition: ${expr}`);i++,tokens.push({type:TOKEN_TYPES_STRING,value:str});continue}const numMatch=expr.slice(i).match(/^(\d+(\.\d+)?)/);if(numMatch){tokens.push({type:TOKEN_TYPES_NUMBER,value:Number(numMatch[1])}),i+=numMatch[1].length;continue}const idMatch=expr.slice(i).match(/^([a-zA-Z_$][\w$.]*)/);if(idMatch){const id=idMatch[1];"true"===id||"false"===id?tokens.push({type:TOKEN_TYPES_BOOLEAN,value:"true"===id}):tokens.push({type:TOKEN_TYPES_IDENTIFIER,value:id}),i+=id.length;continue}throw new Error(`Unexpected character '${expr[i]}' in condition: ${expr}`)}return tokens})(expression),vars);export{extractAttrs,extractContentBlocks,mergeContentBlocks,replaceLocations,stripFragmentWrapper,resolveVars,resolveIfs,resolveForeach,resolveFragmentTags,evalCondition,resolvePath};
+const extractAttrs=tagString=>{const attrs={},re=/(\w[\w-]*)=(?:"([^"]*)"|'([^']*)')/g;let match;for(;null!==(match=re.exec(tagString));)attrs[match[1]]=match[2]??match[3];return attrs},extractContentBlocks=xml=>{const blocks={},re=/<content((?:[^>"']|"[^"]*"|'[^']*')*)>([\s\S]*?)<\/content>/g;let match;for(;null!==(match=re.exec(xml));){const attrs=extractAttrs(match[1]||""),name=attrs.location||"default",priority=parseInt(attrs.priority||"0",10);blocks[name]||(blocks[name]=[]),blocks[name].push({html:match[2],priority:priority})}return blocks},mergeContentBlocks=(...maps)=>{const merged={};for(const map of maps)for(const[name,entries]of Object.entries(map))merged[name]||(merged[name]=[]),merged[name].push(...entries);return merged},replaceLocations=(html,contentMap)=>html.replace(/<location((?:[^>"']|"[^"]*"|'[^']*')*?)(?:\s*\/>|>([\s\S]*?)<\/location>)/g,(_,attrStr,fallback)=>{return entries=contentMap[extractAttrs(attrStr).name||"default"],(entries?.length?[...entries].sort((a,b)=>b.priority-a.priority).map(e=>e.html).join(""):null)??fallback??"";var entries}),stripFragmentWrapper=xml=>{const match=xml.match(/^\s*<fragment(?:[^>"']|"[^"]*"|'[^']*')*>([\s\S]*)<\/fragment>\s*$/);return match?match[1]:xml},resolvePath=(obj,dotPath)=>dotPath.split(".").reduce((cur,key)=>cur?.[key],obj),resolveVars=(html,vars)=>html.replace(/\{\{([^}]+)\}\}/g,(_,key)=>{const trimmed=key.trim(),val=resolvePath(vars,trimmed);return"function"==typeof val?val():val??""}),resolveIfs=(html,vars)=>{const re=/<if((?:[^>"']|"[^"]*"|'[^']*')*)>([\s\S]*?)<\/if>/g;let prev,result=html;do{prev=result,result=result.replace(re,(_,attrStr,inner)=>evalCondition(extractAttrs(attrStr).condition||"",vars)?inner:"")}while(result!==prev);return result},resolveForeach=(html,vars)=>{const re=/<foreach((?:[^>"']|"[^"]*"|'[^']*')*)>([\s\S]*?)<\/foreach>/g;let prev,result=html;do{prev=result,result=result.replace(re,(_,attrStr,inner)=>{const attrs=extractAttrs(attrStr),arr=resolvePath(vars,(attrs.in||"").trim());return Array.isArray(arr)?arr.map(item=>{const scopedVars={...vars,[attrs.as]:item};return resolveVars(inner,scopedVars)}).join(""):""})}while(result!==prev);return result},resolveFragmentTags=(html,findFragmentFile,depth,maxDepth)=>{if(depth>maxDepth)throw new Error(`Fragment depth exceeded maximum of ${maxDepth}`);return html.replace(/<fragment((?:[^>"']|"[^"]*"|'[^']*')*?)(?:\s*\/>|>([\s\S]*?)<\/fragment>)/g,(_,attrStr,fallback)=>{const name=extractAttrs(attrStr||"").name,content=findFragmentFile(name);if(null===content)return fallback??"";const stripped=stripFragmentWrapper(content);return resolveFragmentTags(stripped,findFragmentFile,depth+1,maxDepth)})},TOKEN_TYPES_NUMBER="NUMBER",TOKEN_TYPES_STRING="STRING",TOKEN_TYPES_BOOLEAN="BOOLEAN",TOKEN_TYPES_IDENTIFIER="IDENTIFIER",TOKEN_TYPES_OPERATOR="OPERATOR",TOKEN_TYPES_NOT="NOT",TOKEN_TYPES_LPAREN="LPAREN",TOKEN_TYPES_RPAREN="RPAREN",evalCondition=(expression,vars)=>!!((tokens,vars)=>{let pos=0;const peek=()=>tokens[pos],advance=()=>tokens[pos++],parsePrimary=()=>{const tok=peek();if(!tok)throw new Error("Unexpected end of expression");if(tok.type===TOKEN_TYPES_NOT)return advance(),!parsePrimary();if(tok.type===TOKEN_TYPES_LPAREN){advance();const val=parseOr();if(!peek()||peek().type!==TOKEN_TYPES_RPAREN)throw new Error("Missing closing parenthesis");return advance(),val}if(tok.type===TOKEN_TYPES_NUMBER||tok.type===TOKEN_TYPES_STRING||tok.type===TOKEN_TYPES_BOOLEAN)return advance(),tok.value;if(tok.type===TOKEN_TYPES_IDENTIFIER)return advance(),resolvePath(vars,tok.value);throw new Error(`Unexpected token: ${JSON.stringify(tok)}`)},parseComparison=()=>{let left=parsePrimary();for(;peek()&&peek().type===TOKEN_TYPES_OPERATOR&&["===","!==",">","<",">=","<="].includes(peek().value);){const op=advance().value,right=parsePrimary();switch(op){case"===":left=left===right;break;case"!==":left=left!==right;break;case">":left=left>right;break;case"<":left=left<right;break;case">=":left=left>=right;break;case"<=":left=left<=right}}return left},parseAnd=()=>{let left=parseComparison();for(;peek()&&peek().type===TOKEN_TYPES_OPERATOR&&"&&"===peek().value;){advance();const right=parseComparison();left=left&&right}return left},parseOr=()=>{let left=parseAnd();for(;peek()&&peek().type===TOKEN_TYPES_OPERATOR&&"||"===peek().value;){advance();const right=parseAnd();left=left||right}return left},result=parseOr();if(pos<tokens.length)throw new Error(`Unexpected token after expression: ${JSON.stringify(tokens[pos])}`);return result})((expr=>{const tokens=[];let i=0;for(;i<expr.length;){if(/\s/.test(expr[i])){i++;continue}if("("===expr[i]){tokens.push({type:TOKEN_TYPES_LPAREN}),i++;continue}if(")"===expr[i]){tokens.push({type:TOKEN_TYPES_RPAREN}),i++;continue}if("!"===expr[i]&&"="!==expr[i+1]){tokens.push({type:TOKEN_TYPES_NOT}),i++;continue}const opMatch=expr.slice(i).match(/^(===|!==|>=|<=|&&|\|\||>|<)/);if(opMatch){tokens.push({type:TOKEN_TYPES_OPERATOR,value:opMatch[1]}),i+=opMatch[1].length;continue}if('"'===expr[i]||"'"===expr[i]){const quote=expr[i];let str="";for(i++;i<expr.length&&expr[i]!==quote;)str+=expr[i],i++;if(i>=expr.length)throw new Error(`Unterminated string in condition: ${expr}`);i++,tokens.push({type:TOKEN_TYPES_STRING,value:str});continue}const numMatch=expr.slice(i).match(/^(\d+(\.\d+)?)/);if(numMatch){tokens.push({type:TOKEN_TYPES_NUMBER,value:Number(numMatch[1])}),i+=numMatch[1].length;continue}const idMatch=expr.slice(i).match(/^([a-zA-Z_$][\w$.]*)/);if(idMatch){const id=idMatch[1];"true"===id||"false"===id?tokens.push({type:TOKEN_TYPES_BOOLEAN,value:"true"===id}):tokens.push({type:TOKEN_TYPES_IDENTIFIER,value:id}),i+=id.length;continue}throw new Error(`Unexpected character '${expr[i]}' in condition: ${expr}`)}return tokens})(expression),vars);export{extractAttrs,extractContentBlocks,mergeContentBlocks,replaceLocations,stripFragmentWrapper,resolveVars,resolveIfs,resolveForeach,resolveFragmentTags,evalCondition,resolvePath};

package/docs/caching.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -323,7 +323,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/cli-utils.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -172,7 +172,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/configuration.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -413,7 +413,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/examples.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -293,7 +293,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/fs-utils.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -203,7 +203,7 @@ async function backupProject() {
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/getting-started.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -164,7 +164,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/index.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -181,7 +181,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 		<script type="module">

package/docs/middleware.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -234,7 +234,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/request-response.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -199,7 +199,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/routing.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -174,7 +174,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
 </body>

package/docs/templating.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -73,11 +73,11 @@
 
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');
@@ -102,28 +102,33 @@
 		
 		<p>Kempo Server includes a built-in XML-based templating system for building static sites with shared layouts, reusable fragments, and dynamic content. Pages can be pre-rendered at build time or server-side rendered on each request.</p>
 
-		<nav class="b r mb p">
-			<h4 class="mt0">On This Page</h4>
-			<ul>
-				<li><a href="#overview">Overview</a></li>
-				<li><a href="#file-types">File Types</a></li>
-				<li><a href="#templates">Templates</a></li>
-				<li><a href="#pages">Pages</a>
-					<ul>
-						<li><a href="#frontmatter">Frontmatter</a></li>
-					</ul>
-				</li>
-				<li><a href="#fragments">Fragments</a></li>
-				<li><a href="#global-files">Global Files</a></li>
-				<li><a href="#fragments-vs-globals">Fragments vs. Global Files</a></li>
-				<li><a href="#variables">Variables</a></li>
-				<li><a href="#conditionals">Conditionals</a></li>
-				<li><a href="#loops">Loops</a></li>
-				<li><a href="#rendering">Rendering</a></li>
-				<li><a href="#ssr">Server-Side Rendering</a></li>
-				<li><a href="#configuration">Configuration</a></li>
-			</ul>
-		</nav>
+		<k-accordion persistent-id="templating-toc" class="mb">
+			<k-accordion-header for-panel="toc">Table of Contents</k-accordion-header>
+			<k-accordion-panel name="toc">
+				<ul class="m">
+					<li><a href="#overview">Overview</a></li>
+					<li><a href="#templates">Templates</a></li>
+					<li><a href="#pages">Pages</a>
+						<ul>
+							<li><a href="#frontmatter">Frontmatter</a></li>
+						</ul>
+					</li>
+					<li><a href="#fragments">Fragments</a></li>
+					<li><a href="#global-files">Global Files</a></li>
+					<li><a href="#fragments-vs-globals">Fragments vs. Global Files</a></li>
+					<li><a href="#template-syntax">Template Syntax</a>
+						<ul>
+							<li><a href="#variables">Variables</a></li>
+							<li><a href="#conditionals">Conditionals</a></li>
+							<li><a href="#loops">Loops</a></li>
+						</ul>
+					</li>
+					<li><a href="#rendering">Rendering</a></li>
+					<li><a href="#ssr">Server-Side Rendering</a></li>
+					<li><a href="#configuration">Configuration</a></li>
+				</ul>
+			</k-accordion-panel>
+		</k-accordion>
 
 		<h2 id="overview">Overview</h2>
 		<p>The templating system uses four file types that work together:</p>
@@ -133,12 +138,23 @@
 			<li><strong>Fragments</strong> (<code>*.fragment.html</code>) &mdash; Reusable HTML partials included in templates or other fragments</li>
 			<li><strong>Globals</strong> (<code>*.global.html</code>) &mdash; Site-wide content blocks automatically injected into every page render</li>
 		</ul>
-		<p>All three file types are blocked from being served directly by the default <code>disallowedRegex</code> configuration.</p>
-
-		<h2 id="file-types">File Types</h2>
 		<p>A typical project structure:</p>
 		<pre><code class="hljs markdown">my-site/<br />├─ default.template.html    # Shared layout<br />├─ nav.fragment.html        # Reusable navigation<br />├─ footer.fragment.html     # Reusable footer<br />├─ analytics.global.html    # Site-wide scripts injected into every page<br />├─ index.page.html          # Homepage → renders to index.html<br />├─ about.page.html          # About → renders to about.html<br />├─ blog/<br />│  ├─ index.page.html       # Blog index → blog/index.html<br />│  ├─ post-1.page.html      # Blog post → blog/post-1.html<br /></code></pre>
-		<p>Templates and fragments are resolved by walking up the directory tree from the page file to the root, so subdirectories can override them by providing their own versions.</p>
+		<p>All four file types are blocked from being served directly by the default <code>disallowedRegex</code> configuration. Each type is located differently at startup:</p>
+		<div class="table-wrapper mb">
+		<table>
+			<thead>
+				<tr><th>File Type</th><th>How It Is Found</th></tr>
+			</thead>
+			<tbody>
+				<tr><td><code>*.page.html</code></td><td>Recursive scan of the entire root directory tree &mdash; pages in any subdirectory are discovered automatically.</td></tr>
+				<tr><td><code>*.global.html</code></td><td>Recursive scan of the entire root directory tree &mdash; globals in any subdirectory are merged together automatically.</td></tr>
+				<tr><td><code>*.template.html</code></td><td>Walks <strong>up</strong> the directory tree from the page file&rsquo;s directory toward the root. The nearest match wins. A subdirectory template overrides the root one for pages below it.</td></tr>
+				<tr><td><code>*.fragment.html</code></td><td>Same up-walk as templates &mdash; starts at the including file&rsquo;s directory and searches each ancestor up to the root. Nearest match wins.</td></tr>
+			</tbody>
+		</table>
+		</div>
+		<p>Because pages and globals use a downward recursive scan, you can freely organize them into subdirectories and they will still be found. Templates and fragments use an upward walk, so they must live in the same directory as the files that reference them, or in a parent directory. Placing a template or fragment in a sibling or cousin directory will not be found.</p>
 
 		<h2 id="templates">Templates</h2>
 		<p>A template defines the shared HTML structure for your pages. Use <code>&lt;location&gt;</code> tags to define named content slots that pages will fill.</p>
@@ -169,13 +185,15 @@
   description: Overview of the routing system
 --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">page</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Routing"</span>&gt;</span><br />  ...<br /><span class="hljs-tag">&lt;/<span class="hljs-name">page</span>&gt;</span></code></pre>
 		<p>The comment is purely for the author &mdash; nothing before <code>&lt;page&gt;</code> is parsed or rendered.</p>
+
+		<h2 id="fragments">Fragments</h2>
 		<p>Fragments are reusable HTML partials. Include them in templates or other fragments using the <code>&lt;fragment&gt;</code> tag.</p>
 		<pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- nav.fragment.html --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">fragment</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"./"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"./about.html"</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">fragment</span>&gt;</span></code></pre>
 		<p>Include it in a template:</p>
 		<pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Self-closing: renders empty if fragment file not found --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">fragment</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"nav"</span> /&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- With fallback content if fragment file not found --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">fragment</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"nav"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span>Fallback Nav<span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">fragment</span>&gt;</span></code></pre>
 		<p>Fragments can include other fragments. The maximum nesting depth is controlled by <code>maxFragmentDepth</code> (default: 10).</p>
 
-		<h3>File Resolution</h3>
+		<h3>Directory Overrides</h3>
 		<p>When a page references a template or a template includes a fragment, the system searches for the file starting in the page's directory and walking up to the root. This means:</p>
 		<ul>
 			<li>Templates and fragments placed at the root apply to all pages</li>
@@ -215,10 +233,13 @@
 		</table>
 		</div>
 
-		<h2 id="variables">Variables</h2>
+		<h2 id="template-syntax">Template Syntax</h2>
+		<p>Use these tags and expressions inside templates, fragments, and pages to produce dynamic output.</p>
+
+		<h3 id="variables">Variables</h3>
 		<p>Use <code>&#123;&#123;variableName&#125;&#125;</code> syntax to insert dynamic values into templates and fragments.</p>
 
-		<h3>Built-in Variables</h3>
+		<h4>Built-in Variables</h4>
 		<div class="table-wrapper mb">
 		<table>
 			<thead>
@@ -239,24 +260,24 @@
 		</table>
 		</div>
 
-		<h3>Page Attributes as Variables</h3>
+		<h4>Page Attributes as Variables</h4>
 		<p>Any attribute on the <code>&lt;page&gt;</code> tag is available as a variable in the template:</p>
 		<pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- page file --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">page</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"My Page"</span> <span class="hljs-attr">author</span>=<span class="hljs-string">"Dustin"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">page</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- template file --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>&#123;&#123;title&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"&#123;&#123;author&#125;&#125;"</span> /&gt;</span></code></pre>
 
-		<h3>Globals and State</h3>
+		<h4>Globals and State</h4>
 		<p>Additional variables can be provided through the <code>globals</code> and <code>state</code> configuration objects. Globals and state are merged with page attributes, with page attributes taking priority.</p>
 		<pre><code class="hljs javascript"><span class="hljs-comment">// .config.js</span><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {<br />  <span class="hljs-attr">templating</span>: {<br />    <span class="hljs-attr">globals</span>: {<br />      <span class="hljs-attr">siteName</span>: <span class="hljs-string">'My Site'</span>,<br />      <span class="hljs-attr">copyright</span>: <span class="hljs-string">'© 2026 My Company'</span><br />    },<br />    <span class="hljs-attr">state</span>: {<br />      <span class="hljs-attr">buildId</span>: () =&gt; <span class="hljs-built_in">Date</span>.now().toString(<span class="hljs-number">36</span>)<br />    }<br />  }<br />};</code></pre>
 		<p>Function values in globals or state are called at render time, allowing dynamic values.</p>
 
-		<h3>Dot-Path Access</h3>
+		<h4>Dot-Path Access</h4>
 		<p>Variables support dot notation for nested object access:</p>
 		<pre><code class="hljs xml">&#123;&#123;site.name&#125;&#125;<br />&#123;&#123;author.email&#125;&#125;</code></pre>
 
-		<h2 id="conditionals">Conditionals</h2>
+		<h3 id="conditionals">Conditionals</h3>
 		<p>Use <code>&lt;if&gt;</code> blocks to conditionally include content based on variable values.</p>
 		<pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"showBanner"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"banner"</span>&gt;</span>Welcome!<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span></code></pre>
 
-		<h3>Supported Operators</h3>
+		<h4>Supported Operators</h4>
 		<p>Conditions support a full expression syntax:</p>
 		<div class="table-wrapper mb">
 		<table>
@@ -278,10 +299,10 @@
 		</table>
 		</div>
 
-		<h3>Examples</h3>
+		<h4>Examples</h4>
 		<pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Truthy check --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"isLoggedIn"</span>&gt;</span>Welcome back!<span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Negation --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"!isLoggedIn"</span>&gt;</span>Please log in.<span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- String comparison --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"env === 'production'"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"analytics.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Compound conditions --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"isAdmin &amp;&amp; hasPermission"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/admin"</span>&gt;</span>Admin Panel<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span></code></pre>
 
-		<h2 id="loops">Loops</h2>
+		<h3 id="loops">Loops</h3>
 		<p>Use <code>&lt;foreach&gt;</code> blocks to iterate over arrays.</p>
 		<pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">foreach</span> <span class="hljs-attr">in</span>=<span class="hljs-string">"navLinks"</span> <span class="hljs-attr">as</span>=<span class="hljs-string">"link"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"&#123;&#123;link.url&#125;&#125;"</span>&gt;</span>&#123;&#123;link.label&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">foreach</span>&gt;</span></code></pre>
 		<p>The <code>in</code> attribute references an array variable and <code>as</code> names the loop variable. The loop variable supports dot-path access for object items.</p>
@@ -342,8 +363,10 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	
+		<script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Accordion.js" type="module"></script>
+	
 </body>
 </html>

package/docs-src/default.template.html

@@ -17,7 +17,7 @@
 	<link rel="stylesheet" href="./theme.css" />
 	<script>
 		window.litDisableBundleWarning = true;
-		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/icons/'] };
+		window.kempo = { pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons/'] };
 	</script>
 </head>
 <body>
@@ -29,7 +29,7 @@
 	<div style="height:25vh"></div>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.42/dist/components/Import.js"
+		src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Import.js"
 	></script>
 	<location name="scripts"></location>
 </body>

package/docs-src/nav.fragment.html

@@ -35,11 +35,11 @@
       <location name="links" />
     </menu>
   </k-aside>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Aside.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Main.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Nav.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/Icon.js" type="module"></script>
-  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3.5/src/components/ThemeSwitcher.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
   <script>
     document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
       await window.customElements.whenDefined('k-aside');

package/docs-src/templating.page.html

@@ -2,28 +2,33 @@
 	<content>
 		<p>Kempo Server includes a built-in XML-based templating system for building static sites with shared layouts, reusable fragments, and dynamic content. Pages can be pre-rendered at build time or server-side rendered on each request.</p>
 
-		<nav class="b r mb p">
-			<h4 class="mt0">On This Page</h4>
-			<ul>
-				<li><a href="#overview">Overview</a></li>
-				<li><a href="#file-types">File Types</a></li>
-				<li><a href="#templates">Templates</a></li>
-				<li><a href="#pages">Pages</a>
-					<ul>
-						<li><a href="#frontmatter">Frontmatter</a></li>
-					</ul>
-				</li>
-				<li><a href="#fragments">Fragments</a></li>
-				<li><a href="#global-files">Global Files</a></li>
-				<li><a href="#fragments-vs-globals">Fragments vs. Global Files</a></li>
-				<li><a href="#variables">Variables</a></li>
-				<li><a href="#conditionals">Conditionals</a></li>
-				<li><a href="#loops">Loops</a></li>
-				<li><a href="#rendering">Rendering</a></li>
-				<li><a href="#ssr">Server-Side Rendering</a></li>
-				<li><a href="#configuration">Configuration</a></li>
-			</ul>
-		</nav>
+		<k-accordion persistent-id="templating-toc" class="mb">
+			<k-accordion-header for-panel="toc">Table of Contents</k-accordion-header>
+			<k-accordion-panel name="toc">
+				<ul class="m">
+					<li><a href="#overview">Overview</a></li>
+					<li><a href="#templates">Templates</a></li>
+					<li><a href="#pages">Pages</a>
+						<ul>
+							<li><a href="#frontmatter">Frontmatter</a></li>
+						</ul>
+					</li>
+					<li><a href="#fragments">Fragments</a></li>
+					<li><a href="#global-files">Global Files</a></li>
+					<li><a href="#fragments-vs-globals">Fragments vs. Global Files</a></li>
+					<li><a href="#template-syntax">Template Syntax</a>
+						<ul>
+							<li><a href="#variables">Variables</a></li>
+							<li><a href="#conditionals">Conditionals</a></li>
+							<li><a href="#loops">Loops</a></li>
+						</ul>
+					</li>
+					<li><a href="#rendering">Rendering</a></li>
+					<li><a href="#ssr">Server-Side Rendering</a></li>
+					<li><a href="#configuration">Configuration</a></li>
+				</ul>
+			</k-accordion-panel>
+		</k-accordion>
 
 		<h2 id="overview">Overview</h2>
 		<p>The templating system uses four file types that work together:</p>
@@ -33,12 +38,23 @@
 			<li><strong>Fragments</strong> (<code>*.fragment.html</code>) &mdash; Reusable HTML partials included in templates or other fragments</li>
 			<li><strong>Globals</strong> (<code>*.global.html</code>) &mdash; Site-wide content blocks automatically injected into every page render</li>
 		</ul>
-		<p>All three file types are blocked from being served directly by the default <code>disallowedRegex</code> configuration.</p>
-
-		<h2 id="file-types">File Types</h2>
 		<p>A typical project structure:</p>
 		<pre><code class="hljs markdown">my-site/<br />├─ default.template.html    # Shared layout<br />├─ nav.fragment.html        # Reusable navigation<br />├─ footer.fragment.html     # Reusable footer<br />├─ analytics.global.html    # Site-wide scripts injected into every page<br />├─ index.page.html          # Homepage → renders to index.html<br />├─ about.page.html          # About → renders to about.html<br />├─ blog/<br />│  ├─ index.page.html       # Blog index → blog/index.html<br />│  ├─ post-1.page.html      # Blog post → blog/post-1.html<br /></code></pre>
-		<p>Templates and fragments are resolved by walking up the directory tree from the page file to the root, so subdirectories can override them by providing their own versions.</p>
+		<p>All four file types are blocked from being served directly by the default <code>disallowedRegex</code> configuration. Each type is located differently at startup:</p>
+		<div class="table-wrapper mb">
+		<table>
+			<thead>
+				<tr><th>File Type</th><th>How It Is Found</th></tr>
+			</thead>
+			<tbody>
+				<tr><td><code>*.page.html</code></td><td>Recursive scan of the entire root directory tree &mdash; pages in any subdirectory are discovered automatically.</td></tr>
+				<tr><td><code>*.global.html</code></td><td>Recursive scan of the entire root directory tree &mdash; globals in any subdirectory are merged together automatically.</td></tr>
+				<tr><td><code>*.template.html</code></td><td>Walks <strong>up</strong> the directory tree from the page file&rsquo;s directory toward the root. The nearest match wins. A subdirectory template overrides the root one for pages below it.</td></tr>
+				<tr><td><code>*.fragment.html</code></td><td>Same up-walk as templates &mdash; starts at the including file&rsquo;s directory and searches each ancestor up to the root. Nearest match wins.</td></tr>
+			</tbody>
+		</table>
+		</div>
+		<p>Because pages and globals use a downward recursive scan, you can freely organize them into subdirectories and they will still be found. Templates and fragments use an upward walk, so they must live in the same directory as the files that reference them, or in a parent directory. Placing a template or fragment in a sibling or cousin directory will not be found.</p>
 
 		<h2 id="templates">Templates</h2>
 		<p>A template defines the shared HTML structure for your pages. Use <code>&lt;location&gt;</code> tags to define named content slots that pages will fill.</p>
@@ -69,13 +85,15 @@
   description: Overview of the routing system
 --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">page</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Routing"</span>&gt;</span><br />  ...<br /><span class="hljs-tag">&lt;/<span class="hljs-name">page</span>&gt;</span></code></pre>
 		<p>The comment is purely for the author &mdash; nothing before <code>&lt;page&gt;</code> is parsed or rendered.</p>
+
+		<h2 id="fragments">Fragments</h2>
 		<p>Fragments are reusable HTML partials. Include them in templates or other fragments using the <code>&lt;fragment&gt;</code> tag.</p>
 		<pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- nav.fragment.html --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">fragment</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"./"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"./about.html"</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">fragment</span>&gt;</span></code></pre>
 		<p>Include it in a template:</p>
 		<pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Self-closing: renders empty if fragment file not found --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">fragment</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"nav"</span> /&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- With fallback content if fragment file not found --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">fragment</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"nav"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span>Fallback Nav<span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">fragment</span>&gt;</span></code></pre>
 		<p>Fragments can include other fragments. The maximum nesting depth is controlled by <code>maxFragmentDepth</code> (default: 10).</p>
 
-		<h3>File Resolution</h3>
+		<h3>Directory Overrides</h3>
 		<p>When a page references a template or a template includes a fragment, the system searches for the file starting in the page's directory and walking up to the root. This means:</p>
 		<ul>
 			<li>Templates and fragments placed at the root apply to all pages</li>
@@ -115,10 +133,13 @@
 		</table>
 		</div>
 
-		<h2 id="variables">Variables</h2>
+		<h2 id="template-syntax">Template Syntax</h2>
+		<p>Use these tags and expressions inside templates, fragments, and pages to produce dynamic output.</p>
+
+		<h3 id="variables">Variables</h3>
 		<p>Use <code>&#123;&#123;variableName&#125;&#125;</code> syntax to insert dynamic values into templates and fragments.</p>
 
-		<h3>Built-in Variables</h3>
+		<h4>Built-in Variables</h4>
 		<div class="table-wrapper mb">
 		<table>
 			<thead>
@@ -139,24 +160,24 @@
 		</table>
 		</div>
 
-		<h3>Page Attributes as Variables</h3>
+		<h4>Page Attributes as Variables</h4>
 		<p>Any attribute on the <code>&lt;page&gt;</code> tag is available as a variable in the template:</p>
 		<pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- page file --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">page</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"My Page"</span> <span class="hljs-attr">author</span>=<span class="hljs-string">"Dustin"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">page</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- template file --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>&#123;&#123;title&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"&#123;&#123;author&#125;&#125;"</span> /&gt;</span></code></pre>
 
-		<h3>Globals and State</h3>
+		<h4>Globals and State</h4>
 		<p>Additional variables can be provided through the <code>globals</code> and <code>state</code> configuration objects. Globals and state are merged with page attributes, with page attributes taking priority.</p>
 		<pre><code class="hljs javascript"><span class="hljs-comment">// .config.js</span><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {<br />  <span class="hljs-attr">templating</span>: {<br />    <span class="hljs-attr">globals</span>: {<br />      <span class="hljs-attr">siteName</span>: <span class="hljs-string">'My Site'</span>,<br />      <span class="hljs-attr">copyright</span>: <span class="hljs-string">'© 2026 My Company'</span><br />    },<br />    <span class="hljs-attr">state</span>: {<br />      <span class="hljs-attr">buildId</span>: () =&gt; <span class="hljs-built_in">Date</span>.now().toString(<span class="hljs-number">36</span>)<br />    }<br />  }<br />};</code></pre>
 		<p>Function values in globals or state are called at render time, allowing dynamic values.</p>
 
-		<h3>Dot-Path Access</h3>
+		<h4>Dot-Path Access</h4>
 		<p>Variables support dot notation for nested object access:</p>
 		<pre><code class="hljs xml">&#123;&#123;site.name&#125;&#125;<br />&#123;&#123;author.email&#125;&#125;</code></pre>
 
-		<h2 id="conditionals">Conditionals</h2>
+		<h3 id="conditionals">Conditionals</h3>
 		<p>Use <code>&lt;if&gt;</code> blocks to conditionally include content based on variable values.</p>
 		<pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"showBanner"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"banner"</span>&gt;</span>Welcome!<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span></code></pre>
 
-		<h3>Supported Operators</h3>
+		<h4>Supported Operators</h4>
 		<p>Conditions support a full expression syntax:</p>
 		<div class="table-wrapper mb">
 		<table>
@@ -178,10 +199,10 @@
 		</table>
 		</div>
 
-		<h3>Examples</h3>
+		<h4>Examples</h4>
 		<pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Truthy check --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"isLoggedIn"</span>&gt;</span>Welcome back!<span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Negation --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"!isLoggedIn"</span>&gt;</span>Please log in.<span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- String comparison --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"env === 'production'"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"analytics.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Compound conditions --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">if</span> <span class="hljs-attr">condition</span>=<span class="hljs-string">"isAdmin &amp;&amp; hasPermission"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/admin"</span>&gt;</span>Admin Panel<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">if</span>&gt;</span></code></pre>
 
-		<h2 id="loops">Loops</h2>
+		<h3 id="loops">Loops</h3>
 		<p>Use <code>&lt;foreach&gt;</code> blocks to iterate over arrays.</p>
 		<pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">foreach</span> <span class="hljs-attr">in</span>=<span class="hljs-string">"navLinks"</span> <span class="hljs-attr">as</span>=<span class="hljs-string">"link"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"&#123;&#123;link.url&#125;&#125;"</span>&gt;</span>&#123;&#123;link.label&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">foreach</span>&gt;</span></code></pre>
 		<p>The <code>in</code> attribute references an array variable and <code>as</code> names the loop variable. The loop variable supports dot-path access for object items.</p>
@@ -238,4 +259,7 @@
 		<pre><code class="hljs javascript"><span class="hljs-comment">// dev.config.js — live rendering, no rebuild needed</span><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {<br />  <span class="hljs-attr">templating</span>: { <span class="hljs-attr">ssr</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">ssrPriority</span>: <span class="hljs-literal">true</span> }<br />};<br /><br /><span class="hljs-comment">// prod.config.js — static files only</span><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {<br />  <span class="hljs-attr">templating</span>: { <span class="hljs-attr">ssr</span>: <span class="hljs-literal">false</span> }<br />};</code></pre>
 		<pre><code class="hljs bash"><span class="hljs-comment"># Development</span><br />node dist/index.js -r ./docs/src -c dev.config.js<br /><br /><span class="hljs-comment"># Production (serve pre-rendered output)</span><br />node dist/index.js -r ./docs/dist</code></pre>
 	</content>
+	<content location="scripts">
+		<script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Accordion.js" type="module"></script>
+	</content>
 </page>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kempo-server",
   "type": "module",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "A lightweight, zero-dependency, file based routing server.",
   "exports": {
     "./rescan": "./dist/rescan.js",

package/src/templating/index.js

@@ -67,7 +67,7 @@ const loadGlobalContent = async rootDir => {
 */
 const renderPage = async (pageFilePath, rootDir, globals = {}, state = {}, maxDepth = 10, preloadedGlobalContent = null) => {
   const pageContent = await readFile(pageFilePath, 'utf8');
-  const pageTagMatch = pageContent.match(/^[\s\S]*?<page\s([^>]*)>/);
+  const pageTagMatch = pageContent.match(/^[\s\S]*?<page((?:[^>"']|"[^"]*"|'[^']*')*)>/);
   if(!pageTagMatch) throw new Error(`Invalid page file: missing <page> root element in ${pageFilePath}`);
   const pageAttrs = extractAttrs(pageTagMatch[1]);
   const templateName = pageAttrs.template || 'default';

package/src/templating/parse.js

@@ -16,7 +16,7 @@ const extractAttrs = tagString => {
 */
 const extractContentBlocks = xml => {
   const blocks = {};
-  const re = /<content(?:\s+([^>]*))?\s*>([\s\S]*?)<\/content>/g;
+  const re = /<content((?:[^>"']|"[^"]*"|'[^']*')*)>([\s\S]*?)<\/content>/g;
   let match;
   while((match = re.exec(xml)) !== null){
     const attrs = extractAttrs(match[1] || '');
@@ -51,19 +51,15 @@ const resolveLocation = (entries) => {
 };
 
 const replaceLocations = (html, contentMap) =>
-  html
-    .replace(/<location(?:\s+name="([^"]*)")?>([\s\S]*?)<\/location>/g, (_, name, fallback) =>
-      resolveLocation(contentMap[name || 'default']) ?? fallback
-    )
-    .replace(/<location(?:\s+name="([^"]*)")?\s*\/>/g, (_, name) =>
-      resolveLocation(contentMap[name || 'default']) ?? ''
-    );
+  html.replace(/<location((?:[^>"']|"[^"]*"|'[^']*')*?)(?:\s*\/>|>([\s\S]*?)<\/location>)/g, (_, attrStr, fallback) =>
+    resolveLocation(contentMap[extractAttrs(attrStr).name || 'default']) ?? fallback ?? ''
+  );
 
 /*
   Fragment Wrapper Stripping
 */
 const stripFragmentWrapper = xml => {
-  const match = xml.match(/^\s*<fragment\b[^>]*>([\s\S]*)<\/fragment>\s*$/);
+  const match = xml.match(/^\s*<fragment(?:[^>"']|"[^"]*"|'[^']*')*>([\s\S]*)<\/fragment>\s*$/);
   return match ? match[1] : xml;
 };
 
@@ -88,13 +84,13 @@ const resolveVars = (html, vars) =>
   If-Block Resolution
 */
 const resolveIfs = (html, vars) => {
-  const re = /<if\s+condition="([^"]+)">([\s\S]*?)<\/if>/g;
+  const re = /<if((?:[^>"']|"[^"]*"|'[^']*')*)>([\s\S]*?)<\/if>/g;
   let result = html;
   let prev;
   do {
     prev = result;
-    result = result.replace(re, (_, condition, inner) =>
-      evalCondition(condition, vars) ? inner : ''
+    result = result.replace(re, (_, attrStr, inner) =>
+      evalCondition(extractAttrs(attrStr).condition || '', vars) ? inner : ''
     );
   } while(result !== prev);
   return result;
@@ -104,16 +100,17 @@ const resolveIfs = (html, vars) => {
   Foreach-Block Resolution
 */
 const resolveForeach = (html, vars) => {
-  const re = /<foreach\s+in="([^"]+)"\s+as="([^"]+)">([\s\S]*?)<\/foreach>/g;
+  const re = /<foreach((?:[^>"']|"[^"]*"|'[^']*')*)>([\s\S]*?)<\/foreach>/g;
   let result = html;
   let prev;
   do {
     prev = result;
-    result = result.replace(re, (_, inAttr, asAttr, inner) => {
-      const arr = resolvePath(vars, inAttr.trim());
+    result = result.replace(re, (_, attrStr, inner) => {
+      const attrs = extractAttrs(attrStr);
+      const arr = resolvePath(vars, (attrs['in'] || '').trim());
       if(!Array.isArray(arr)) return '';
       return arr.map(item => {
-        const scopedVars = {...vars, [asAttr]: item};
+        const scopedVars = {...vars, [attrs.as]: item};
         return resolveVars(inner, scopedVars);
       }).join('');
     });
@@ -126,8 +123,9 @@ const resolveForeach = (html, vars) => {
 */
 const resolveFragmentTags = (html, findFragmentFile, depth, maxDepth) => {
   if(depth > maxDepth) throw new Error(`Fragment depth exceeded maximum of ${maxDepth}`);
-  const re = /<fragment\s+name="([^"]+)"(?:\s*\/>|>([\s\S]*?)<\/fragment>)/g;
-  return html.replace(re, (_, name, fallback) => {
+  const re = /<fragment((?:[^>"']|"[^"]*"|'[^']*')*?)(?:\s*\/>|>([\s\S]*?)<\/fragment>)/g;
+  return html.replace(re, (_, attrStr, fallback) => {
+    const name = extractAttrs(attrStr || '').name;
     const content = findFragmentFile(name);
     if(content === null) return fallback ?? '';
     const stripped = stripFragmentWrapper(content);

package/tests/templating-parse.node-test.js

@@ -273,5 +273,86 @@ export default {
     const result = replaceLocations('<location>fallback</location>', {});
     if(result !== 'fallback') return fail(`got: ${result}`);
     pass();
+  },
+  'replaceLocations handles custom attributes on self-closing location': ({pass, fail}) => {
+    const result = replaceLocations('<location name="main" label="Main Content" />', {main: [{html: '<p>Hi</p>', priority: 0}]});
+    if(result !== '<p>Hi</p>') return fail(`got: ${result}`);
+    pass();
+  },
+  'replaceLocations handles custom attributes on block location': ({pass, fail}) => {
+    const result = replaceLocations('<location name="sidebar" label="Sidebar" editable="true">fallback</location>', {sidebar: [{html: 'real', priority: 0}]});
+    if(result !== 'real') return fail(`got: ${result}`);
+    pass();
+  },
+  'replaceLocations handles custom attributes with fallback': ({pass, fail}) => {
+    const result = replaceLocations('<location name="missing" label="Test">fallback</location>', {});
+    if(result !== 'fallback') return fail(`got: ${result}`);
+    pass();
+  },
+  'replaceLocations handles custom attributes on nameless location': ({pass, fail}) => {
+    const result = replaceLocations('<location label="Default" />', {default: [{html: 'content', priority: 0}]});
+    if(result !== 'content') return fail(`got: ${result}`);
+    pass();
+  },
+  'resolveFragmentTags handles custom attributes on fragment': ({pass, fail}) => {
+    const html = '<fragment name="nav" label="Navigation" />';
+    const finder = name => name === 'nav' ? '<nav>Link</nav>' : null;
+    const result = resolveFragmentTags(html, finder, 0, 10);
+    if(result !== '<nav>Link</nav>') return fail(`got: ${result}`);
+    pass();
+  },
+  'resolveFragmentTags handles custom attributes with fallback': ({pass, fail}) => {
+    const html = '<fragment name="missing" label="Test">fallback</fragment>';
+    const finder = () => null;
+    const result = resolveFragmentTags(html, finder, 0, 10);
+    if(result !== 'fallback') return fail(`got: ${result}`);
+    pass();
+  },
+  'resolveFragmentTags handles excessive whitespace': ({pass, fail}) => {
+    const html = '<fragment      name="nav" />';
+    const finder = name => name === 'nav' ? '<nav>Link</nav>' : null;
+    const result = resolveFragmentTags(html, finder, 0, 10);
+    if(result !== '<nav>Link</nav>') return fail(`got: ${result}`);
+    pass();
+  },
+  'replaceLocations handles excessive whitespace on self-closing': ({pass, fail}) => {
+    const result = replaceLocations('<location      name="main"      />', {main: [{html: 'hi', priority: 0}]});
+    if(result !== 'hi') return fail(`got: ${result}`);
+    pass();
+  },
+  'replaceLocations handles excessive whitespace on block location': ({pass, fail}) => {
+    const result = replaceLocations('<location      name="main"      >fallback</location>', {main: [{html: 'hi', priority: 0}]});
+    if(result !== 'hi') return fail(`got: ${result}`);
+    pass();
+  },
+  'resolveIfs handles extra attributes before condition': ({pass, fail}) => {
+    const result = resolveIfs('<if label="test" condition="show">visible</if>', {show: true});
+    if(result !== 'visible') return fail(`got: ${result}`);
+    pass();
+  },
+  'resolveIfs handles extra attributes after condition': ({pass, fail}) => {
+    const result = resolveIfs('<if condition="show" label="test">visible</if>', {show: false});
+    if(result !== '') return fail(`got: ${result}`);
+    pass();
+  },
+  'resolveForeach handles reversed attribute order': ({pass, fail}) => {
+    const result = resolveForeach('<foreach as="item" in="items">{{item}},</foreach>', {items: ['a', 'b']});
+    if(result !== 'a,b,') return fail(`got: ${result}`);
+    pass();
+  },
+  'resolveForeach handles extra attributes': ({pass, fail}) => {
+    const result = resolveForeach('<foreach in="items" as="item" label="List">{{item}}</foreach>', {items: ['x', 'y']});
+    if(result !== 'xy') return fail(`got: ${result}`);
+    pass();
+  },
+  'extractContentBlocks handles excessive whitespace': ({pass, fail}) => {
+    const blocks = extractContentBlocks('<content      location="main"      >Hello</content>');
+    if(!Array.isArray(blocks.main) || blocks.main[0].html !== 'Hello') return fail(`got: ${JSON.stringify(blocks.main)}`);
+    pass();
+  },
+  'extractContentBlocks handles extra custom attributes': ({pass, fail}) => {
+    const blocks = extractContentBlocks('<content location="main" label="Main" editable="true">Hello</content>');
+    if(!Array.isArray(blocks.main) || blocks.main[0].html !== 'Hello') return fail(`got: ${JSON.stringify(blocks.main)}`);
+    pass();
   }
 };