nukejs 0.0.9 → 0.0.11

package/README.md

@@ -23,6 +23,7 @@ npm create nuke@latest
 - [useHtml() — Head Management](#usehtml--head-management)
 - [Configuration](#configuration)
 - [Link Component & Navigation](#link-component--navigation)
+- [useRequest() — URL Params, Query & Headers](#userequest--url-params-query--headers)
 - [Building & Deploying](#building--deploying)
 
 ## Overview
@@ -81,7 +82,7 @@ export default function LikeButton({ postId }: { postId: string }) {
 ### Installation
 
 ```bash
-npm create nuke
+npm create nuke@latest
 ```
 
 ### Running the dev server
@@ -579,6 +580,140 @@ export default function SearchForm() {
 
 ---
 
+## useRequest() — URL Params, Query & Headers
+
+`useRequest()` is a universal hook that exposes the current request's URL parameters, query string, and headers to any component — **server or client, dev or production**.
+
+```tsx
+import { useRequest } from 'nukejs';
+
+const { params, query, headers, pathname, url } = useRequest();
+```
+
+| Field | Type | Description |
+|---|---|---|
+| `url` | `string` | Full URL with query string, e.g. `/blog/hello?lang=en` |
+| `pathname` | `string` | Path only, e.g. `/blog/hello` |
+| `params` | `Record<string, string \| string[]>` | Dynamic route segments |
+| `query` | `Record<string, string \| string[]>` | Query-string params (multi-value keys become arrays) |
+| `headers` | `Record<string, string>` | Request headers |
+
+### Where data comes from
+
+| Environment | Source |
+|---|---|
+| Server (SSR) | Live `IncomingMessage` — all headers including `cookie` |
+| Client (browser) | `__n_data` blob embedded in the page + `window.location` (reactive) |
+
+On the client the hook is **reactive**: it re-reads on every SPA navigation so `query`, `pathname`, and `params` stay current without a page reload.
+
+> **Security:** `headers` on the client never contains `cookie`, `authorization`, `proxy-authorization`, `set-cookie`, or `x-api-key`. These are stripped before embedding in the HTML document so credentials cannot leak into cached or logged pages.
+
+### Reading route params and query string
+
+```tsx
+// app/pages/blog/[slug].tsx
+// URL: /blog/hello-world?tab=comments
+import { useRequest } from 'nukejs';
+
+export default function BlogPost() {
+  const { params, query } = useRequest();
+  const slug = params.slug as string;
+  const tab  = (query.tab as string) ?? 'overview';
+
+  return (
+    <article>
+      <h1>{slug}</h1>
+      <p>Active tab: {tab}</p>
+    </article>
+  );
+}
+```
+
+### Catch-all routes
+
+```tsx
+// app/pages/docs/[...path].tsx
+// URL: /docs/api/hooks → path = ['api', 'hooks']
+import { useRequest } from 'nukejs';
+
+export default function Docs() {
+  const { params } = useRequest();
+  const segments = params.path as string[];
+
+  return <nav>{segments.join(' › ')}</nav>;
+}
+```
+
+### Reading headers in a server component
+
+```tsx
+// app/pages/dashboard.tsx
+import { useRequest } from 'nukejs';
+
+export default async function Dashboard() {
+  const { headers } = useRequest();
+
+  // Forward the session cookie to an internal API call
+  const data = await fetch('http://localhost:3000/api/me', {
+    headers: { cookie: headers['cookie'] ?? '' },
+  }).then(r => r.json());
+
+  return <main>{data.name}</main>;
+}
+```
+
+### Building `useI18n` on top
+
+`useRequest` is designed as a primitive for higher-level hooks. Here is a complete `useI18n` implementation that works in both server and client components:
+
+```tsx
+// app/hooks/useI18n.ts
+import { useRequest } from 'nukejs';
+
+const translations = {
+  en: { welcome: 'Welcome', signIn: 'Sign in' },
+  fr: { welcome: 'Bienvenue', signIn: 'Se connecter' },
+  de: { welcome: 'Willkommen', signIn: 'Anmelden' },
+} as const;
+type Locale = keyof typeof translations;
+
+function detectLocale(
+  query: Record<string, string | string[]>,
+  acceptLanguage = '',
+): Locale {
+  // ?lang=fr in the URL takes priority over the browser header
+  const fromQuery = query.lang as string | undefined;
+  if (fromQuery && fromQuery in translations) return fromQuery as Locale;
+
+  const fromHeader = acceptLanguage
+    .split(',')[0]?.split('-')[0]?.trim().toLowerCase();
+  if (fromHeader && fromHeader in translations) return fromHeader as Locale;
+
+  return 'en';
+}
+
+export function useI18n() {
+  const { query, headers } = useRequest();
+  const locale = detectLocale(query, headers['accept-language']);
+  return { t: translations[locale], locale };
+}
+```
+
+```tsx
+// app/pages/index.tsx
+import { useI18n } from '../hooks/useI18n';
+
+export default function Home() {
+  const { t } = useI18n();
+  return <h1>{t.welcome}</h1>;
+}
+```
+
+Changing `?lang=fr` in the URL re-renders client components automatically.
+
+---
+
 ## Building & Deploying
 
 ### Node.js server

package/dist/Link.d.ts

@@ -1,6 +1,12 @@
-declare const Link: ({ href, children, className }: {
+interface LinkProps {
     href: string;
     children: React.ReactNode;
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}
+/**
+ * Client-side navigation link.
+ * Intercepts clicks and delegates to useRouter().push() so the SPA router
+ * handles the transition without a full page reload.
+ */
+declare const Link: ({ href, children, className }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/dist/Link.js

@@ -2,10 +2,10 @@
 import { jsx } from "react/jsx-runtime";
 import useRouter from "./use-router.js";
 const Link = ({ href, children, className }) => {
-  const r = useRouter();
+  const { push } = useRouter();
   const handleClick = (e) => {
     e.preventDefault();
-    r.push(href);
+    push(href);
   };
   return /* @__PURE__ */ jsx("a", { href, onClick: handleClick, className, children });
 };

package/dist/Link.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/Link.tsx"],
-  "sourcesContent": ["\"use client\"\r\nimport useRouter from \"./use-router\"\r\n\r\nconst Link = ({ href, children, className }: {\r\n    href: string;\r\n    children: React.ReactNode;\r\n    className?: string;\r\n}) => {\r\n    const r = useRouter()\r\n    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\r\n        e.preventDefault();\r\n        r.push(href);\r\n    }\r\n    return (\r\n        <a href={href} onClick={handleClick} className={className} >\r\n            {children}\r\n        </a >\r\n    );\r\n};\r\n\r\nexport default Link;\r\n"],
-  "mappings": ";AAcQ;AAbR,OAAO,eAAe;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,UAAU,UAAU,MAIpC;AACF,QAAM,IAAI,UAAU;AACpB,QAAM,cAAc,CAAC,MAA2C;AAC5D,MAAE,eAAe;AACjB,MAAE,KAAK,IAAI;AAAA,EACf;AACA,SACI,oBAAC,OAAE,MAAY,SAAS,aAAa,WAChC,UACL;AAER;AAEA,IAAO,eAAQ;",
+  "sourcesContent": ["\"use client\";\r\nimport useRouter from \"./use-router\";\r\n\r\ninterface LinkProps {\r\n  href: string;\r\n  children: React.ReactNode;\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Client-side navigation link.\r\n * Intercepts clicks and delegates to useRouter().push() so the SPA router\r\n * handles the transition without a full page reload.\r\n */\r\nconst Link = ({ href, children, className }: LinkProps) => {\r\n  const { push } = useRouter();\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\r\n    e.preventDefault();\r\n    push(href);\r\n  };\r\n\r\n  return (\r\n    <a href={href} onClick={handleClick} className={className}>\r\n      {children}\r\n    </a>\r\n  );\r\n};\r\n\r\nexport default Link;"],
+  "mappings": ";AAuBI;AAtBJ,OAAO,eAAe;AAatB,MAAM,OAAO,CAAC,EAAE,MAAM,UAAU,UAAU,MAAiB;AACzD,QAAM,EAAE,KAAK,IAAI,UAAU;AAE3B,QAAM,cAAc,CAAC,MAA2C;AAC9D,MAAE,eAAe;AACjB,SAAK,IAAI;AAAA,EACX;AAEA,SACE,oBAAC,OAAE,MAAY,SAAS,aAAa,WAClC,UACH;AAEJ;AAEA,IAAO,eAAQ;",
   "names": []
 }

package/dist/app.js

@@ -68,7 +68,7 @@ const server = http.createServer(async (req, res) => {
       );
     if (matchApiPrefix(url, apiPrefixes))
       return await handleApiRoute(url, req, res);
-    return await serverSideRender(url, res, PAGES_DIR, isDev);
+    return await serverSideRender(url, res, PAGES_DIR, isDev, req);
   } catch (error) {
     log.error("Server error:", error);
     res.statusCode = 500;

package/dist/app.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/app.ts"],
-  "sourcesContent": ["/**\r\n * app.ts \u2014 NukeJS Dev Server Entry Point\r\n *\r\n * This is the runtime that powers `nuke dev`. It:\r\n *   1. Loads your nuke.config.ts (or uses sensible defaults)\r\n *   2. Discovers API route prefixes from your server directory\r\n *   3. Starts an HTTP server that handles:\r\n *        app/public/**          \u2014 static files (highest priority, via middleware)\r\n *        /__hmr_ping            \u2014 heartbeat for HMR reconnect polling\r\n *        /__react.js            \u2014 bundled React + ReactDOM (resolved via importmap)\r\n *        /__n.js                \u2014 NukeJS client runtime bundle\r\n *        /__client-component/*  \u2014 on-demand \"use client\" component bundles\r\n *        server/**              \u2014 API route handlers from serverDir\r\n *        /**                    \u2014 SSR pages from app/pages (lowest priority)\r\n *   4. Watches for file changes and broadcasts HMR events to connected browsers\r\n *\r\n * In production (ENVIRONMENT=production), HMR and all file watching are skipped.\r\n */\r\n\r\nimport http from 'http';\r\nimport path from 'path';\r\nimport { existsSync, watch } from 'fs';\r\n\r\nimport { ansi, c, log, setDebugLevel, getDebugLevel } from './logger';\r\nimport { loadConfig } from './config';\r\nimport { discoverApiPrefixes, matchApiPrefix, createApiHandler } from './http-server';\r\nimport { loadMiddleware, runMiddleware } from './middleware-loader';\r\nimport { serveReactBundle, serveNukeBundle, serveClientComponentBundle } from './bundler';\r\nimport { serverSideRender } from './ssr';\r\nimport { watchDir, broadcastRestart } from './hmr';\r\n\r\n// \u2500\u2500\u2500 Environment \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\nconst isDev = process.env.ENVIRONMENT !== 'production';\r\n\r\n// React must live on globalThis so dynamically-imported page modules can share\r\n// the same React instance without each bundling their own copy.\r\nif (isDev) {\r\n  const React = await import('react');\r\n  (global as any).React = React;\r\n}\r\n\r\n// \u2500\u2500\u2500 Config & paths \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\nconst config = await loadConfig();\r\nsetDebugLevel(config.debug ?? false);\r\n\r\nconst PAGES_DIR = path.resolve('./app/pages');\r\nconst SERVER_DIR = path.resolve(config.serverDir);\r\nconst PORT       = config.port;\r\n\r\nlog.info('Configuration loaded:');\r\nlog.info(`  - Pages directory: ${PAGES_DIR}`);\r\nlog.info(`  - Server directory: ${SERVER_DIR}`);\r\nlog.info(`  - Port: ${PORT}`);\r\nlog.info(`  - Debug level: ${String(getDebugLevel())}`);\r\nlog.info(`  - Dev mode: ${String(isDev)}`);\r\n\r\n// \u2500\u2500\u2500 API route discovery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n// Start watching the app directory for HMR.\r\nif (isDev) watchDir(path.resolve('./app'), 'App');\r\n\r\n// apiPrefixes is a live, mutable array. In dev, we splice it in-place whenever\r\n// the server directory changes so handlers always see the latest routes without\r\n// a full restart.\r\nconst apiPrefixes    = discoverApiPrefixes(SERVER_DIR);\r\nconst handleApiRoute = createApiHandler({ apiPrefixes, port: PORT, isDev });\r\n\r\n\r\nlog.info(`API prefixes discovered: ${apiPrefixes.length === 0 ? 'none' : ''}`);\r\napiPrefixes.forEach(p => {\r\n  log.info(`  - ${p.prefix || '/'} -> ${path.relative(process.cwd(), p.directory)}`);\r\n});\r\n\r\n// \u2500\u2500\u2500 Full-restart file watchers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n// Some changes can't be hot-patched: middleware exports change the request\r\n// pipeline, and nuke.config.ts may change the port or serverDir.  On change we\r\n// broadcast a 'restart' SSE event so browsers reconnect automatically, then\r\n// exit with code 75 \u2014 the CLI watches for this to respawn the process.\r\nif (isDev) {\r\n  const RESTART_EXIT_CODE = 75;\r\n  const restartFiles = [\r\n    path.resolve('./middleware.ts'),\r\n    path.resolve('./nuke.config.ts'),\r\n  ];\r\n\r\n  for (const filePath of restartFiles) {\r\n    if (!existsSync(filePath)) continue;\r\n    watch(filePath, async () => {\r\n      log.info(`[Server] ${path.basename(filePath)} changed \u2014 restarting...`);\r\n      await broadcastRestart();\r\n      process.exit(RESTART_EXIT_CODE);\r\n    });\r\n  }\r\n}\r\n\r\n// \u2500\u2500\u2500 Middleware \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n// Loads built-in middleware (HMR SSE/JS endpoints) and the user-supplied\r\n// middleware.ts from the project root (if it exists).\r\nawait loadMiddleware();\r\n\r\n// \u2500\u2500\u2500 Request handler \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\nconst server = http.createServer(async (req, res) => {\r\n  try {\r\n    // Middleware runs first.  If it calls res.end() the request is fully\r\n    // handled and we bail out immediately.\r\n    const middlewareHandled = await runMiddleware(req, res);\r\n    if (middlewareHandled) return;\r\n\r\n    const url = req.url || '/';\r\n\r\n    // \u2500\u2500 Internal NukeJS routes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n    // Framework files are checked before server routes so a user route can\r\n    // never accidentally shadow /__n.js, /__react.js, etc.\r\n\r\n    // Heartbeat polled by the HMR client to know when the server is back up.\r\n    if (url === '/__hmr_ping') {\r\n      res.setHeader('Content-Type', 'text/plain');\r\n      res.end('ok');\r\n      return;\r\n    }\r\n\r\n    // Unified React bundle (react + react-dom/client + react/jsx-runtime).\r\n    // Resolved by the importmap injected into every SSR page, so client\r\n    // components never bundle React themselves.\r\n    if (url === '/__react.js')\r\n      return await serveReactBundle(res);\r\n\r\n    // NukeJS browser runtime: initRuntime, SPA navigation, partial hydration.\r\n    if (url === '/__n.js')\r\n      return await serveNukeBundle(res);\r\n\r\n    // On-demand bundles for individual \"use client\" components.\r\n    // Strip the prefix, the .js extension, and any query string (cache buster).\r\n    if (url.startsWith('/__client-component/'))\r\n      return await serveClientComponentBundle(\r\n        url.slice(20).split('?')[0].replace('.js', ''),\r\n        res,\r\n      );\r\n\r\n    // \u2500\u2500 Server routes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n    // API routes from serverDir \u2014 checked after framework files, before pages.\r\n    if (matchApiPrefix(url, apiPrefixes))\r\n      return await handleApiRoute(url, req, res);\r\n\r\n    // \u2500\u2500 Page SSR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n    // Nothing above matched \u2014 render a page from app/pages.\r\n    return await serverSideRender(url, res, PAGES_DIR, isDev);\r\n\r\n  } catch (error) {\r\n    log.error('Server error:', error);\r\n    res.statusCode = 500;\r\n    res.end('Internal server error');\r\n  }\r\n});\r\n\r\n// \u2500\u2500\u2500 Port binding \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n/**\r\n * Tries to listen on `port`.  If the port is already in use (EADDRINUSE),\r\n * increments and tries the next port until one is free.\r\n *\r\n * Returns the port that was actually bound.\r\n */\r\nfunction tryListen(port: number): Promise<number> {\r\n  return new Promise((resolve, reject) => {\r\n    server.once('error', (err: NodeJS.ErrnoException) => {\r\n      if (err.code === 'EADDRINUSE') resolve(tryListen(port + 1));\r\n      else reject(err);\r\n    });\r\n    server.listen(port, () => resolve(port));\r\n  });\r\n}\r\n\r\n// \u2500\u2500\u2500 Startup banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n/**\r\n * Renders the \u2622\uFE0F NukeJS startup box to stdout.\r\n * Uses box-drawing characters and ANSI colour codes for a clean terminal UI.\r\n */\r\nfunction printStartupBanner(port: number, isDev: boolean): void {\r\n  const url        = `http://localhost:${port}`;\r\n  const level      = getDebugLevel();\r\n  const debugStr   = String(level);\r\n  const innerWidth = 42;\r\n  const line       = '\u2500'.repeat(innerWidth);\r\n\r\n  /** Right-pads `text` to `width` columns, ignoring invisible ANSI sequences. */\r\n  const pad = (text: string, width: number) => {\r\n    const visibleLen = text.replace(/\\x1b\\[[0-9;]*m/g, '').length;\r\n    return text + ' '.repeat(Math.max(0, width - visibleLen));\r\n  };\r\n\r\n  const row   = (content: string, w = 2) =>\r\n    `${ansi.gray}\u2502${ansi.reset} ${pad(content, innerWidth - w)} ${ansi.gray}\u2502${ansi.reset}`;\r\n  const label = (key: string, val: string) =>\r\n    row(`${c('gray', key)}  ${val}`);\r\n\r\n  console.log('');\r\n  console.log(`${ansi.gray}\u250C${line}\u2510${ansi.reset}`);\r\n  console.log(row(`  ${c('red', '\u2622\uFE0F        nukejs ', true)}`, 1));\r\n  console.log(`${ansi.gray}\u251C${line}\u2524${ansi.reset}`);\r\n  console.log(label('  Local  ', c('cyan', url, true)));\r\n  console.log(`${ansi.gray}\u251C${line}\u2524${ansi.reset}`);\r\n  console.log(label('  Pages  ', c('white', path.relative(process.cwd(), PAGES_DIR))));\r\n  console.log(label('  Server ', c('white', path.relative(process.cwd(), SERVER_DIR))));\r\n  console.log(label('  Dev    ', isDev ? c('green', 'yes') : c('gray', 'no')));\r\n  console.log(label('  Debug  ', level === false\r\n    ? c('gray', 'off')\r\n    : level === true\r\n      ? c('green', 'verbose')\r\n      : c('yellow', debugStr)));\r\n  console.log(`${ansi.gray}\u2514${line}\u2518${ansi.reset}`);\r\n  console.log('');\r\n}\r\n\r\nconst actualPort = await tryListen(PORT);\r\nprintStartupBanner(actualPort, isDev);"],
-  "mappings": "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",
+  "sourcesContent": ["/**\r\n * app.ts \u2014 NukeJS Dev Server Entry Point\r\n *\r\n * This is the runtime that powers `nuke dev`. It:\r\n *   1. Loads your nuke.config.ts (or uses sensible defaults)\r\n *   2. Discovers API route prefixes from your server directory\r\n *   3. Starts an HTTP server that handles:\r\n *        app/public/**          \u2014 static files (highest priority, via middleware)\r\n *        /__hmr_ping            \u2014 heartbeat for HMR reconnect polling\r\n *        /__react.js            \u2014 bundled React + ReactDOM (resolved via importmap)\r\n *        /__n.js                \u2014 NukeJS client runtime bundle\r\n *        /__client-component/*  \u2014 on-demand \"use client\" component bundles\r\n *        server/**              \u2014 API route handlers from serverDir\r\n *        /**                    \u2014 SSR pages from app/pages (lowest priority)\r\n *   4. Watches for file changes and broadcasts HMR events to connected browsers\r\n *\r\n * In production (ENVIRONMENT=production), HMR and all file watching are skipped.\r\n */\r\n\r\nimport http from 'http';\r\nimport path from 'path';\r\nimport { existsSync, watch } from 'fs';\r\n\r\nimport { ansi, c, log, setDebugLevel, getDebugLevel } from './logger';\r\nimport { loadConfig } from './config';\r\nimport { discoverApiPrefixes, matchApiPrefix, createApiHandler } from './http-server';\r\nimport { loadMiddleware, runMiddleware } from './middleware-loader';\r\nimport { serveReactBundle, serveNukeBundle, serveClientComponentBundle } from './bundler';\r\nimport { serverSideRender } from './ssr';\r\nimport { watchDir, broadcastRestart } from './hmr';\r\n\r\n// \u2500\u2500\u2500 Environment \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\nconst isDev = process.env.ENVIRONMENT !== 'production';\r\n\r\n// React must live on globalThis so dynamically-imported page modules can share\r\n// the same React instance without each bundling their own copy.\r\nif (isDev) {\r\n  const React = await import('react');\r\n  (global as any).React = React;\r\n}\r\n\r\n// \u2500\u2500\u2500 Config & paths \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\nconst config = await loadConfig();\r\nsetDebugLevel(config.debug ?? false);\r\n\r\nconst PAGES_DIR = path.resolve('./app/pages');\r\nconst SERVER_DIR = path.resolve(config.serverDir);\r\nconst PORT       = config.port;\r\n\r\nlog.info('Configuration loaded:');\r\nlog.info(`  - Pages directory: ${PAGES_DIR}`);\r\nlog.info(`  - Server directory: ${SERVER_DIR}`);\r\nlog.info(`  - Port: ${PORT}`);\r\nlog.info(`  - Debug level: ${String(getDebugLevel())}`);\r\nlog.info(`  - Dev mode: ${String(isDev)}`);\r\n\r\n// \u2500\u2500\u2500 API route discovery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n// Start watching the app directory for HMR.\r\nif (isDev) watchDir(path.resolve('./app'), 'App');\r\n\r\n// apiPrefixes is a live, mutable array. In dev, we splice it in-place whenever\r\n// the server directory changes so handlers always see the latest routes without\r\n// a full restart.\r\nconst apiPrefixes    = discoverApiPrefixes(SERVER_DIR);\r\nconst handleApiRoute = createApiHandler({ apiPrefixes, port: PORT, isDev });\r\n\r\nlog.info(`API prefixes discovered: ${apiPrefixes.length === 0 ? 'none' : ''}`);\r\napiPrefixes.forEach(p => {\r\n  log.info(`  - ${p.prefix || '/'} -> ${path.relative(process.cwd(), p.directory)}`);\r\n});\r\n\r\n// \u2500\u2500\u2500 Full-restart file watchers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n// Some changes can't be hot-patched: middleware exports change the request\r\n// pipeline, and nuke.config.ts may change the port or serverDir.  On change we\r\n// broadcast a 'restart' SSE event so browsers reconnect automatically, then\r\n// exit with code 75 \u2014 the CLI watches for this to respawn the process.\r\nif (isDev) {\r\n  const RESTART_EXIT_CODE = 75;\r\n  const restartFiles = [\r\n    path.resolve('./middleware.ts'),\r\n    path.resolve('./nuke.config.ts'),\r\n  ];\r\n\r\n  for (const filePath of restartFiles) {\r\n    if (!existsSync(filePath)) continue;\r\n    watch(filePath, async () => {\r\n      log.info(`[Server] ${path.basename(filePath)} changed \u2014 restarting...`);\r\n      await broadcastRestart();\r\n      process.exit(RESTART_EXIT_CODE);\r\n    });\r\n  }\r\n}\r\n\r\n// \u2500\u2500\u2500 Middleware \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n// Loads built-in middleware (HMR SSE/JS endpoints) and the user-supplied\r\n// middleware.ts from the project root (if it exists).\r\nawait loadMiddleware();\r\n\r\n// \u2500\u2500\u2500 Request handler \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\nconst server = http.createServer(async (req, res) => {\r\n  try {\r\n    // Middleware runs first.  If it calls res.end() the request is fully\r\n    // handled and we bail out immediately.\r\n    const middlewareHandled = await runMiddleware(req, res);\r\n    if (middlewareHandled) return;\r\n\r\n    const url = req.url || '/';\r\n\r\n    // \u2500\u2500 Internal NukeJS routes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n    // Framework files are checked before server routes so a user route can\r\n    // never accidentally shadow /__n.js, /__react.js, etc.\r\n\r\n    // Heartbeat polled by the HMR client to know when the server is back up.\r\n    if (url === '/__hmr_ping') {\r\n      res.setHeader('Content-Type', 'text/plain');\r\n      res.end('ok');\r\n      return;\r\n    }\r\n\r\n    // Unified React bundle (react + react-dom/client + react/jsx-runtime).\r\n    // Resolved by the importmap injected into every SSR page, so client\r\n    // components never bundle React themselves.\r\n    if (url === '/__react.js')\r\n      return await serveReactBundle(res);\r\n\r\n    // NukeJS browser runtime: initRuntime, SPA navigation, partial hydration.\r\n    if (url === '/__n.js')\r\n      return await serveNukeBundle(res);\r\n\r\n    // On-demand bundles for individual \"use client\" components.\r\n    // Strip the prefix, the .js extension, and any query string (cache buster).\r\n    if (url.startsWith('/__client-component/'))\r\n      return await serveClientComponentBundle(\r\n        url.slice(20).split('?')[0].replace('.js', ''),\r\n        res,\r\n      );\r\n\r\n    // \u2500\u2500 Server routes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n    // API routes from serverDir \u2014 checked after framework files, before pages.\r\n    if (matchApiPrefix(url, apiPrefixes))\r\n      return await handleApiRoute(url, req, res);\r\n\r\n    // \u2500\u2500 Page SSR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n    // Nothing above matched \u2014 render a page from app/pages.\r\n    return await serverSideRender(url, res, PAGES_DIR, isDev, req);\r\n\r\n  } catch (error) {\r\n    log.error('Server error:', error);\r\n    res.statusCode = 500;\r\n    res.end('Internal server error');\r\n  }\r\n});\r\n\r\n// \u2500\u2500\u2500 Port binding \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n/**\r\n * Tries to listen on `port`.  If the port is already in use (EADDRINUSE),\r\n * increments and tries the next port until one is free.\r\n *\r\n * Returns the port that was actually bound.\r\n */\r\nfunction tryListen(port: number): Promise<number> {\r\n  return new Promise((resolve, reject) => {\r\n    server.once('error', (err: NodeJS.ErrnoException) => {\r\n      if (err.code === 'EADDRINUSE') resolve(tryListen(port + 1));\r\n      else reject(err);\r\n    });\r\n    server.listen(port, () => resolve(port));\r\n  });\r\n}\r\n\r\n// \u2500\u2500\u2500 Startup banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n/**\r\n * Renders the \u2622\uFE0F NukeJS startup box to stdout.\r\n * Uses box-drawing characters and ANSI colour codes for a clean terminal UI.\r\n */\r\nfunction printStartupBanner(port: number, isDev: boolean): void {\r\n  const url        = `http://localhost:${port}`;\r\n  const level      = getDebugLevel();\r\n  const debugStr   = String(level);\r\n  const innerWidth = 42;\r\n  const line       = '\u2500'.repeat(innerWidth);\r\n\r\n  /** Right-pads `text` to `width` columns, ignoring invisible ANSI sequences. */\r\n  const pad = (text: string, width: number) => {\r\n    const visibleLen = text.replace(/\\x1b\\[[0-9;]*m/g, '').length;\r\n    return text + ' '.repeat(Math.max(0, width - visibleLen));\r\n  };\r\n\r\n  const row   = (content: string, w = 2) =>\r\n    `${ansi.gray}\u2502${ansi.reset} ${pad(content, innerWidth - w)} ${ansi.gray}\u2502${ansi.reset}`;\r\n  const label = (key: string, val: string) =>\r\n    row(`${c('gray', key)}  ${val}`);\r\n\r\n  console.log('');\r\n  console.log(`${ansi.gray}\u250C${line}\u2510${ansi.reset}`);\r\n  console.log(row(`  ${c('red', '\u2622\uFE0F        nukejs ', true)}`, 1));\r\n  console.log(`${ansi.gray}\u251C${line}\u2524${ansi.reset}`);\r\n  console.log(label('  Local  ', c('cyan', url, true)));\r\n  console.log(`${ansi.gray}\u251C${line}\u2524${ansi.reset}`);\r\n  console.log(label('  Pages  ', c('white', path.relative(process.cwd(), PAGES_DIR))));\r\n  console.log(label('  Server ', c('white', path.relative(process.cwd(), SERVER_DIR))));\r\n  console.log(label('  Dev    ', isDev ? c('green', 'yes') : c('gray', 'no')));\r\n  console.log(label('  Debug  ', level === false\r\n    ? c('gray', 'off')\r\n    : level === true\r\n      ? c('green', 'verbose')\r\n      : c('yellow', debugStr)));\r\n  console.log(`${ansi.gray}\u2514${line}\u2518${ansi.reset}`);\r\n  console.log('');\r\n}\r\n\r\nconst actualPort = await tryListen(PORT);\r\nprintStartupBanner(actualPort, isDev);"],
+  "mappings": "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",
   "names": ["isDev"]
 }

package/dist/build-common.d.ts

@@ -120,7 +120,12 @@ export interface PageAdapterOptions {
     layoutArrayItems: string;
     /** Pre-rendered HTML per client component ID, computed at build time */
     prerenderedHtml: Record<string, string>;
-    /** Catch-all param names whose runtime values are string[] not string */
+    /**
+     * All dynamic route param names for this page (e.g. ['id', 'slug']).
+     * Used to distinguish route segments from real query-string params at runtime.
+     */
+    routeParamNames: string[];
+    /** Subset of routeParamNames whose values are string[] (catch-all segments) */
     catchAllNames: string[];
 }
 /**
@@ -147,6 +152,7 @@ export interface PageBundleOptions {
     allClientIds: string[];
     layoutPaths: string[];
     prerenderedHtml: Record<string, string>;
+    routeParamNames: string[];
     catchAllNames: string[];
 }
 /**

package/dist/build-common.js

@@ -200,6 +200,7 @@ async function buildPages(pagesDir, staticDir) {
       allClientIds: [...registry.keys()],
       layoutPaths,
       prerenderedHtml: prerenderedRecord,
+      routeParamNames: page.paramNames,
       catchAllNames: page.catchAllNames
     });
     builtPages.push({ ...page, bundleText });
@@ -240,8 +241,11 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
   const apiReq = req as any;
 
   apiReq.body   = await parseBody(req);
-  apiReq.query  = Object.fromEntries(new URL(req.url || '/', 'http://localhost').searchParams);
-  apiReq.params = apiReq.query;
+  // In production, route dynamic segments are injected as query-string keys by
+  // the server entry, so params and query share the same parsed URL values.
+  const qs = Object.fromEntries(new URL(req.url || '/', 'http://localhost').searchParams);
+  apiReq.query  = qs;
+  apiReq.params = qs;
 
   const fn = (mod as any)[method] ?? (mod as any).default;
   if (typeof fn !== 'function') {
@@ -260,6 +264,7 @@ function makePageAdapterSource(opts) {
     allClientIds,
     layoutArrayItems,
     prerenderedHtml,
+    routeParamNames,
     catchAllNames
   } = opts;
   return `import type { IncomingMessage, ServerResponse } from 'http';
@@ -271,7 +276,10 @@ ${layoutImports}
 const CLIENT_COMPONENTS: Record<string, string> = ${JSON.stringify(clientComponentNames)};
 const ALL_CLIENT_IDS: string[] = ${JSON.stringify(allClientIds)};
 const PRERENDERED_HTML: Record<string, string> = ${JSON.stringify(prerenderedHtml)};
-const CATCH_ALL_NAMES = new Set(${JSON.stringify(catchAllNames)});
+// ROUTE_PARAM_NAMES: the dynamic segments baked into this page's URL pattern.
+// Used to separate them from real user-supplied query params at runtime.
+const ROUTE_PARAM_NAMES = new Set<string>(${JSON.stringify(routeParamNames)});
+const CATCH_ALL_NAMES   = new Set<string>(${JSON.stringify(catchAllNames)});
 
 // \u2500\u2500\u2500 html-store (inlined) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 type TitleValue = string | ((prev: string) => string);
@@ -302,6 +310,36 @@ function resolveTitle(ops: TitleValue[], fallback = ''): string {
   return t;
 }
 
+// \u2500\u2500\u2500 request-store (inlined) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const SENSITIVE_HEADERS = new Set([
+  'cookie','authorization','proxy-authorization','set-cookie','x-api-key',
+]);
+// Flattens multi-value headers to strings; keeps all headers including credentials.
+function normaliseHeaders(raw: Record<string, string | string[] | undefined>): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(raw)) {
+    if (v === undefined) continue;
+    out[k] = Array.isArray(v) ? v.join(', ') : v;
+  }
+  return out;
+}
+// Same as normaliseHeaders but strips credentials before embedding in HTML.
+function sanitiseHeaders(raw: Record<string, string | string[] | undefined>): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(raw)) {
+    if (SENSITIVE_HEADERS.has(k.toLowerCase()) || v === undefined) continue;
+    out[k] = Array.isArray(v) ? v.join(', ') : v;
+  }
+  return out;
+}
+const __REQ_KEY__ = Symbol.for('__nukejs_request_store__');
+const __getReq = () => (globalThis as any)[__REQ_KEY__] ?? null;
+const __setReq = (v: any) => { (globalThis as any)[__REQ_KEY__] = v; };
+async function runWithRequestStore<T>(ctx: any, fn: () => Promise<T>): Promise<T> {
+  __setReq(ctx);
+  try { return await fn(); } finally { __setReq(null); }
+}
+
 // \u2500\u2500\u2500 HTML helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function escapeHtml(s: string): string {
   return String(s)
@@ -349,9 +387,46 @@ const VOID_TAGS = new Set([
   'link','meta','param','source','track','wbr',
 ]);
 
+// \u2500\u2500\u2500 Wrapper attribute helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function isWrapperAttr(key: string): boolean {
+  return (
+    key === 'className' ||
+    key === 'style'     ||
+    key === 'id'        ||
+    key.startsWith('data-') ||
+    key.startsWith('aria-')
+  );
+}
+function splitWrapperAttrs(props: any): { wrapperAttrs: Record<string, any>; componentProps: Record<string, any> } {
+  const wrapperAttrs: Record<string, any>   = {};
+  const componentProps: Record<string, any> = {};
+  for (const [key, value] of Object.entries((props || {}) as Record<string, any>)) {
+    if (isWrapperAttr(key)) wrapperAttrs[key]   = value;
+    else                    componentProps[key] = value;
+  }
+  return { wrapperAttrs, componentProps };
+}
+function buildWrapperAttrString(attrs: Record<string, any>): string {
+  const parts = Object.entries(attrs)
+    .map(([key, value]) => {
+      if (key === 'className') key = 'class';
+      if (key === 'style' && typeof value === 'object') {
+        const css = Object.entries(value as Record<string, any>)
+          .map(([p, val]) => \`\${p.replace(/[A-Z]/g, m => \`-\${m.toLowerCase()}\`)}:\${escapeHtml(String(val))}\`)
+          .join(';');
+        return \`style="\${css}"\`;
+      }
+      if (typeof value === 'boolean') return value ? key : '';
+      if (value == null) return '';
+      return \`\${key}="\${escapeHtml(String(value))}"\`;
+    })
+    .filter(Boolean);
+  return parts.length ? ' ' + parts.join(' ') : '';
+}
+
 function serializeProps(value: any): any {
+  if (typeof value === 'function') return undefined;   // must come before the object check
   if (value == null || typeof value !== 'object') return value;
-  if (typeof value === 'function') return undefined;
   if (Array.isArray(value)) return value.map(serializeProps).filter((v: any) => v !== undefined);
   if ((value as any).$$typeof) {
     const { type, props: p } = value as any;
@@ -409,14 +484,16 @@ async function renderNode(node: any, hydrated: Set<string>): Promise<string> {
     const clientId = CLIENT_COMPONENTS[type.name];
     if (clientId) {
       hydrated.add(clientId);
-      const serializedProps = serializeProps(props ?? {});
+      const { wrapperAttrs, componentProps } = splitWrapperAttrs(props);
+      const wrapperAttrStr  = buildWrapperAttrString(wrapperAttrs);
+      const serializedProps = serializeProps(componentProps ?? {});
       let ssrHtml: string;
       try {
-        ssrHtml = __renderToString__(__createElement__(type as any, props || {}));
+        ssrHtml = __renderToString__(__createElement__(type as any, componentProps || {}));
       } catch {
         ssrHtml = PRERENDERED_HTML[clientId] ?? '';
       }
-      return \`<span data-hydrate-id="\${clientId}" data-hydrate-props="\${escapeHtml(JSON.stringify(serializedProps))}">\${ssrHtml}</span>\`;
+      return \`<span data-hydrate-id="\${clientId}"\${wrapperAttrStr} data-hydrate-props="\${escapeHtml(JSON.stringify(serializedProps))}">\${ssrHtml}</span>\`;
     }
     const instance = type.prototype?.isReactComponent ? new (type as any)(props) : null;
     return renderNode(instance ? instance.render() : await (type as Function)(props || {}), hydrated);
@@ -439,19 +516,45 @@ function wrapWithLayouts(element: any): any {
 export default async function handler(req: IncomingMessage, res: ServerResponse): Promise<void> {
   try {
     const parsed = new URL(req.url || '/', 'http://localhost');
+    const url      = req.url || '/';
+    const pathname = parsed.pathname;
+
+    // Route params are injected as query-string keys by the server entry.
+    // Build 'params' only from known route segments, and 'query' from the rest.
     const params: Record<string, string | string[]> = {};
+    ROUTE_PARAM_NAMES.forEach(k => {
+      if (CATCH_ALL_NAMES.has(k)) {
+        params[k] = parsed.searchParams.getAll(k);
+      } else {
+        const v = parsed.searchParams.get(k);
+        if (v !== null) params[k] = v;
+      }
+    });
+
+    const query: Record<string, string | string[]> = {};
     parsed.searchParams.forEach((_, k) => {
-      params[k] = CATCH_ALL_NAMES.has(k)
-        ? parsed.searchParams.getAll(k)
-        : parsed.searchParams.get(k) as string;
+      if (!ROUTE_PARAM_NAMES.has(k)) {
+        const all = parsed.searchParams.getAll(k);
+        query[k] = all.length > 1 ? all : all[0];
+      }
     });
-    const url = req.url || '/';
+
+    const rawHeaders  = req.headers as Record<string, string | string[] | undefined>;
+    // Full headers (including credentials) for server components via the request store.
+    const normHeaders = normaliseHeaders(rawHeaders);
+    // Stripped headers safe for embedding in the HTML document.
+    const safeHeaders = sanitiseHeaders(rawHeaders);
 
     const hydrated = new Set<string>();
-    const wrapped  = wrapWithLayouts({ type: __page__.default, props: params as any, key: null, ref: null });
+    // Merge query params into page props to match dev behaviour (ssr.ts mergedParams).
+    const merged = { ...query, ...params } as any;
+    const wrapped  = wrapWithLayouts({ type: __page__.default, props: merged, key: null, ref: null });
 
     let appHtml = '';
-    const store = await runWithHtmlStore(async () => { appHtml = await renderNode(wrapped, hydrated); });
+    const store = await runWithRequestStore(
+      { url, pathname, params, query, headers: normHeaders },
+      () => runWithHtmlStore(async () => { appHtml = await renderNode(wrapped, hydrated); }),
+    );
 
     const pageTitle = resolveTitle(store.titleOps, 'NukeJS');
     const headScripts = store.script.filter((s: any) => (s.position ?? 'head') === 'head');
@@ -475,7 +578,8 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
     const bodyScriptsHtml = bodyScriptLines.length ? '\\n' + bodyScriptLines.join('\\n') + '\\n' : '';
 
     const runtimeData = JSON.stringify({
-      hydrateIds: [...hydrated], allIds: ALL_CLIENT_IDS, url, params, debug: 'silent',
+      hydrateIds: [...hydrated], allIds: ALL_CLIENT_IDS, url, params,
+      query, headers: safeHeaders, debug: 'silent',
     }).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026');
 
     const html = \`<!DOCTYPE html>
@@ -547,6 +651,7 @@ async function bundlePageHandler(opts) {
     allClientIds,
     layoutPaths,
     prerenderedHtml,
+    routeParamNames,
     catchAllNames
   } = opts;
   const adapterDir = path.dirname(absPath);
@@ -562,6 +667,7 @@ async function bundlePageHandler(opts) {
     allClientIds,
     layoutArrayItems: layoutPaths.map((_, i) => `__layout_${i}__`).join(", "),
     prerenderedHtml,
+    routeParamNames,
     catchAllNames
   }));
   let text;