zero-http 0.2.1 → 0.2.3

package/README.md

@@ -1,4 +1,8 @@
-# zero-http
+<p align="center">
+  <img src="documentation/public/vendor/icons/logo.svg" alt="zero-http logo" width="300" height="300">
+</p>
+
+<h1 align="center">zero-http</h1>
 
 [![npm version](https://img.shields.io/npm/v/zero-http.svg)](https://www.npmjs.com/package/zero-http)
 [![npm downloads](https://img.shields.io/npm/dm/zero-http.svg)](https://www.npmjs.com/package/zero-http)

package/documentation/full-server.js

@@ -173,20 +173,36 @@ apiRouter.get('/info', (req, res) => res.json({
 app.use('/api', apiRouter);
 
 // --- Route introspection ---
-app.get('/debug/routes', (req, res) => res.json(app.routes()));
+app.get('/debug/routes', (req, res) =>
+{
+    res.set('Content-Type', 'application/json');
+    res.send(JSON.stringify(app.routes(), null, 2));
+});
+
+// --- TLS Certificates (HTTPS + WSS) ---
+const certPath = '/www/server/panel/vhost/cert/zero-http.molex.cloud/fullchain.pem';
+const keyPath = '/www/server/panel/vhost/cert/zero-http.molex.cloud/privkey.pem';
+const hasCerts = fs.existsSync(certPath) && fs.existsSync(keyPath);
+
+const tlsOpts = hasCerts
+    ? { cert: fs.readFileSync(certPath), key: fs.readFileSync(keyPath) }
+    : undefined;
 
 // --- Server Startup ---
-const port = process.env.PORT || 3000;
-const server = app.listen(port, () =>
+const port = process.env.PORT || 7273;
+const server = app.listen(port, tlsOpts, () =>
 {
-    console.log(`zero-http full-server listening on http://localhost:${port}`);
+    const proto = hasCerts ? 'https' : 'http';
+    console.log(`zero-http full-server listening on ${proto}://localhost:${port}`);
     if (process.argv.includes('--test')) runTests(port).catch(console.error);
 });
 
+
 /** Quick smoke tests using built-in fetch */
 async function runTests(port)
 {
-    const base = `http://localhost:${port}`;
+    const proto = hasCerts ? 'https' : 'http';
+    const base = `${proto}://localhost:${port}`;
     console.log('running smoke tests against', base);
 
     const doReq = async (label, promise) =>

package/documentation/public/index.html

@@ -41,9 +41,12 @@
 				</svg>
 			</button>
 
-			<a class="brand" href="#top" id="brand-top" style="text-decoration:none;color:inherit;cursor:pointer">
-				<div class="logo">zero-http</div>
-				<div class="subtitle">Zero-dependency Express-like server</div>
+			<a class="brand" href="#top" id="brand-top" style="text-decoration:none;color:inherit;cursor:pointer;display:flex;align-items:center;gap:12px">
+				<img src="/vendor/icons/logo.svg" alt="zero-http logo" class="header-logo" width="50" height="50" />
+				<div>
+					<div class="logo">zero-http</div>
+					<div class="subtitle">Zero-dependency Express-like server</div>
+				</div>
 			</a>
 
 			<div class="repo-buttons" role="navigation" aria-label="Repository links">
@@ -71,20 +74,24 @@
 		<aside class="toc-sidebar" aria-label="Table of contents">
 			<nav>
 				<div class="toc-toolbar">
+					<div class="toc-search-wrap">
+						<svg class="toc-search-icon" width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="2"/><path d="M11 11l4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+						<input id="toc-search" class="toc-search" type="text" placeholder="Filter…" autocomplete="off" spellcheck="false" />
+					</div>
+					<button class="toc-tool-btn" id="toc-toggle-acc" title="Collapse all" aria-label="Collapse all sections">
+						<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4l6 4 6-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 9l6 4 6-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+					</button>
 					<button class="toc-tool-btn" id="toc-top-btn" title="Back to top" aria-label="Scroll to top">
 						<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 13V3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M3 7l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
 					</button>
-					<button class="toc-tool-btn" id="toc-toggle-acc" title="Expand all" aria-label="Expand all sections">
-						<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4l6 4 6-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 9l6 4 6-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-					</button>
 				</div>
 				<ul>
 					<li><a href="#features">Features</a></li>
 					<li><a href="#quickstart">Quickstart</a></li>
 					<li><a href="#options">Options</a></li>
-					<li><a href="#api-reference">API Reference</a></li>
-					<li><a href="#simple-examples">Simple Examples</a></li>
-					<li><a href="#playground">Playground</a>
+					<li class="toc-collapsible"><a href="#api-reference">API Reference</a></li>
+					<li class="toc-collapsible"><a href="#simple-examples">Simple Examples</a></li>
+					<li class="toc-collapsible"><a href="#playground">Playground</a>
 						<ul class="toc-sub">
 							<li class="toc-sub-item"><a href="#upload-testing">Upload multipart data</a></li>
 							<li class="toc-sub-item"><a href="#parser-tests">Parser tests</a></li>
@@ -192,40 +199,29 @@
 							</div>
 						</div>
 						<div id="tab-behavior" class="tab-panel">
-							<div class="behavior-list">
-								<div class="behavior-step">
-									<div class="step-num">1</div>
-									<div class="step-body">
-										<h5>Registration order</h5>
-										<p>Routing and middleware run in the order they're registered—add parsers before
-											handlers.</p>
-									</div>
+							<div class="pipeline">
+								<div class="pipe-stage">
+									<div class="pipe-icon"><svg viewBox="0 0 24 24"><polygon points="12 2 2 7 12 12 22 7"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg></div>
+									<h5>Registration order</h5>
+									<p>Middleware runs in the order registered—add parsers before handlers.</p>
 								</div>
-								<div class="behavior-step">
-									<div class="step-num">2</div>
-									<div class="step-body">
-										<h5>Body parsing</h5>
-										<p>Body parsers populate <code>req.body</code>; multipart uploads expose
-											<code>req.body.files</code> and <code>req.body.fields</code>.
-										</p>
-									</div>
+								<div class="pipe-arrow" aria-hidden="true" style="--i:0"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></div>
+								<div class="pipe-stage">
+									<div class="pipe-icon"><svg viewBox="0 0 24 24"><path d="M9 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2"/><path d="M15 3h2a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2"/></svg></div>
+									<h5>Body parsing</h5>
+									<p>Populates <code>req.body</code>; multipart exposes <code>req.body.files</code> and <code>req.body.fields</code>.</p>
 								</div>
-								<div class="behavior-step">
-									<div class="step-num">3</div>
-									<div class="step-body">
-										<h5>Handler model</h5>
-										<p>Handlers receive <code>req</code> and <code>res</code>. Use
-											<code>res.json()</code> or <code>res.send()</code> to respond.
-										</p>
-									</div>
+								<div class="pipe-arrow" aria-hidden="true" style="--i:1"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></div>
+								<div class="pipe-stage">
+									<div class="pipe-icon"><svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg></div>
+									<h5>Handler model</h5>
+									<p>Handlers receive <code>req</code> + <code>res</code>. Respond with <code>res.json()</code> or <code>res.send()</code>.</p>
 								</div>
-								<div class="behavior-step">
-									<div class="step-num">4</div>
-									<div class="step-body">
-										<h5>Static middleware</h5>
-										<p>Serves files with Content-Type derived from extension and supports caching
-											options.</p>
-									</div>
+								<div class="pipe-arrow" aria-hidden="true" style="--i:2"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></div>
+								<div class="pipe-stage">
+									<div class="pipe-icon"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
+									<h5>Static middleware</h5>
+									<p>Serves files with Content-Type from extension and supports caching options.</p>
 								</div>
 							</div>
 						</div>

package/documentation/public/scripts/data-sections.js

@@ -36,6 +36,25 @@ function populateTocSub(href, items)
     const existing = parentLi.querySelector('ul.toc-sub');
     if (existing) existing.remove();
 
+    /* Ensure parent has collapsible behaviour */
+    if (!parentLi.classList.contains('toc-collapsible'))
+    {
+        parentLi.classList.add('toc-collapsible', 'toc-collapsed');
+        parentLi.style.paddingLeft = '20px';
+
+        const toggle = document.createElement('button');
+        toggle.className = 'toc-collapse-btn';
+        toggle.setAttribute('aria-label', 'Toggle section');
+        toggle.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+        toggle.addEventListener('click', (e) =>
+        {
+            e.preventDefault();
+            e.stopPropagation();
+            parentLi.classList.toggle('toc-collapsed');
+        });
+        parentLi.insertBefore(toggle, parentLi.firstChild);
+    }
+
     const sub = document.createElement('ul');
     sub.className = 'toc-sub';
 

package/documentation/public/scripts/playground.js

@@ -113,7 +113,10 @@ function initWsChat()
     {
         const name = encodeURIComponent(nameInput.value || 'anon');
         const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-        ws = new WebSocket(`${proto}//${location.host}/ws/chat?name=${name}`);
+        // Use the direct HTTPS host+port when behind a reverse proxy that
+        // doesn't forward WebSocket upgrades.
+        const wsHost = location.port ? location.host : (location.hostname + ':7273');
+        ws = new WebSocket(`${proto}//${wsHost}/ws/chat?name=${name}`);
 
         ws.onopen = () =>
         {

package/documentation/public/scripts/ui.js

@@ -12,6 +12,8 @@ document.addEventListener('DOMContentLoaded', () =>
     initTocSidebar();
     initTocNavigation();
     initTocToolbar();
+    initTocCollapsible();
+    initTocSearch();
 });
 
 /* -- Feature Tabs ------------------------------------------------------------ */
@@ -192,15 +194,21 @@ function initTocToolbar()
         });
     });
 
-    /* -- Expand / Collapse all accordions ------------------------------- */
+    /* -- Expand / Collapse sidebar categories only ---------------------- */
     if (toggleBtn)
     {
-        let expanded = false;
+        let expanded = true;   /* Start expanded */
+        toggleBtn.classList.add('acc-expanded');
 
         toggleBtn.addEventListener('click', () =>
         {
             expanded = !expanded;
-            document.querySelectorAll('details.acc').forEach(d => d.open = expanded);
+
+            /* Toggle only collapsible TOC categories in the sidebar */
+            document.querySelectorAll('.toc-collapsible').forEach(li =>
+            {
+                li.classList.toggle('toc-collapsed', !expanded);
+            });
 
             toggleBtn.classList.toggle('acc-expanded', expanded);
             toggleBtn.title = expanded ? 'Collapse all' : 'Expand all';
@@ -208,3 +216,127 @@ function initTocToolbar()
         });
     }
 }
+
+/* -- TOC Collapsible Categories ---------------------------------------------- */
+
+/**
+ * Make sidebar categories that have (or will have) nested sub-items
+ * collapsible via a toggle chevron. Clicking the chevron expands/collapses
+ * the sub-list. Clicking the link itself still navigates.
+ */
+function initTocCollapsible()
+{
+    const items = document.querySelectorAll('.toc-collapsible');
+    items.forEach(li =>
+    {
+        /* Start expanded */
+
+        /* Create toggle button */
+        const toggle = document.createElement('button');
+        toggle.className = 'toc-collapse-btn';
+        toggle.setAttribute('aria-label', 'Toggle section');
+        toggle.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
+        toggle.addEventListener('click', (e) =>
+        {
+            e.preventDefault();
+            e.stopPropagation();
+            li.classList.toggle('toc-collapsed');
+        });
+
+        li.insertBefore(toggle, li.firstChild);
+    });
+}
+
+/* -- TOC Search Filter ------------------------------------------------------- */
+
+/**
+ * Wire the sidebar search input to filter TOC items by matching against
+ * the display name (link text) of each item in the sidebar.
+ */
+function initTocSearch()
+{
+    const input = document.getElementById('toc-search');
+    if (!input) return;
+
+    const nav = document.querySelector('.toc-sidebar nav ul');
+    if (!nav) return;
+
+    /**
+     * Get the visible display name for a TOC list item.
+     */
+    function getDisplayName(li)
+    {
+        const a = li.querySelector(':scope > a');
+        return a ? a.textContent.trim().toLowerCase() : '';
+    }
+
+    /**
+     * Check whether any sub-items match the query by display name.
+     */
+    function hasSubMatch(li, q)
+    {
+        const subItems = li.querySelectorAll('.toc-sub-item');
+        for (const sub of subItems)
+        {
+            if (getDisplayName(sub).includes(q)) return true;
+        }
+        return false;
+    }
+
+    let debounceTimer = null;
+
+    input.addEventListener('input', () =>
+    {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() =>
+        {
+            const q = input.value.trim().toLowerCase();
+
+            const topItems = nav.querySelectorAll(':scope > li');
+
+            if (!q)
+            {
+                /* Reset: show everything, restore collapsed state */
+                topItems.forEach(li =>
+                {
+                    li.style.display = '';
+                    const subItems = li.querySelectorAll('.toc-sub-item');
+                    subItems.forEach(s => s.style.display = '');
+                });
+                return;
+            }
+
+            topItems.forEach(li =>
+            {
+                const titleMatch = getDisplayName(li).includes(q);
+                const subMatch = hasSubMatch(li, q);
+
+                if (titleMatch || subMatch)
+                {
+                    li.style.display = '';
+                    /* Auto-expand when searching */
+                    if (li.classList.contains('toc-collapsible'))
+                    {
+                        li.classList.remove('toc-collapsed');
+                    }
+
+                    /* Filter sub-items if only some match */
+                    const subItems = li.querySelectorAll('.toc-sub-item');
+                    if (subItems.length)
+                    {
+                        subItems.forEach(sub =>
+                        {
+                            /* If parent title matched, show all children; otherwise filter by sub-item name */
+                            sub.style.display = (titleMatch || getDisplayName(sub).includes(q)) ? '' : 'none';
+                        });
+                    }
+                }
+                else
+                {
+                    li.style.display = 'none';
+                }
+            });
+        }, 120);
+    });
+}

package/documentation/public/scripts/uploads.js

@@ -133,28 +133,43 @@ function addTrashRow(name)
  */
 function showUndo(name)
 {
+    /* Remove any existing undo toast first */
+    const prev = document.querySelector('.undo-toast');
+    if (prev) prev.remove();
+
     const box = document.createElement('div');
-    box.className = 'panel';
-    box.textContent = `Trashed ${name} — `;
+    box.className = 'undo-toast';
+    box.textContent = `Trashed ${name} \u2014 `;
 
     const btn = document.createElement('button');
     btn.textContent = 'Undo';
     btn.className = 'btn';
     box.appendChild(btn);
 
-    try
-    {
-        const shell = document.querySelector('.ui-shell') || document.body;
-        shell.prepend(box);
-    } catch (e) { }
+    const close = document.createElement('button');
+    close.className = 'undo-toast-close';
+    close.innerHTML = '×';
+    close.setAttribute('aria-label', 'Dismiss');
+    box.appendChild(close);
+
+    document.body.appendChild(box);
+
+    const dismiss = () => { clearTimeout(tid); box.remove(); document.removeEventListener('click', outsideClick); };
+
+    const tid = setTimeout(dismiss, 8000);
+
+    close.addEventListener('click', (e) => { e.stopPropagation(); dismiss(); });
 
-    const tid = setTimeout(() => box.remove(), 8000);
+    /* Click outside to dismiss */
+    function outsideClick(e) { if (!box.contains(e.target)) dismiss(); }
+    /* Delay listener so the current click doesn't immediately close it */
+    setTimeout(() => document.addEventListener('click', outsideClick), 0);
 
-    btn.addEventListener('click', async () =>
+    btn.addEventListener('click', async (e) =>
     {
-        clearTimeout(tid);
+        e.stopPropagation();
+        dismiss();
         await fetch('/uploads/' + encodeURIComponent(name) + '/restore', { method: 'POST' });
-        box.remove();
         try { await loadUploadsCombined(); } catch (e) { }
         loadUploadsList();
         loadTrashList();

package/documentation/public/styles.css

@@ -26,6 +26,7 @@ html{font-size:18px}
 body{height:100%;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.6;font-family:'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif}
 .ui-shell{max-width:1300px;margin:24px auto;padding:28px}
 .ui-header{display:flex;align-items:center;gap:16px;margin-bottom:14px;position:fixed;top:0;left:50%;transform:translateX(-50%);width:calc(100% - 48px);max-width:1300px;height:var(--header-height);z-index:140;background:linear-gradient(180deg, rgba(11,13,16,0.96), rgba(11,13,16,0.92));backdrop-filter:blur(6px);padding:10px 20px;border-radius:10px}
+.header-logo{width:50px;height:auto;flex-shrink:0}
 .repo-buttons{margin-left:auto;display:flex;gap:12px;align-items:center}
 .icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text);background:transparent;border:1px solid rgba(255,255,255,0.03);cursor:pointer;text-decoration:none;font-weight:700;transition:transform .08s ease,box-shadow .12s ease,background .12s ease;min-width:44px;min-height:44px}
 .icon-btn svg, .icon-btn .icon-svg{display:block;width:28px;height:28px}
@@ -198,13 +199,18 @@ details.acc[open] > summary:before{transform:rotate(90deg)}
 .feature-card h5{margin:0;font-size:13px;line-height:1.2}
 .feature-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.3}
 .feature-text{display:flex;flex-direction:column;gap:2px;min-width:0}
-.behavior-list{display:flex;flex-direction:column;gap:10px}
-.behavior-step{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
-.step-num{width:44px;height:44px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;box-shadow:0 8px 18px rgba(31,142,253,0.08)}
-.step-body h5{margin:0 0 6px 0}
-.step-body p{margin:0;color:var(--muted)}
-
-@media(max-width:900px){.feature-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.tabs-nav{flex-wrap:wrap}}
+.pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:6px}
+.pipe-stage{text-align:center;padding:16px 10px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.025),transparent);border:1px solid rgba(255,255,255,0.04);transition:transform .12s ease,box-shadow .12s ease}
+.pipe-stage:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.5)}
+.pipe-icon{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 6px 16px rgba(88,101,242,0.15)}
+.pipe-icon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.pipe-stage h5{margin:0 0 5px;font-size:13px}
+.pipe-stage p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
+.pipe-arrow{display:flex;align-items:center;padding-top:18px}
+@keyframes flowPulse{0%,100%{opacity:0.25}50%{opacity:0.55}}
+.pipe-arrow svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:flowPulse 2.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * 0.5s)}
+
+@media(max-width:900px){.feature-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.tabs-nav{flex-wrap:wrap}.pipeline{grid-template-columns:1fr;justify-items:center;gap:2px}.pipe-stage{max-width:380px;width:100%}.pipe-arrow{padding:2px 0}.pipe-arrow svg{transform:rotate(90deg)}}
 @media(max-width:500px){.feature-grid{grid-template-columns:1fr}}
 
 @media(max-width:900px){.playgrid{grid-template-columns:1fr}.ui-shell{padding:16px}}
