zero-http 0.2.0 → 0.2.2

package/documentation/public/scripts/ui.js

@@ -12,9 +12,11 @@ document.addEventListener('DOMContentLoaded', () =>
     initTocSidebar();
     initTocNavigation();
     initTocToolbar();
+    initTocCollapsible();
+    initTocSearch();
 });
 
-/* ── Feature Tabs ──────────────────────────────────────────────────────────── */
+/* -- Feature Tabs ------------------------------------------------------------ */
 
 /**
  * Wire the feature / server-model tab buttons so clicking one activates
@@ -47,7 +49,7 @@ function initFeatureTabs()
     });
 }
 
-/* ── TOC Sidebar Toggle ────────────────────────────────────────────────────── */
+/* -- TOC Sidebar Toggle ------------------------------------------------------ */
 
 /**
  * Wire the hamburger button to toggle the sidebar on both desktop (persistent)
@@ -106,7 +108,7 @@ function initTocSidebar()
     window.addEventListener('resize', syncAria);
 }
 
-/* ── TOC Smooth-Scroll Navigation ──────────────────────────────────────────── */
+/* -- TOC Smooth-Scroll Navigation -------------------------------------------- */
 
 /**
  * When clicking a TOC link that points to a `#hash`, auto-open any ancestor
@@ -166,7 +168,7 @@ function initTocNavigation()
     });
 }
 
-/* ── TOC Toolbar (scroll-to-top & expand/collapse all) ─────────────────────── */
+/* -- TOC Toolbar (scroll-to-top & expand/collapse all) ----------------------- */
 
 /**
  * Wire the icon-bar buttons at the top of the sidebar:
@@ -179,7 +181,7 @@ function initTocToolbar()
     const toggleBtn = document.getElementById('toc-toggle-acc');
     if (!topBtn && !toggleBtn) return;
 
-    /* ── Scroll to top ────────────────────────────────────────────────── */
+    /* -- Scroll to top -------------------------------------------------- */
     const brandBtn = document.getElementById('brand-top');
 
     [topBtn, brandBtn].forEach(el =>
@@ -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

@@ -7,14 +7,14 @@
  *             showJsonResult, highlightAllPre)
  */
 
-/* ── Pagination State ──────────────────────────────────────────────────────── */
+/* -- Pagination State -------------------------------------------------------- */
 
 let currentPage  = 1;
 let currentSort  = 'mtime';
 let currentOrder = 'desc';
 const pageSize   = 4;
 
-/* ── Combined Uploads + Trash JSON ─────────────────────────────────────────── */
+/* -- Combined Uploads + Trash JSON ------------------------------------------- */
 
 /**
  * Fetch the combined uploads + trash listing and render it as JSON into the
@@ -30,7 +30,7 @@ async function loadUploadsCombined()
     } catch (e) { }
 }
 
-/* ── Convenience: DELETE + Show Result ─────────────────────────────────────── */
+/* -- Convenience: DELETE + Show Result --------------------------------------- */
 
 /**
  * Issue a DELETE request and display the JSON response.
@@ -46,7 +46,7 @@ async function deleteAndShow(path, container)
     try { await loadUploadsCombined(); } catch (e) { showJsonResult(container, j); }
 }
 
-/* ── Trash Row Factory ─────────────────────────────────────────────────────── */
+/* -- Trash Row Factory ------------------------------------------------------- */
 
 /**
  * Build a trash-row DOM node with Restore and Delete Permanently buttons.
@@ -90,7 +90,7 @@ function createTrashRow(name)
     return row;
 }
 
-/* ── Trash List ────────────────────────────────────────────────────────────── */
+/* -- Trash List -------------------------------------------------------------- */
 
 /**
  * Fetch the trash listing from the server and render rows into `#trashList`.
@@ -125,7 +125,7 @@ function addTrashRow(name)
     else trashList.appendChild(row);
 }
 
-/* ── Undo Toast ────────────────────────────────────────────────────────────── */
+/* -- Undo Toast -------------------------------------------------------------- */
 
 /**
  * Display a transient undo panel when a file is moved to trash.
@@ -133,35 +133,50 @@ 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();
     });
 }
 
-/* ── Upload Card Factory ───────────────────────────────────────────────────── */
+/* -- Upload Card Factory ----------------------------------------------------- */
 
 /** Inline SVG placeholder for non-image files. */
 const PLACEHOLDER_SVG = 'data:image/svg+xml;utf8,' + encodeURIComponent(
@@ -241,7 +256,7 @@ function createUploadCard(f, uploadResult)
     return card;
 }
 
