zero-http 0.2.0 → 0.2.1

package/documentation/public/index.html

@@ -6,9 +6,9 @@
 	<meta name="viewport" content="width=device-width,initial-scale=1" />
 	<title>zero-http — demo & reference</title>
 	<meta name="description"
-		content="zero-http is a zero-dependency, Express-like HTTP server for Node.js with built-in parsers, static serving, and upload handling." />
+		content="zero-http is a zero-dependency, Express-like HTTP/HTTPS server for Node.js with built-in WebSocket, Server-Sent Events, body parsers, response compression, static serving, and upload handling." />
 	<meta name="keywords"
-		content="nodejs,http,server,express,expressjs,middleware,body-parser,multipart,uploads,static files,fetch,http client" />
+		content="nodejs,http,https,server,express,expressjs,middleware,body-parser,multipart,uploads,static files,fetch,http client,websocket,sse,server-sent events,compression,router" />
 	<meta name="author" content="Anthony Wiedman" />
 
 	<link rel="stylesheet" href="/styles.css" />
@@ -16,11 +16,11 @@
 	<link rel="stylesheet" href="/vendor/prism-toolbar.css" />
 	<link rel="stylesheet" href="/prism-overrides.css" />
 
-	<script src="/vendor/prism.min.js" async></script>
-	<script src="/vendor/prism-json.min.js" async></script>
-	<script src="/vendor/prism-javascript.min.js" async></script>
-	<script src="/vendor/prism-copy-to-clipboard.min.js" async></script>
-	<script src="/vendor/prism-toolbar.min.js" async></script>
+	<script src="/vendor/prism.min.js" defer></script>
+	<script src="/vendor/prism-json.min.js" defer></script>
+	<script src="/vendor/prism-javascript.min.js" defer></script>
+	<script src="/vendor/prism-copy-to-clipboard.min.js" defer></script>
+	<script src="/vendor/prism-toolbar.min.js" defer></script>
 
 	<script src="/scripts/helpers.js" defer></script>
 	<script src="/scripts/uploads.js" defer></script>
@@ -89,6 +89,8 @@
 							<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>
 							<li class="toc-sub-item"><a href="#proxy-test">Proxy test</a></li>
+							<li class="toc-sub-item"><a href="#ws-chat">WebSocket chat</a></li>
+							<li class="toc-sub-item"><a href="#sse-viewer">SSE viewer</a></li>
 						</ul>
 					</li>
 				</ul>
@@ -112,40 +114,80 @@
 										<img class="icon-svg" src="/vendor/icons/zero.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Zero-dependency</h5>
-									<p>Small, Express-like API without external deps.</p>
+									<div class="feature-text"><h5>Zero-dependency</h5>
+									<p>Small, Express-like API without external deps.</p></div>
 								</div>
 								<div class="feature-card">
 									<div class="feature-icon">
 										<img class="icon-svg" src="/vendor/icons/plug.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Pluggable parsers</h5>
-									<p>json(), urlencoded(), text(), raw() built-in.</p>
+									<div class="feature-text"><h5>Pluggable parsers</h5>
+									<p>json(), urlencoded(), text(), raw() built-in.</p></div>
 								</div>
 								<div class="feature-card">
 									<div class="feature-icon">
 										<img class="icon-svg" src="/vendor/icons/stream.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Streaming uploads</h5>
-									<p>Multipart streaming to disk for large files.</p>
+									<div class="feature-text"><h5>Streaming uploads</h5>
+									<p>Multipart streaming to disk for large files.</p></div>
 								</div>
 								<div class="feature-card">
 									<div class="feature-icon">
 										<img class="icon-svg" src="/vendor/icons/static.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Static serving</h5>
-									<p>Correct Content-Type handling and caching options.</p>
+									<div class="feature-text"><h5>Static serving</h5>
+									<p>Content-Type handling and cache options.</p></div>
 								</div>
 								<div class="feature-card">
 									<div class="feature-icon">
 										<img class="icon-svg" src="/vendor/icons/fetch.svg" alt="" aria-hidden="true"
 											width="48" height="48" />
 									</div>
-									<h5>Built-in fetch</h5>
-									<p>Small server-side fetch replacement for HTTP requests.</p>
+									<div class="feature-text"><h5>Built-in fetch</h5>
+									<p>Server-side fetch with TLS passthrough.</p></div>
+								</div>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/websocket.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
+									</div>
+									<div class="feature-text"><h5>WebSocket</h5>
+									<p>RFC 6455 with ping/pong &amp; sub-protocols.</p></div>
+								</div>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/sse.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
+									</div>
+									<div class="feature-text"><h5>Server-Sent Events</h5>
+									<p>Auto-IDs, named events, keep-alive.</p></div>
+								</div>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/compress.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
+									</div>
+									<div class="feature-text"><h5>Compression</h5>
+									<p>Gzip/deflate with threshold &amp; filter.</p></div>
+								</div>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/https.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
+									</div>
+									<div class="feature-text"><h5>HTTPS &amp; TLS</h5>
+									<p>Native HTTPS, req.secure, secure routing.</p></div>
+								</div>
+								<div class="feature-card">
+									<div class="feature-icon">
+										<img class="icon-svg" src="/vendor/icons/router.svg" alt="" aria-hidden="true"
+											width="48" height="48" />
+									</div>
+									<div class="feature-text"><h5>Modular Router</h5>
+									<p>Sub-apps, chaining, introspection.</p></div>
 								</div>
 							</div>
 						</div>
