zero-http 0.2.4 → 0.3.1

package/documentation/public/scripts/playground.js

@@ -75,6 +75,12 @@ function initPlayground()
 
     /* --- SSE Viewer --- */
     initSseViewer();
+
+    /* --- ORM CRUD --- */
+    initOrmPlayground();
+
+    /* --- Cookie Explorer --- */
+    initCookieExplorer();
 }
 
 /* ------------------------------------------------------------------ */
@@ -273,3 +279,267 @@ function initSseViewer()
         appendMsg(`<span style="color:#aaa">» Broadcast sent to ${j.sent} client(s)</span>`);
     });
 }
+
+/* ------------------------------------------------------------------ */
+/*  ORM Task Manager Playground                                        */
+/* ------------------------------------------------------------------ */
+function initOrmPlayground()
+{
+    const form      = $('#taskForm');
+    const titleIn   = $('#taskTitle');
+    const statusIn  = $('#taskStatus');
+    const priorityIn = $('#taskPriority');
+    const searchIn  = $('#taskSearch');
+    const scopeIn   = $('#taskScope');
+    const delAllBtn = $('#taskDeleteAll');
+    const listEl    = $('#taskList');
+    const resultEl  = $('#taskResult');
+    const statsEl   = $('#ormStats');
+
+    if (!form) return;
+
+    let editingId = null;
+
+    /* ---- helpers ---- */
+    function statusBadge(s)
+    {
+        const colors = { pending: '#fa0', 'in-progress': '#5865f2', done: '#2ecc71' };
+        return `<span style="padding:2px 8px;border-radius:4px;font-size:12px;background:${colors[s] || '#555'};color:#fff">${escapeHtml(s)}</span>`;
+    }
+
+    function priorityStars(n)
+    {
+        return '<span style="color:#fa0">' + '★'.repeat(n) + '</span>' + '<span style="color:#333">' + '☆'.repeat(5 - n) + '</span>';
+    }
+
+    async function loadStats()
+    {
+        try
+        {
+            const r = await fetch('/api/tasks/stats');
+            const s = await r.json();
+            statsEl.innerHTML =
+                `<div class="orm-stat-grid">` +
+                `<div class="orm-stat"><span class="orm-stat-val">${s.total}</span><span class="orm-stat-label">Total</span></div>` +
+                `<div class="orm-stat"><span class="orm-stat-val" style="color:#fa0">${s.pending}</span><span class="orm-stat-label">Pending</span></div>` +
+                `<div class="orm-stat"><span class="orm-stat-val" style="color:#5865f2">${s.inProgress}</span><span class="orm-stat-label">In-progress</span></div>` +
+                `<div class="orm-stat"><span class="orm-stat-val" style="color:#2ecc71">${s.done}</span><span class="orm-stat-label">Done</span></div>` +
+                `<div class="orm-stat"><span class="orm-stat-val">${Number(s.avgPriority).toFixed(1)}</span><span class="orm-stat-label">Avg Priority</span></div>` +
+                `</div>`;
+        } catch (e) { }
+    }
+
+    async function loadTasks()
+    {
+        try
+        {
+            const params = new URLSearchParams();
+            if (searchIn.value.trim()) params.set('search', searchIn.value.trim());
+            if (scopeIn.value) params.set('scope', scopeIn.value);
+            params.set('sort', 'createdAt');
+            params.set('order', 'desc');
+
+            const r = await fetch('/api/tasks?' + params);
+            const data = await r.json();
+            showJsonResult(resultEl, data);
+
+            if (!data.tasks || !data.tasks.length)
+            {
+                listEl.innerHTML = '<div style="padding:12px;color:#98a0aa">No tasks yet — add one above.</div>';
+                loadStats();
+                return;
+            }
+
+            listEl.innerHTML = data.tasks.map(t =>
+                `<div class="task-row" data-id="${t.id}">` +
+                    `<div class="task-info">` +
+                        `<strong>${escapeHtml(t.title)}</strong> ` +
+                        statusBadge(t.status) + ' ' + priorityStars(t.priority) +
+                        `<div class="small muted">ID ${t.id} · ${new Date(t.createdAt).toLocaleString()}</div>` +
+                    `</div>` +
+                    `<div class="task-actions">` +
+                        `<button class="btn small task-edit-btn" data-id="${t.id}">Edit</button>` +
+                        `<button class="btn small task-cycle-btn" data-id="${t.id}" data-status="${t.status}" title="Cycle status">↻</button>` +
+                        `<button class="btn small warn task-del-btn" data-id="${t.id}">Delete</button>` +
+                    `</div>` +
+                `</div>`
+            ).join('');
+
+            loadStats();
+        }
+        catch (e) { listEl.innerHTML = `<div style="color:#f66">${escapeHtml(e.message)}</div>`; }
+    }
+
+    /* ---- events ---- */
+    on(form, 'submit', async (e) =>
+    {
+        e.preventDefault();
+        const body = {
+            title: titleIn.value.trim(),
+            status: statusIn.value,
+            priority: Number(priorityIn.value),
+        };
+        if (!body.title) return;
+
+        if (editingId)
+        {
+            await fetch('/api/tasks/' + editingId, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            editingId = null;
+            form.querySelector('button[type="submit"]').textContent = 'Add Task';
+        }
+        else
+        {
+            await fetch('/api/tasks', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+        }
+        titleIn.value = '';
+        statusIn.value = 'pending';
+        priorityIn.value = '0';
+        loadTasks();
+    });
+
+    on(listEl, 'click', async (e) =>
+    {
+        const btn = e.target.closest('button');
+        if (!btn) return;
+        const id = btn.dataset.id;
+
+        if (btn.classList.contains('task-del-btn'))
+        {
+            await fetch('/api/tasks/' + id, { method: 'DELETE' });
+            loadTasks();
+        }
+        else if (btn.classList.contains('task-cycle-btn'))
+        {
+            const next = { pending: 'in-progress', 'in-progress': 'done', done: 'pending' };
+            await fetch('/api/tasks/' + id, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ status: next[btn.dataset.status] || 'pending' }),
+            });
+            loadTasks();
+        }
+        else if (btn.classList.contains('task-edit-btn'))
+        {
+            editingId = id;
+            const row = btn.closest('.task-row');
+            const title = row.querySelector('strong').textContent;
+            titleIn.value = title;
+            form.querySelector('button[type="submit"]').textContent = 'Save';
+            titleIn.focus();
+        }
+    });
+
+    let searchTimer;
+    on(searchIn, 'input', () => { clearTimeout(searchTimer); searchTimer = setTimeout(loadTasks, 300); });
+    on(scopeIn, 'change', loadTasks);
+
+    on(delAllBtn, 'click', async () =>
+    {
+        await fetch('/api/tasks', { method: 'DELETE' });
+        loadTasks();
+    });
+
+    loadTasks();
+}
+
+/* ------------------------------------------------------------------ */
+/*  Cookie Explorer Playground                                         */
+/* ------------------------------------------------------------------ */
+function initCookieExplorer()
+{
+    const form      = $('#cookieForm');
+    const nameIn    = $('#cookieName');
+    const valueIn   = $('#cookieValue');
+    const httpOnlyIn = $('#cookieHttpOnly');
+    const sameSiteIn = $('#cookieSameSite');
+    const maxAgeIn  = $('#cookieMaxAge');
+    const refreshBtn = $('#cookieRefresh');
+    const jarEl     = $('#cookieJar');
+    const resultEl  = $('#cookieResult');
+
+    if (!form) return;
+
+    async function loadCookies()
+    {
+        try
+        {
+            const r = await fetch('/api/cookies');
+            const data = await r.json();
+            showJsonResult(resultEl, data);
+
+            const all = Object.entries(data.cookies || {});
+            const signed = Object.entries(data.signedCookies || {});
+
+            if (!all.length && !signed.length)
+            {
+                jarEl.innerHTML = '<div style="padding:12px;color:#98a0aa">No cookies set — use the form above to create one.</div>';
+                return;
+            }
+
+            let html = '';
+            for (const [name, val] of all)
+            {
+                html += `<div class="cookie-row">` +
+                    `<span class="cookie-name">${escapeHtml(name)}</span>` +
+                    `<span class="cookie-val">${escapeHtml(typeof val === 'object' ? JSON.stringify(val) : String(val))}</span>` +
+                    `<button class="btn small warn cookie-del-btn" data-name="${escapeHtml(name)}">Clear</button>` +
+                    `</div>`;
+            }
+            for (const [name, val] of signed)
+            {
+                html += `<div class="cookie-row">` +
+                    `<span class="cookie-name">${escapeHtml(name)} <span style="color:#5865f2;font-size:11px">signed</span></span>` +
+                    `<span class="cookie-val">${escapeHtml(typeof val === 'object' ? JSON.stringify(val) : String(val))}</span>` +
+                    `<button class="btn small warn cookie-del-btn" data-name="${escapeHtml(name)}">Clear</button>` +
+                    `</div>`;
+            }
+            jarEl.innerHTML = html;
+        }
+        catch (e) { jarEl.innerHTML = `<div style="color:#f66">${escapeHtml(e.message)}</div>`; }
+    }
+
+    on(form, 'submit', async (e) =>
+    {
+        e.preventDefault();
+        const name = nameIn.value.trim();
+        if (!name) return;
+
+        const options = { sameSite: sameSiteIn.value };
+        if (httpOnlyIn.value === 'true') options.httpOnly = true;
+        if (maxAgeIn.value) options.maxAge = Number(maxAgeIn.value);
+
+        await fetch('/api/cookies', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                name,
+                value: valueIn.value,
+                options,
+            }),
+        });
+        nameIn.value = '';
+        valueIn.value = '';
+        maxAgeIn.value = '';
+        loadCookies();
+    });
+
+    on(jarEl, 'click', async (e) =>
+    {
+        const btn = e.target.closest('.cookie-del-btn');
+        if (!btn) return;
+        await fetch('/api/cookies/' + encodeURIComponent(btn.dataset.name), { method: 'DELETE' });
+        loadCookies();
+    });
+
+    on(refreshBtn, 'click', loadCookies);
+
+    loadCookies();
+}