-/* ── Paginated Upload List ─────────────────────────────────────────────────── */
+/* -- Paginated Upload List --------------------------------------------------- */
 
 /**
  * Fetch the paginated upload list and render file cards into `#uploadsList`.
@@ -310,7 +325,7 @@ async function loadUploadsList()
     }
 }
 
-/* ── Wire Upload Form & Bulk Actions ───────────────────────────────────────── */
+/* -- Wire Upload Form & Bulk Actions ----------------------------------------- */
 
 /**
  * Initialise the upload form (XHR with progress), pagination controls, and

package/documentation/public/styles.css

@@ -188,24 +188,29 @@ details.acc[open] > summary:before{transform:rotate(90deg)}
 .tabs-content{display:block}
 .tab-panel{display:none;padding:6px 2px;transition:opacity .18s ease}
 .tab-panel.active{display:block}
-.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
-.feature-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;align-items:flex-start;gap:10px;transition:transform .12s ease,box-shadow .12s ease}
-.feature-card:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,0.6)}
-.feature-icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg, rgba(88,101,242,0.12), rgba(31,142,253,0.06));display:grid;place-items:center;font-size:20px;color:var(--accent);}
-.feature-icon svg{width:34px;height:34px;display:block;fill:var(--accent);}
-.feature-icon img.icon-svg{width:40px;height:40px;display:block;object-fit:contain;margin:0 auto}
-/* .feature-icon img.icon-svg[src$="/fetch.svg"], .feature-icon img.icon-svg[src$="fetch.svg"]{transform:translateY(-5px)translateX(1px);display:block} */
-.feature-icon img.icon-svg[src$="/static.svg"], .feature-icon img.icon-svg[src$="static.svg"]{transform:translateY(2px);display:block}
-/* .feature-icon img.icon-svg[src$="/plug.svg"], .feature-icon img.icon-svg[src$="plug.svg"]{transform:translateY(2px);display:block} */
-.feature-card h5{margin:0;font-size:15px}
-.feature-card p{margin:0;color:var(--muted);font-size:14px}
-.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:1fr}.tabs-nav{flex-wrap:wrap}}
+.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
+.feature-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:row;align-items:center;gap:10px;transition:transform .12s ease,box-shadow .12s ease}
+.feature-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.5)}
+.feature-icon{width:40px;height:40px;min-width:40px;border-radius:10px;background:linear-gradient(180deg, rgba(88,101,242,0.12), rgba(31,142,253,0.06));display:grid;place-items:center;font-size:16px;color:var(--accent);}
+.feature-icon svg{width:26px;height:26px;display:block;fill:var(--accent);}
+.feature-icon img.icon-svg{width:30px;height:30px;display:block;object-fit:contain;margin:0 auto}
+.feature-icon img.icon-svg[src$="/static.svg"], .feature-icon img.icon-svg[src$="static.svg"]{transform:translateY(1px);display:block}
+.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}
+.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 +275,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 +289,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 +317,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 +324,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

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
+  <defs>
+    <linearGradient id="g-comp" x1="0" x2="1">
+      <stop offset="0" stop-color="#7b61ff"/>
+      <stop offset="1" stop-color="#3ec6ff"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="8" fill="transparent"/>
+  <!-- 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="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"/>
+  <!-- Compact compressed block -->
+  <rect x="44" y="20" width="14" height="24" rx="4" fill="url(#g-comp)"/>
+  <!-- White highlight lines on compressed block -->
+  <line x1="48" y1="27" x2="54" y2="27" stroke="rgba(255,255,255,0.8)" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="48" y1="32" x2="54" y2="32" stroke="rgba(255,255,255,0.55)" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="48" y1="37" x2="52" y2="37" stroke="rgba(255,255,255,0.35)" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

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

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
+  <defs>
+    <linearGradient id="g-tls" x1="0" x2="1">
+      <stop offset="0" stop-color="#7b61ff"/>
+      <stop offset="1" stop-color="#3ec6ff"/>
+    </linearGradient>
+  </defs>
+  <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)"/>
+  <!-- Lock body -->
+  <rect x="24" y="30" width="16" height="14" rx="3" fill="rgba(255,255,255,0.9)"/>
+  <!-- Lock shackle -->
+  <path d="M27 30 V24 C27 19 37 19 37 24 V30" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="3" stroke-linecap="round"/>
+  <!-- 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)"/>
+</svg>

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