@@ -401,6 +443,56 @@ node test/test.js
 				</div>
 			</div>
 
+			<div class="card play-card constrained">
+				<div class="card-head">
+					<h3 id="ws-chat">WebSocket Chat</h3>
+					<div class="small muted">Connect to the built-in WebSocket server and send messages in real time.</div>
+				</div>
+				<div class="card-body">
+					<div class="playgrid" style="grid-template-columns:1fr">
+						<div class="play" id="wsChat">
+							<div style="display:flex;gap:8px;align-items:end;margin-bottom:8px">
+								<label style="flex:1">Name
+									<input id="wsName" class="textInput" placeholder="anon" value="" />
+								</label>
+								<button id="wsConnectBtn" class="btn primary" type="button">Connect</button>
+								<button id="wsDisconnectBtn" class="btn warn" type="button" disabled>Disconnect</button>
+							</div>
+							<div id="wsMessages" class="result mono" style="min-height:120px;max-height:260px;overflow-y:auto;margin-bottom:8px;white-space:pre-wrap"></div>
+							<div style="display:flex;gap:8px">
+								<input id="wsMsgInput" class="textInput" placeholder="Type a message…" disabled style="flex:1" />
+								<button id="wsSendBtn" class="btn" type="button" disabled>Send</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="card play-card constrained">
+				<div class="card-head">
+					<h3 id="sse-viewer">SSE Event Viewer</h3>
+					<div class="small muted">Subscribe to the Server-Sent Events endpoint and view incoming events live. Use the broadcast form to push a custom event to all subscribers.</div>
+				</div>
+				<div class="card-body">
+					<div class="playgrid" style="grid-template-columns:1fr">
+						<div class="play" id="sseViewer">
+							<div style="display:flex;gap:8px;align-items:end;margin-bottom:8px">
+								<button id="sseConnectBtn" class="btn primary" type="button">Connect</button>
+								<button id="sseDisconnectBtn" class="btn warn" type="button" disabled>Disconnect</button>
+								<span id="sseStatus" class="small muted" style="margin-left:8px">Disconnected</span>
+							</div>
+							<div id="sseMessages" class="result mono" style="min-height:120px;max-height:260px;overflow-y:auto;margin-bottom:8px;white-space:pre-wrap"></div>
+							<div style="display:flex;gap:8px;align-items:end">
+								<label style="flex:1">Broadcast message (JSON)
+									<textarea id="sseBroadcastInput" class="textInput" rows="2">{"hello":"world"}</textarea>
+								</label>
+								<button id="sseBroadcastBtn" class="btn" type="button">Broadcast</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
 			<div class="card footnote" style="max-width:1300px;margin:18px auto;">
 				<p class="muted">This demo doubles as a readable API reference and playground — try uploading files,
 					inspect the returned JSON, and use the playground to test parsers.</p>

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

@@ -12,7 +12,7 @@
  *             highlightAllPre)
  */
 
-/* ── TOC Helpers ───────────────────────────────────────────────────────────── */
+/* -- TOC Helpers ------------------------------------------------------------- */
 
 /**
  * Find a top-level `<li>` in the sidebar TOC whose link matches the given
@@ -56,7 +56,7 @@ function populateTocSub(href, items)
     parentLi.appendChild(sub);
 }
 
-/* ── API Reference ─────────────────────────────────────────────────────────── */
+/* -- API Reference ----------------------------------------------------------- */
 
 /**
  * Render a list of API items into the `#api-items` container and Prism-highlight
@@ -196,7 +196,7 @@ async function loadApiReference()
     } catch (e) { }
 }
 
-/* ── Options Table ─────────────────────────────────────────────────────────── */
+/* -- Options Table ----------------------------------------------------------- */
 
 /**
  * Fetch the options JSON and render a `<table>` into `#options-items`.
@@ -236,7 +236,7 @@ async function loadOptions()
     } catch (e) { console.error('loadOptions error', e); }
 }
 
-/* ── Code Examples ─────────────────────────────────────────────────────────── */
+/* -- Code Examples ----------------------------------------------------------- */
 
 /**
  * Fetch the examples JSON, render each as a collapsible accordion, and

package/documentation/public/scripts/helpers.js

@@ -4,7 +4,7 @@
  * documentation scripts. Loaded first so every other module can rely on these.
  */
 