package/documentation/public/scripts/ui.js

@@ -127,11 +127,11 @@ function initTocNavigation()
      */
     function openAncestors(el)
     {
-        let d = el.closest('details.acc');
+        let d = el.closest('details');
         while (d)
         {
             d.open = true;
-            d = d.parentElement ? d.parentElement.closest('details.acc') : null;
+            d = d.parentElement ? d.parentElement.closest('details') : null;
         }
     }
 
@@ -229,7 +229,8 @@ function initTocCollapsible()
     const items = document.querySelectorAll('.toc-collapsible');
     items.forEach(li =>
     {
-        /* Start expanded */
+        /* Skip if already has a toggle button */
+        if (li.querySelector('.toc-collapse-btn')) return;
 
         /* Create toggle button */
         const toggle = document.createElement('button');

package/documentation/public/styles.css

@@ -71,9 +71,23 @@ textarea{min-height:100px}
 
 /* Controls: select and pager */
 .selectWrap{display:inline-flex;align-items:center;gap:8px;background:transparent}
-.selectWrap select, #sortSelect, #sortOrder{appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,0.06);background:var(--panel);color:var(--text);padding:8px 12px;border-radius:10px;font-size:14px;min-width:110px}
-.selectWrap select option, #sortSelect option, #sortOrder option{background:var(--panel);color:var(--text)}
-.selectWrap select:focus, #sortSelect:focus, #sortOrder:focus{outline:none;box-shadow:0 0 0 4px rgba(88,101,242,0.12)}
+
+/* Custom select */
+.custom-select{position:relative;display:inline-block;min-width:110px;font-size:14px;user-select:none}
+.custom-select .cs-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:var(--panel);color:var(--text);cursor:pointer;transition:border-color .15s,box-shadow .15s;white-space:nowrap}
+.custom-select .cs-trigger:hover{border-color:rgba(88,101,242,0.3)}
+.custom-select.open .cs-trigger{border-color:rgba(88,101,242,0.4);box-shadow:0 0 0 4px rgba(88,101,242,0.12)}
+.custom-select .cs-arrow{width:10px;height:10px;flex-shrink:0;transition:transform .2s ease}
+.custom-select.open .cs-arrow{transform:rotate(180deg)}
+.custom-select .cs-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:100%;width:max-content;max-height:220px;overflow-y:auto;background:var(--panel);border:1px solid rgba(255,255,255,0.08);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.5);z-index:200;padding:4px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
+.custom-select.open .cs-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
+.custom-select .cs-option{padding:7px 12px;border-radius:7px;color:var(--text);cursor:pointer;transition:background .1s;white-space:nowrap}
+.custom-select .cs-option:hover{background:rgba(88,101,242,0.15)}
+.custom-select .cs-option.selected{background:rgba(88,101,242,0.2);font-weight:600}
+.custom-select .cs-dropdown::-webkit-scrollbar{width:5px}
+.custom-select .cs-dropdown::-webkit-scrollbar-track{background:transparent}
+.custom-select .cs-dropdown::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
+select.cs-hidden{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none}
 
 .pager{display:flex;align-items:center;gap:10px}
 .pager button{min-width:36px;height:36px;padding:0;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border:1px solid rgba(255,255,255,0.03);display:inline-flex;align-items:center;justify-content:center}