@@ -270,8 +276,8 @@ details.acc[open] > summary:before{transform:rotate(90deg)}
 body.toc-open .toc-sidebar{opacity:1;transform:translateX(0);pointer-events:auto}
 
 /* TOC icon toolbar */
-.toc-toolbar{display:flex;gap:6px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.04)}
-.toc-tool-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);cursor:pointer;transition:color .12s ease,background .12s ease,transform .12s ease}
+.toc-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.04)}
+.toc-tool-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);cursor:pointer;transition:color .12s ease,background .12s ease,transform .12s ease}
 .toc-tool-btn:hover{color:var(--accent);background:rgba(88,101,242,0.08)}
 .toc-tool-btn:active{transform:scale(0.92)}
 .toc-tool-btn.acc-expanded svg{transform:rotate(180deg);transition:transform .18s ease}
@@ -284,6 +290,21 @@ body.toc-open .toc-sidebar{opacity:1;transform:translateX(0);pointer-events:auto
 .toc-sidebar nav li.toc-sub-item a:hover{color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
 .toc-sidebar nav li.toc-sub-item a:visited{color:rgba(255,255,255,0.6)}
 
+/* TOC search filter (inline in toolbar) */
+.toc-search-wrap{position:relative;flex:1;min-width:0}
+.toc-search-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
+.toc-search{width:100%;box-sizing:border-box;padding:6px 8px 6px 26px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text);font-size:12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;height:32px}
+.toc-search::placeholder{color:rgba(255,255,255,0.3)}
+.toc-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,101,242,0.12)}
+
+/* Collapsible TOC categories */
+.toc-collapsible{position:relative;padding-left:20px !important}
+.toc-collapse-btn{position:absolute;left:2px;top:12px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:0;border-radius:4px;transition:color .12s ease,background .12s ease}
+.toc-collapse-btn:hover{color:var(--accent);background:rgba(88,101,242,0.08)}
+.toc-collapse-btn svg{transition:transform .18s ease}
+.toc-collapsible:not(.toc-collapsed) > .toc-collapse-btn svg{transform:rotate(90deg)}
+.toc-collapsible.toc-collapsed > .toc-sub{display:none !important}
+
 
 @media(min-width:900px){
 	.ui-shell{display:flex;align-items:flex-start}
@@ -297,7 +318,6 @@ body.toc-open .toc-sidebar{opacity:1;transform:translateX(0);pointer-events:auto
 	.ui-main{margin-left:0}
 }
 
-/* Keep the hamburger always accessible on small screens */
 @media(max-width:640px){
 	:root{--header-height:56px}
 	.ui-header{width:calc(100% - 16px);padding:8px 12px;border-radius:0}
@@ -305,6 +325,10 @@ body.toc-open .toc-sidebar{opacity:1;transform:translateX(0);pointer-events:auto
 	.brand .logo{font-size:18px}
 }
 
-/* Ensure page content is not hidden behind the fixed header */
 body{padding-top:calc(var(--header-height) + 12px)}
-.ui-shell{margin-top:0}
+.ui-shell{margin-top:0}
+
+.undo-toast{position:fixed;top:calc(var(--header-height) + 12px);left:50%;transform:translateX(-50%);z-index:200;background:var(--surface, #161a22);border:1px solid var(--surface-border, rgba(255,255,255,0.06));color:var(--text, #e2e8f0);padding:10px 18px;border-radius:10px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,0.5);display:flex;align-items:center;gap:10px;animation:toast-in .25s ease}
+@keyframes toast-in{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
+.undo-toast-close{background:none;border:none;color:var(--text, #e2e8f0);font-size:18px;line-height:1;cursor:pointer;padding:0 0 0 4px;opacity:.5;transition:opacity .15s}
+.undo-toast-close:hover{opacity:1}

package/documentation/public/vendor/icons/compress.svg

@@ -9,12 +9,12 @@
   <!-- Outer large container (uncompressed) -->
   <rect x="6" y="8" width="24" height="48" rx="5" fill="url(#g-comp)" opacity="0.3"/>
   <!-- Inward arrows implying compression -->
-  <path d="M6 20h8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
-  <path d="M30 20h-8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
-  <path d="M6 32h8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
-  <path d="M30 32h-8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
-  <path d="M6 44h8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
-  <path d="M30 44h-8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+  <path d="M6 20h8" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+  <path d="M30 20h-8" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+  <path d="M6 32h8" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+  <path d="M30 32h-8" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+  <path d="M6 44h8" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+  <path d="M30 44h-8" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
   <!-- Arrow pointing to compressed result -->
   <path d="M34 32h6" stroke="url(#g-comp)" stroke-width="2.5" stroke-linecap="round"/>
   <path d="M38 28l4 4-4 4" fill="none" stroke="url(#g-comp)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>

package/documentation/public/vendor/icons/https.svg

@@ -8,8 +8,6 @@
   <rect width="64" height="64" rx="8" fill="transparent"/>
   <!-- Shield shape -->
   <path d="M32 6 L52 16 L52 34 C52 48 32 58 32 58 C32 58 12 48 12 34 L12 16 Z" fill="url(#g-tls)"/>
-  <!-- White highlight on shield -->
-  <path d="M32 10 L48 18 L48 33 C48 44 32 53 32 53 C32 53 30 52 28 50" fill="rgba(255,255,255,0.08)" stroke="none"/>
   <!-- Lock body -->
   <rect x="24" y="30" width="16" height="14" rx="3" fill="rgba(255,255,255,0.9)"/>
   <!-- Lock shackle -->
@@ -17,7 +15,4 @@
   <!-- Keyhole -->
   <circle cx="32" cy="36" r="2.5" fill="url(#g-tls)"/>
   <rect x="31" y="36" width="2" height="4" rx="1" fill="url(#g-tls)"/>
-  <!-- Sparkle dots -->
-  <circle cx="50" cy="10" r="1.5" fill="rgba(255,255,255,0.6)"/>
-  <circle cx="54" cy="14" r="1" fill="rgba(255,255,255,0.35)"/>
 </svg>

package/documentation/public/vendor/icons/logo.svg

@@ -0,0 +1,89 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="60 40 392 432" width="512" height="512" aria-label="zero-http logo">
+  <defs>
+    <!-- Primary purple-to-cyan gradient -->
+    <linearGradient id="logo-grad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#7b61ff"/>
+      <stop offset="50%" stop-color="#5865f2"/>
+      <stop offset="100%" stop-color="#3ec6ff"/>
+    </linearGradient>
+    <!-- Lighter glow version -->
+    <linearGradient id="logo-glow" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#a78bfa"/>
+      <stop offset="100%" stop-color="#67e8f9"/>
+    </linearGradient>
+    <!-- Subtle inner highlight -->
+    <linearGradient id="logo-hi" x1="0.5" y1="0" x2="0.5" y2="1">
+      <stop offset="0%" stop-color="rgba(255,255,255,0.25)"/>
+      <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
+    </linearGradient>
+    <!-- Background radial glow -->
+    <radialGradient id="bg-glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#5865f2" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#0e1114" stop-opacity="0"/>
+    </radialGradient>
+    <!-- Drop shadow filter -->
+    <filter id="logo-shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#5865f2" flood-opacity="0.35"/>
+    </filter>
+    <!-- Soft glow filter -->
+    <filter id="bolt-glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+  </defs>
+
+  <!-- Background glow -->
+  <circle cx="256" cy="256" r="200" fill="url(#bg-glow)"/>
+
+  <!-- Outer ring — perfect circle -->
+  <circle cx="256" cy="256" r="195" fill="none"
+          stroke="url(#logo-grad)" stroke-width="24"
+          stroke-linecap="round" opacity="0.15"/>
+
+  <!-- Main ring — perfect circle -->
+  <circle cx="256" cy="256" r="170" fill="none"
+          stroke="url(#logo-grad)" stroke-width="32"
+          stroke-linecap="round" filter="url(#logo-shadow)"/>
+
+  <!-- Highlight arc on top-left of the ring -->
+  <path d="M 140,175 A 170,170 0 0,1 330,100"
+        fill="none" stroke="url(#logo-hi)" stroke-width="14"
+        stroke-linecap="round" opacity="0.6"/>
+
+  <!-- Lightning bolt — centered and thicker -->
+  <g filter="url(#bolt-glow)">
+    <!-- Bolt body -->
+    <path d="
+      M 222 82
+      L 186 242
+      L 252 242
+      L 182 435
+      L 330 205
+      L 258 205
+      L 296 82
+      Z
+    " fill="url(#logo-grad)"/>
+
+    <!-- Bolt inner highlight -->
+    <path d="
+      M 228 100
+      L 202 238
+      L 252 238
+      L 204 395
+      L 318 212
+      L 262 212
+      L 288 100
+      Z
+    " fill="url(#logo-hi)" opacity="0.5"/>
+  </g>
+
+  <!-- Small orbital dots — representing HTTP connections -->
+  <circle cx="100" cy="155" r="8" fill="#7b61ff" opacity="0.7"/>
+  <circle cx="410" cy="360" r="8" fill="#3ec6ff" opacity="0.7"/>
+  <circle cx="88" cy="330" r="5" fill="#5865f2" opacity="0.5"/>
+  <circle cx="425" cy="170" r="5" fill="#67e8f9" opacity="0.5"/>
+
+  <!-- Subtle angled scan lines for tech feel -->
+  <line x1="120" y1="400" x2="160" y2="415" stroke="#3ec6ff" stroke-width="2" opacity="0.15" stroke-linecap="round"/>
+  <line x1="350" y1="95" x2="390" y2="110" stroke="#7b61ff" stroke-width="2" opacity="0.15" stroke-linecap="round"/>
+</svg>

package/documentation/public/vendor/icons/router.svg

@@ -24,6 +24,4 @@
   <rect x="22" y="50" width="20" height="10" rx="3.5" fill="url(#g-rtr)" opacity="0.7"/>
   <line x1="26" y1="55" x2="38" y2="55" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round"/>
   <line x1="26" y1="58" x2="34" y2="58" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
-  <!-- Sparkle -->
-  <circle cx="56" cy="28" r="1.5" fill="rgba(255,255,255,0.5)"/>
 </svg>

package/documentation/public/vendor/icons/sse.svg

@@ -19,7 +19,4 @@
   <path d="M49 28l5 4-5 4" fill="none" stroke="url(#g-sse)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
   <line x1="36" y1="40" x2="54" y2="40" stroke="url(#g-sse)" stroke-width="3" stroke-linecap="round" opacity="0.45"/>
   <path d="M51 36l5 4-5 4" fill="none" stroke="url(#g-sse)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.45"/>
-  <!-- White sparkle -->
-  <circle cx="54" cy="18" r="2" fill="rgba(255,255,255,0.7)"/>
-  <circle cx="57" cy="14" r="1" fill="rgba(255,255,255,0.4)"/>
 </svg>

package/lib/app.js

@@ -247,7 +247,18 @@ class App
      */
     routes()
     {
-        return this.router.inspect();
+        const list = this.router.inspect();
+
+        /* Include WebSocket upgrade handlers */
+        for (const [wsPath, { opts }] of this._wsHandlers)
+        {
+            const entry = { method: 'WS', path: wsPath };
+            if (opts && opts.maxPayload !== undefined) entry.maxPayload = opts.maxPayload;
+            if (opts && opts.pingInterval !== undefined) entry.pingInterval = opts.pingInterval;
+            list.push(entry);
+        }
+
+        return list;
     }
 
     // -- Route Registration ----------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zero-http",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Zero-dependency, minimal Express-like HTTP server and tiny fetch replacement",
   "main": "index.js",
   "files": [