-/* ── DOM Selectors ─────────────────────────────────────────────────────────── */
+/* -- DOM Selectors ----------------------------------------------------------- */
 
 /**
  * Query a single element by CSS selector.
@@ -34,7 +34,7 @@ function on(el, evt, cb)
     el.addEventListener(evt, cb);
 }
 
-/* ── String Utilities ──────────────────────────────────────────────────────── */
+/* -- String Utilities -------------------------------------------------------- */
 
 /**
  * Escape HTML special characters for safe insertion into the DOM.
@@ -76,7 +76,7 @@ function formatBytes(n)
     return (n / Math.pow(k, i)).toFixed(i ? 1 : 0) + ' ' + sizes[i];
 }
 
-/* ── JSON / Code Rendering ─────────────────────────────────────────────────── */
+/* -- JSON / Code Rendering --------------------------------------------------- */
 
 /**
  * Build a highlighted `<pre>` block containing pretty-printed JSON.
@@ -100,7 +100,7 @@ function showJsonResult(container, obj)
     try { highlightAllPre(); } catch (e) { }
 }
 
-/* ── Prism / Code-Block Helpers ────────────────────────────────────────────── */
+/* -- Prism / Code-Block Helpers ---------------------------------------------- */
 
 /**
  * Trigger Prism syntax highlighting on all `<pre class="code">` blocks, or

package/documentation/public/scripts/playground.js

@@ -1,6 +1,7 @@
 /**
  * playground.js
  * Echo playground forms — JSON, URL-encoded, and plain-text body parsers.
+ * WebSocket chat client and SSE event viewer.
  *
  * Depends on: helpers.js (provides $, on, escapeHtml, showJsonResult,
  *             highlightAllPre)
@@ -68,4 +69,204 @@ function initPlayground()
         playResult.innerHTML = `<pre class="code"><code>${escapeHtml(text)}</code></pre>`;
         try { highlightAllPre(); } catch (e) { }
     });
+
+    /* --- WebSocket Chat --- */
+    initWsChat();
+
+    /* --- SSE Viewer --- */
+    initSseViewer();
+}
+
+/* ------------------------------------------------------------------ */
+/*  WebSocket Chat                                                     */
+/* ------------------------------------------------------------------ */
+function initWsChat()
+{
+    let ws = null;
+    const connectBtn = $('#wsConnectBtn');
+    const disconnectBtn = $('#wsDisconnectBtn');
+    const nameInput = $('#wsName');
+    const msgInput = $('#wsMsgInput');
+    const sendBtn = $('#wsSendBtn');
+    const messages = $('#wsMessages');
+
+    if (!connectBtn) return; // guard if elements not in DOM
+
+    function appendMsg(html)
+    {
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        messages.appendChild(div);
+        messages.scrollTop = messages.scrollHeight;
+    }
+
+    function setConnected(connected)
+    {
+        connectBtn.disabled = connected;
+        disconnectBtn.disabled = !connected;
+        msgInput.disabled = !connected;
+        sendBtn.disabled = !connected;
+        nameInput.disabled = connected;
+    }
+
+    on(connectBtn, 'click', () =>
+    {
+        const name = encodeURIComponent(nameInput.value || 'anon');
+        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${proto}//${location.host}/ws/chat?name=${name}`);
+
+        ws.onopen = () =>
+        {
+            setConnected(true);
+            appendMsg('<span style="color:#6f6">● Connected</span>');
+        };
+
+        ws.onmessage = (e) =>
+        {
+            try
+            {
+                const msg = JSON.parse(e.data);
+                if (msg.type === 'system')
+                {
+                    appendMsg(`<span style="color:#aaa">» ${escapeHtml(msg.text)}</span>`);
+                } else
+                {
+                    appendMsg(`<strong>${escapeHtml(msg.name)}</strong>: ${escapeHtml(msg.text)}`);
+                }
+            } catch (_)
+            {
+                appendMsg(escapeHtml(e.data));
+            }
+        };
+
+        ws.onclose = () =>
+        {
+            setConnected(false);
+            appendMsg('<span style="color:#f66">● Disconnected</span>');
+            ws = null;
+        };
+
+        ws.onerror = () =>
+        {
+            appendMsg('<span style="color:#f66">● Connection error</span>');
+        };
+    });
+
+    on(disconnectBtn, 'click', () =>
+    {
+        if (ws) ws.close();
+    });
+
+    on(sendBtn, 'click', () =>
+    {
+        if (ws && ws.readyState === WebSocket.OPEN && msgInput.value.trim())
+        {
+            ws.send(msgInput.value.trim());
+            msgInput.value = '';
+        }
+    });
+
+    on(msgInput, 'keydown', (e) =>
+    {
+        if (e.key === 'Enter')
+        {
+            e.preventDefault();
+            sendBtn.click();
+        }
+    });
+}
+
+/* ------------------------------------------------------------------ */
+/*  SSE Event Viewer                                                   */
+/* ------------------------------------------------------------------ */
+function initSseViewer()
+{
+    let es = null;
+    const connectBtn = $('#sseConnectBtn');
+    const disconnectBtn = $('#sseDisconnectBtn');
+    const status = $('#sseStatus');
+    const messages = $('#sseMessages');
+    const broadcastBtn = $('#sseBroadcastBtn');
+    const broadcastInput = $('#sseBroadcastInput');
+
+    if (!connectBtn) return; // guard
+
+    function appendMsg(html)
+    {
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        messages.appendChild(div);
+        messages.scrollTop = messages.scrollHeight;
+    }
+
+    function setConnected(connected)
+    {
+        connectBtn.disabled = connected;
+        disconnectBtn.disabled = !connected;
+        status.textContent = connected ? 'Connected' : 'Disconnected';
+        status.style.color = connected ? '#6f6' : '';
+    }
+
+    on(connectBtn, 'click', () =>
+    {
+        es = new EventSource('/sse/events');
+
+        es.onopen = () =>
+        {
+            setConnected(true);
+            appendMsg('<span style="color:#6f6">● SSE connected</span>');
+        };
+
+        es.onmessage = (e) =>
+        {
+            const ts = new Date().toLocaleTimeString();
+            appendMsg(`<span style="color:#aaa">[${ts}]</span> ${escapeHtml(e.data)}`);
+        };
+
+        es.addEventListener('broadcast', (e) =>
+        {
+            const ts = new Date().toLocaleTimeString();
+            appendMsg(`<span style="color:#ff0">[${ts} broadcast]</span> ${escapeHtml(e.data)}`);
+        });
+
+        es.onerror = () =>
+        {
+            if (es.readyState === EventSource.CLOSED)
+            {
+                setConnected(false);
+                appendMsg('<span style="color:#f66">● SSE closed</span>');
+                es = null;
+            } else
+            {
+                appendMsg('<span style="color:#fa0">● SSE reconnecting…</span>');
+            }
+        };
+    });
+
+    on(disconnectBtn, 'click', () =>
+    {
+        if (es) { es.close(); es = null; }
+        setConnected(false);
+        appendMsg('<span style="color:#f66">● Disconnected</span>');
+    });
+
+    on(broadcastBtn, 'click', async () =>
+    {
+        const raw = broadcastInput.value || '{}';
+        let body;
+        try { body = JSON.parse(raw); }
+        catch (err)
+        {
+            appendMsg(`<span style="color:#f66">Invalid JSON: ${escapeHtml(err.message)}</span>`);
+            return;
+        }
+
+        const r = await fetch('/sse/broadcast', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+        });
+        const j = await r.json();
+        appendMsg(`<span style="color:#aaa">» Broadcast sent to ${j.sent} client(s)</span>`);
+    });
 }