@@ -195,7 +209,7 @@ details.acc[open] > summary:before{transform:rotate(90deg)}
 .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-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}
@@ -331,4 +345,41 @@ body{padding-top:calc(var(--header-height) + 12px)}
 .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}
+.undo-toast-close:hover{opacity:1}
+
+/* -- Documentation sections -------------------------------------------------- */
+.doc-sections-container{margin-top:8px}
+.doc-section{margin-bottom:28px;padding:0}
+.doc-section-header{display:flex;align-items:center;gap:10px;margin-bottom:6px;padding:12px 0 8px}
+.doc-section-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,rgba(88,101,242,0.15),rgba(31,142,253,0.08));color:var(--accent);flex-shrink:0}
+.doc-section-icon svg{width:16px;height:16px;display:block}
+.doc-section-title{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-0.01em}
+.doc-section-divider{height:1px;background:linear-gradient(90deg,var(--accent) 0%,rgba(88,101,242,0.2) 30%,transparent 100%);margin-bottom:14px}
+
+/* Tips list */
+.doc-tips{margin-top:14px;padding:12px 14px;background:linear-gradient(180deg,rgba(88,101,242,0.06),rgba(88,101,242,0.02));border:1px solid rgba(88,101,242,0.1);border-radius:10px}
+.doc-tips-heading{margin:0 0 8px;color:var(--accent);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}
+.tips-list{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px}
+.tips-list li{font-size:13.5px;line-height:1.55;color:var(--text)}
+.tips-list li::marker{color:var(--accent)}
+
+/* Section-level h6 headings */
+.doc-item .acc-body h6{margin:16px 0 6px;font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.04em}
+
+/* ORM Playground */
+.orm-stat-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
+.orm-stat{display:flex;flex-direction:column;align-items:center;padding:10px 18px;border-radius:8px;background:rgba(88,101,242,.08);border:1px solid rgba(88,101,242,.15);min-width:80px}
+.orm-stat-val{font-size:22px;font-weight:800;color:var(--text)}
+.orm-stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
+.orm-toolbar{margin-bottom:4px}
+.task-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
+.task-row:last-child{border-bottom:none}
+.task-info{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;min-width:0}
+.task-info strong{margin-right:4px}
+.task-actions{display:flex;gap:4px;flex-shrink:0;margin-left:8px}
+
+/* Cookie Explorer */
+.cookie-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
+.cookie-row:last-child{border-bottom:none}
+.cookie-name{font-weight:700;color:var(--accent);min-width:80px}
+.cookie-val{flex:1;word-break:break-all;color:var(--text)}

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