@@ -0,0 +1,24 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#00c6ff"></stop>
+      <stop offset="100%" stop-color="#0072ff"></stop>
+    </linearGradient>
+  </defs>
+
+  <rect width="512" height="512" rx="90" fill="#0f172a"></rect>
+
+  <circle cx="256" cy="230" r="110" fill="none" stroke="url(#grad)" stroke-width="28"></circle>
+
+  <line x1="256" y1="120" x2="256" y2="340" stroke="#0f172a" stroke-width="28"></line>
+
+  <rect x="180" y="190" width="152" height="80" rx="16" fill="#0f172a"></rect>
+
+  <text x="256" y="245" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="42" font-weight="700" fill="url(#grad)">
+    HTTP
+  </text>
+
+  <text x="256" y="430" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="44" font-weight="600" fill="white" letter-spacing="4">
+    ZERO
+  </text>
+</svg>

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

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
+  <defs>
+    <linearGradient id="g-rtr" x1="0" x2="1">
+      <stop offset="0" stop-color="#7b61ff"/>
+      <stop offset="1" stop-color="#3ec6ff"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="8" fill="transparent"/>
+  <!-- Central hub node -->
+  <circle cx="32" cy="32" r="10" fill="url(#g-rtr)"/>
+  <circle cx="32" cy="32" r="4" fill="rgba(255,255,255,0.85)"/>
+  <!-- Branch: top-left -->
+  <line x1="24" y1="24" x2="14" y2="14" stroke="url(#g-rtr)" stroke-width="2.5" stroke-linecap="round"/>
+  <rect x="6" y="6" width="14" height="12" rx="3.5" fill="url(#g-rtr)" opacity="0.7"/>
+  <line x1="10" y1="11" x2="16" y2="11" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="10" y1="14" x2="14" y2="14" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+  <!-- Branch: top-right -->
+  <line x1="40" y1="24" x2="50" y2="14" stroke="url(#g-rtr)" stroke-width="2.5" stroke-linecap="round"/>
+  <rect x="44" y="6" width="14" height="12" rx="3.5" fill="url(#g-rtr)" opacity="0.7"/>
+  <line x1="48" y1="11" x2="54" y2="11" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="48" y1="14" x2="52" y2="14" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+  <!-- Branch: bottom-center -->
+  <line x1="32" y1="42" x2="32" y2="50" stroke="url(#g-rtr)" stroke-width="2.5" stroke-linecap="round"/>
+  <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"/>
+</svg>

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

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
+  <defs>
+    <linearGradient id="g-sse" x1="0" x2="1">
+      <stop offset="0" stop-color="#7b61ff"/>
+      <stop offset="1" stop-color="#3ec6ff"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="8" fill="transparent"/>
+  <!-- Server box -->
+  <rect x="8" y="16" width="20" height="32" rx="5" fill="url(#g-sse)"/>
+  <!-- White indicator dots on server -->
+  <circle cx="18" cy="25" r="2.5" fill="rgba(255,255,255,0.9)"/>
+  <circle cx="18" cy="32" r="2.5" fill="rgba(255,255,255,0.55)"/>
+  <circle cx="18" cy="39" r="2.5" fill="rgba(255,255,255,0.35)"/>
+  <!-- Three streaming arrows flowing right -->
+  <line x1="32" y1="24" x2="50" y2="24" stroke="url(#g-sse)" stroke-width="3" stroke-linecap="round"/>
+  <path d="M47 20l5 4-5 4" fill="none" stroke="url(#g-sse)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="34" y1="32" x2="52" y2="32" stroke="url(#g-sse)" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
+  <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"/>
+</svg>

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

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
+  <defs>
+    <linearGradient id="g-ws" x1="0" x2="1">
+      <stop offset="0" stop-color="#7b61ff"/>
+      <stop offset="1" stop-color="#3ec6ff"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="8" fill="transparent"/>
+  <!-- Two speech bubbles overlapping to represent bidirectional real-time messaging -->
+  <rect x="6" y="10" width="32" height="22" rx="6" fill="url(#g-ws)"/>
+  <polygon points="14,32 20,40 24,32" fill="url(#g-ws)"/>
+  <!-- White dots in left bubble -->
+  <circle cx="15" cy="21" r="2.5" fill="rgba(255,255,255,0.85)"/>
+  <circle cx="22" cy="21" r="2.5" fill="rgba(255,255,255,0.85)"/>
+  <circle cx="29" cy="21" r="2.5" fill="rgba(255,255,255,0.85)"/>
+  <!-- Second bubble (offset) -->
+  <rect x="26" y="28" width="32" height="20" rx="6" fill="url(#g-ws)" opacity="0.75"/>
+  <polygon points="44,48 48,55 52,48" fill="url(#g-ws)" opacity="0.75"/>
+  <!-- Arrow inside second bubble implying response -->
+  <path d="M34 38h16M44 34l6 4-6 4" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>

package/index.js

@@ -4,12 +4,16 @@
  *              Re-exports every middleware, the app factory, and the fetch helper.
  */
 const App = require('./lib/app');
-const cors = require('./lib/cors');
+const Router = require('./lib/router');
+const cors = require('./lib/middleware/cors');
 const fetch = require('./lib/fetch');
 const body = require('./lib/body');
-const serveStatic = require('./lib/static');
-const rateLimit = require('./lib/rateLimit');
-const logger = require('./lib/logger');
+const serveStatic = require('./lib/middleware/static');
+const rateLimit = require('./lib/middleware/rateLimit');
+const logger = require('./lib/middleware/logger');
+const compress = require('./lib/middleware/compress');
+const { WebSocketConnection } = require('./lib/ws');
+const { SSEStream } = require('./lib/sse');
 
 module.exports = {
     /**
@@ -17,6 +21,12 @@ module.exports = {
      * @returns {import('./lib/app')} Fresh App with an empty middleware stack.
      */
     createApp: () => new App(),
+    /**
+     * Create a standalone Router for modular route grouping.
+     * Mount on an App with `app.use('/prefix', router)`.
+     * @returns {import('./lib/router')} Fresh Router instance.
+     */
+    Router: () => new Router(),
     /** @see module:cors */
     cors,
     /** @see module:fetch */
@@ -40,4 +50,11 @@ module.exports = {
     rateLimit,
     /** @see module:logger */
     logger,
+    /** @see module:compress */
+    compress,
+    // classes (for advanced / direct usage)
+    /** @see module:ws/connection */
+    WebSocketConnection,
+    /** @see module:sse/stream */
+    SSEStream,
 };