package/documentation/public/scripts/ui.js

@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', () =>
     initTocToolbar();
 });
 
-/* ── Feature Tabs ──────────────────────────────────────────────────────────── */
+/* -- Feature Tabs ------------------------------------------------------------ */
 
 /**
  * Wire the feature / server-model tab buttons so clicking one activates
@@ -47,7 +47,7 @@ function initFeatureTabs()
     });
 }
 
-/* ── TOC Sidebar Toggle ────────────────────────────────────────────────────── */
+/* -- TOC Sidebar Toggle ------------------------------------------------------ */
 
 /**
  * Wire the hamburger button to toggle the sidebar on both desktop (persistent)
@@ -106,7 +106,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 +166,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 +179,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,7 +192,7 @@ function initTocToolbar()
         });
     });
 
-    /* ── Expand / Collapse all accordions ─────────────────────────────── */
+    /* -- Expand / Collapse all accordions ------------------------------- */
     if (toggleBtn)
     {
         let expanded = false;

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.
@@ -161,7 +161,7 @@ function showUndo(name)
     });
 }
 
-/* ── Upload Card Factory ───────────────────────────────────────────────────── */
+/* -- Upload Card Factory ----------------------------------------------------- */
 
 /** Inline SVG placeholder for non-image files. */
 const PLACEHOLDER_SVG = 'data:image/svg+xml;utf8,' + encodeURIComponent(
@@ -241,7 +241,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 +310,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,24 @@ 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}
+.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}
 .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}}
+@media(max-width:900px){.feature-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.tabs-nav{flex-wrap:wrap}}
+@media(max-width:500px){.feature-grid{grid-template-columns:1fr}}
 
 @media(max-width:900px){.playgrid{grid-template-columns:1fr}.ui-shell{padding:16px}}