@@ -6,22 +6,22 @@
     </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)"/>
+  <!-- Outer block (uncompressed) -->
+  <rect x="6" y="6" width="52" height="52" rx="8" fill="url(#g-comp)" opacity="0.2"/>
+  <!-- Inner compressed block -->
+  <rect x="18" y="18" width="28" height="28" rx="6" 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"/>
+  <line x1="24" y1="28" x2="40" y2="28" stroke="rgba(255,255,255,0.8)" stroke-width="2" stroke-linecap="round"/>
+  <line x1="24" y1="33" x2="38" y2="33" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
+  <line x1="24" y1="38" x2="34" y2="38" stroke="rgba(255,255,255,0.3)" stroke-width="2" stroke-linecap="round"/>
+  <!-- Inward squeeze arrows -->
+  <path d="M10 16l8 8" stroke="url(#g-comp)" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M54 16l-8 8" stroke="url(#g-comp)" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M10 48l8-8" stroke="url(#g-comp)" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M54 48l-8-8" stroke="url(#g-comp)" stroke-width="2.5" stroke-linecap="round"/>
+  <!-- Arrow tips -->
+  <path d="M18 24l-2-6 6 2" fill="none" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M46 24l2-6-6 2" fill="none" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M18 40l-2 6 6-2" fill="none" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M46 40l2 6-6-2" fill="none" stroke="url(#g-comp)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/documentation/public/vendor/icons/database.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-db" 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"/>
+  <!-- Database cylinder -->
+  <ellipse cx="32" cy="14" rx="20" ry="8" fill="url(#g-db)"/>
+  <path d="M12 14v36c0 4.4 9 8 20 8s20-3.6 20-8V14" fill="url(#g-db)" opacity="0.5"/>
+  <ellipse cx="32" cy="50" rx="20" ry="8" fill="url(#g-db)" opacity="0.6"/>
+  <!-- Middle ring -->
+  <path d="M12 32c0 4.4 9 8 20 8s20-3.6 20-8" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="1.5"/>
+  <!-- Top highlight -->
+  <ellipse cx="32" cy="14" rx="14" ry="4.5" fill="rgba(255,255,255,0.15)"/>
+  <!-- Row dots -->
+  <circle cx="26" cy="24" r="2" fill="rgba(255,255,255,0.7)"/>
+  <circle cx="32" cy="24" r="2" fill="rgba(255,255,255,0.5)"/>
+  <circle cx="38" cy="24" r="2" fill="rgba(255,255,255,0.3)"/>
+</svg>

package/documentation/public/vendor/icons/env.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-env" 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"/>
+  <!-- Stacked layers -->
+  <path d="M32 38L6 26l26-14 26 14L32 38z" fill="url(#g-env)" opacity="0.3"/>
+  <path d="M32 46L6 34l26-14 26 14L32 46z" fill="url(#g-env)" opacity="0.55"/>
+  <path d="M32 54L6 42l26-14 26 14L32 54z" fill="url(#g-env)"/>
+  <!-- Top layer highlight -->
+  <path d="M32 48L14 40l18-10 18 10L32 48z" fill="rgba(255,255,255,0.12)"/>
+  <!-- Gear accent on top layer -->
+  <circle cx="32" cy="22" r="4" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="1.5"/>
+  <line x1="32" y1="16" x2="32" y2="18" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="32" y1="26" x2="32" y2="28" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="26" y1="22" x2="28" y2="22" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="36" y1="22" x2="38" y2="22" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

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

@@ -4,20 +4,17 @@
       <stop offset="0" stop-color="#7b61ff"/>
       <stop offset="1" stop-color="#3ec6ff"/>
     </linearGradient>
-    <!-- Cloud silhouette via clipPath so gradient is seamless across the whole shape -->
-    <clipPath id="cloud-clip">
-      <circle cx="18" cy="26" r="11"/>
-      <circle cx="32" cy="17" r="14"/>
-      <circle cx="46" cy="24" r="11"/>
-      <rect x="8" y="28" width="48" height="12" rx="6"/>
-    </clipPath>
   </defs>
   <rect width="64" height="64" rx="8" fill="transparent"/>
-
-  <!-- Large centered cloud filled with flat gradient, clipped to cloud silhouette -->
-  <rect x="0" y="0" width="64" height="64" fill="url(#g-fetch)" clip-path="url(#cloud-clip)"/>
-
-  <!-- Centered down arrow below the cloud -->
-  <path d="M32 43v13" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"/>
-  <path d="M27 56l5 5 5-5" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Globe/sphere -->
+  <circle cx="32" cy="28" r="20" fill="url(#g-fetch)" opacity="0.3"/>
+  <circle cx="32" cy="28" r="16" fill="url(#g-fetch)"/>
+  <!-- Globe meridians -->
+  <ellipse cx="32" cy="28" rx="8" ry="16" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1.5"/>
+  <path d="M16 28h32" stroke="rgba(255,255,255,0.3)" stroke-width="1.5"/>
+  <path d="M18 20h28" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
+  <path d="M18 36h28" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
+  <!-- Download arrow below globe -->
+  <path d="M32 46v12" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M27 54l5 5 5-5" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
+  <defs>
+    <linearGradient id="g-sec" 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 outline -->
+  <path d="M32 6L10 16v16c0 14 10 22 22 26 12-4 22-12 22-26V16L32 6z" fill="url(#g-sec)" opacity="0.25"/>
+  <!-- Shield solid inner -->
+  <path d="M32 12L16 20v12c0 10 7 17 16 20 9-3 16-10 16-20V20L32 12z" fill="url(#g-sec)"/>
+  <!-- Checkmark inside shield -->
+  <path d="M24 33l6 6 10-12" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -6,17 +6,16 @@
     </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"/>
+  <!-- Broadcast tower base -->
+  <path d="M24 58h16" stroke="url(#g-sse)" stroke-width="3" stroke-linecap="round"/>
+  <path d="M28 58L32 28L36 58" fill="url(#g-sse)" opacity="0.8"/>
+  <!-- Tower mast -->
+  <rect x="30" y="22" width="4" height="36" rx="2" fill="url(#g-sse)"/>
+  <!-- Signal dot -->
+  <circle cx="32" cy="20" r="4" fill="url(#g-sse)"/>
+  <circle cx="32" cy="20" r="2" fill="rgba(255,255,255,0.9)"/>
+  <!-- Broadcast waves -->
+  <path d="M22 14a14 14 0 0 1 20 0" fill="none" stroke="url(#g-sse)" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M16 8a22 22 0 0 1 32 0" fill="none" stroke="url(#g-sse)" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
+  <path d="M10 2a30 30 0 0 1 44 0" fill="none" stroke="url(#g-sse)" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
 </svg>

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

@@ -6,30 +6,16 @@
     </linearGradient>
   </defs>
   <rect width="64" height="64" rx="8" fill="transparent"/>
-
-  <!-- Antenna arms from top-center -->
-  <line x1="32" y1="10" x2="22" y2="1" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.92"/>
-  <line x1="32" y1="10" x2="42" y2="1" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.92"/>
-
-  <!-- TV outer body -->
-  <rect x="6" y="10" width="52" height="34" rx="6" fill="url(#g-static)"/>
-
-  <!-- Screen (dark inset) -->
-  <rect x="11" y="14" width="42" height="22" rx="3" fill="rgba(8,10,20,0.5)"/>
-
-  <!-- Static zig-zag noise lines on screen -->
-  <g fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.82">
-    <path d="M13 20 L17 24 L21 20 L25 24 L29 20 L33 24 L37 20 L41 24 L45 20 L49 24"/>
-    <path d="M13 29 L17 33 L21 29 L25 33 L29 29 L33 33 L37 29 L41 33 L45 29 L49 33"/>
-  </g>
-
-  <!-- Control knobs below screen (inside body) -->
-  <circle cx="20" cy="41" r="2.2" fill="rgba(255,255,255,0.55)"/>
-  <circle cx="32" cy="41" r="2.2" fill="rgba(255,255,255,0.25)"/>
-  <circle cx="44" cy="41" r="2.2" fill="rgba(255,255,255,0.15)"/>
-
-  <!-- Stand neck -->
-  <rect x="27" y="44" width="10" height="5" rx="2" fill="url(#g-static)"/>
-  <!-- Stand base -->
-  <rect x="17" y="49" width="30" height="5" rx="3" fill="url(#g-static)"/>
+  <!-- Back file -->
+  <rect x="16" y="10" width="36" height="44" rx="4" fill="url(#g-static)" opacity="0.3"/>
+  <!-- Middle file -->
+  <rect x="12" y="14" width="36" height="44" rx="4" fill="url(#g-static)" opacity="0.55"/>
+  <!-- Front file -->
+  <rect x="8" y="18" width="36" height="44" rx="4" fill="url(#g-static)"/>
+  <!-- Content lines on front file -->
+  <line x1="15" y1="28" x2="37" y2="28" stroke="rgba(255,255,255,0.85)" stroke-width="2.5" stroke-linecap="round"/>
+  <line x1="15" y1="35" x2="33" y2="35" stroke="rgba(255,255,255,0.55)" stroke-width="2.5" stroke-linecap="round"/>
+  <line x1="15" y1="42" x2="28" y2="42" stroke="rgba(255,255,255,0.3)" stroke-width="2.5" stroke-linecap="round"/>
+  <!-- Small play/serve triangle badge -->
+  <path d="M48 46l10 7-10 7z" fill="url(#g-static)" opacity="0.7"/>
 </svg>

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

@@ -6,17 +6,11 @@
     </linearGradient>
   </defs>
   <rect width="64" height="64" rx="8" fill="transparent"/>
-
-  <!-- Hard disk on the right, big thin white arrow pointing into it from the left -->
-  <!-- Hard disk body -->
-  <rect x="34" y="14" width="22" height="36" rx="5" fill="url(#g-stream)"/>
-  <!-- disk platter slot line -->
-  <line x1="38" y1="26" x2="52" y2="26" stroke="rgba(255,255,255,0.25)" stroke-width="1.5" stroke-linecap="round"/>
-  <!-- small read-head dot -->
-  <circle cx="44" cy="38" r="3" fill="rgba(255,255,255,0.2)"/>
-  <circle cx="44" cy="38" r="1.4" fill="rgba(255,255,255,0.55)"/>
-
-  <!-- Big thin white arrow pointing right into the disk -->
-  <path d="M6 32h22" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
-  <path d="M22 25l12 7-12 7" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Document page -->
+  <path d="M14 4h24l14 14v38a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4z" fill="url(#g-stream)"/>
+  <!-- Folded corner -->
+  <path d="M38 4v10a4 4 0 0 0 4 4h10" fill="rgba(255,255,255,0.2)"/>
+  <!-- Bold upload arrow centered on page -->
+  <path d="M32 48V28" stroke="#ffffff" stroke-width="3.5" stroke-linecap="round"/>
+  <path d="M23 36l9-10 9 10" fill="none" stroke="#ffffff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>