arcway 0.1.11 → 0.1.13

package/client/provider.js

@@ -3,7 +3,7 @@ import { WsManager } from './ws.js';
 
 const SOLO_CTX_KEY = '__provider_context__';
 const WS_CTX_KEY = '__ws_context__';
-const DEFAULT_CONFIG = { pathPrefix: '' };
+const DEFAULT_CONFIG = { pathPrefix: '/api' };
 
 const ApiContext = (globalThis[SOLO_CTX_KEY] ??= createContext(DEFAULT_CONFIG));
 const WsContext = (globalThis[WS_CTX_KEY] ??= createContext(null));
@@ -18,8 +18,25 @@ function useWsManager() {
 
 const useSoloContext = useApiContext;
 
-function ApiProvider({ children, pathPrefix = '', headers, wsUrl }) {
-  const config = useMemo(() => ({ pathPrefix, headers, wsUrl }), [pathPrefix, headers, wsUrl]);
+function toWsProtocol(loc, wsPath) {
+  const proto = loc.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${proto}//${loc.host}${wsPath}`;
+}
+
+function resolveWsUrl(input) {
+  if (typeof window === 'undefined') return null;
+  if (!input) return toWsProtocol(window.location, '/ws');
+  if (/^wss?:\/\//.test(input)) return input;
+  if (input.startsWith('/')) return toWsProtocol(window.location, input);
+  return input;
+}
+
+function ApiProvider({ children, pathPrefix = '/api', headers, wsUrl }) {
+  const resolvedWsUrl = useMemo(() => resolveWsUrl(wsUrl), [wsUrl]);
+  const config = useMemo(
+    () => ({ pathPrefix, headers, wsUrl: resolvedWsUrl }),
+    [pathPrefix, headers, resolvedWsUrl],
+  );
 
   const wsManagerRef = useRef(null);
   const wsManager = useMemo(() => {
@@ -27,11 +44,11 @@ function ApiProvider({ children, pathPrefix = '', headers, wsUrl }) {
       wsManagerRef.current.disconnect();
       wsManagerRef.current = null;
     }
-    if (!wsUrl || typeof window === 'undefined') return null;
-    const manager = new WsManager({ url: wsUrl });
+    if (!resolvedWsUrl) return null;
+    const manager = new WsManager({ url: resolvedWsUrl });
     wsManagerRef.current = manager;
     return manager;
-  }, [wsUrl]);
+  }, [resolvedWsUrl]);
 
   useEffect(() => {
     if (wsManager) {
@@ -50,4 +67,12 @@ function ApiProvider({ children, pathPrefix = '', headers, wsUrl }) {
 const Provider = ApiProvider;
 const SoloProvider = ApiProvider;
 
-export { ApiProvider, Provider, SoloProvider, useApiContext, useSoloContext, useWsManager };
+export {
+  ApiProvider,
+  Provider,
+  SoloProvider,
+  resolveWsUrl,
+  useApiContext,
+  useSoloContext,
+  useWsManager,
+};

package/client/router.js

@@ -1,5 +1,3 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
 import {
   createContext,
   useContext,
@@ -9,86 +7,102 @@ import {
   useMemo,
   useRef,
   useTransition,
-  createElement
-} from "react";
+  createElement,
+} from 'react';
 import {
   readClientManifest,
   loadPage,
   matchClientRoute,
   loadLoadingComponents,
-  prefetchRoute
-} from "./page-loader.js";
-import { parseQuery } from "./query.js";
-const ROUTER_CTX_KEY = "__router_context__";
-const RouterContext = globalThis[ROUTER_CTX_KEY] ??= createContext(null);
+  prefetchRoute,
+} from './page-loader.js';
+import { parseQuery } from './query.js';
+
+const ROUTER_CTX_KEY = '__router_context__';
+const RouterContext = (globalThis[ROUTER_CTX_KEY] ??= createContext(null));
+
 function wrapInLayouts(element, layouts) {
   for (let i = layouts.length - 1; i >= 0; i--) {
     element = createElement(layouts[i], null, element);
   }
   return element;
 }
+
 function useRouter() {
   const ctx = useContext(RouterContext);
   if (!ctx) {
-    throw new Error("useRouter must be used within a <Router> provider");
+    throw new Error('useRouter must be used within a <Router> provider');
   }
+
   return useMemo(
     () => ({
       pathname: ctx.pathname,
       params: ctx.params,
-      query: typeof window !== "undefined" ? parseQuery(window.location.search) : {},
+      query: typeof window !== 'undefined' ? parseQuery(window.location.search) : {},
       push: (to, options) => ctx.navigate(to, { ...options, replace: false }),
       replace: (to, options) => ctx.navigate(to, { ...options, replace: true }),
       back: () => {
-        if (typeof window !== "undefined") window.history.back();
+        if (typeof window !== 'undefined') window.history.back();
       },
       forward: () => {
-        if (typeof window !== "undefined") window.history.forward();
+        if (typeof window !== 'undefined') window.history.forward();
       },
       refresh: () => {
-        if (typeof window !== "undefined") window.location.reload();
-      }
+        if (typeof window !== 'undefined') window.location.reload();
+      },
     }),
-    [ctx.pathname, ctx.params, ctx.navigate]
+    // queryVersion bumps on every query-only navigation or same-path popstate,
+    // so memoised consumers (notably `useSearchParams`) re-read the URL.
+    [ctx.pathname, ctx.params, ctx.navigate, ctx.queryVersion],
   );
 }
+
 function usePathname() {
   return useRouter().pathname;
 }
+
 function useParams() {
   return useRouter().params;
 }
+
 function useSearchParams() {
   return useRouter().query;
 }
+
 function Router({
   initialPath,
   initialParams,
   initialComponent,
   initialLayouts,
   initialLoadings,
-  children
+  children,
 }) {
   const [pathname, setPathname] = useState(
-    () => initialPath ?? (typeof window !== "undefined" ? window.location.pathname : "/")
+    () => initialPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/'),
   );
   const [pageState, setPageState] = useState({
     component: initialComponent ?? null,
     layouts: initialLayouts ?? [],
     loadings: initialLoadings ?? [],
-    params: initialParams ?? {}
+    params: initialParams ?? {},
   });
   const [isNavigating, setIsNavigating] = useState(false);
   const [isPending, startTransition] = useTransition();
+  // Bumped on query-only navigations (both push/replace and popstate) so that
+  // `useRouter`/`useSearchParams` consumers re-render even though pathname and
+  // params are unchanged.
+  const [queryVersion, setQueryVersion] = useState(0);
   const manifestRef = useRef(null);
+
   useEffect(() => {
     manifestRef.current = readClientManifest();
     const onManifestUpdate = () => {
       manifestRef.current = readClientManifest();
     };
-    window.addEventListener("manifest-update", onManifestUpdate);
-    return () => window.removeEventListener("manifest-update", onManifestUpdate);
+    window.addEventListener('manifest-update', onManifestUpdate);
+    return () => window.removeEventListener('manifest-update', onManifestUpdate);
   }, []);
+
   const applyLoaded = useCallback((loaded, newPath) => {
     startTransition(() => {
       setPathname(newPath);
@@ -96,71 +110,114 @@ function Router({
         component: loaded.component,
         layouts: loaded.layouts,
         loadings: loaded.loadings,
-        params: loaded.params
+        params: loaded.params,
       });
       setIsNavigating(false);
     });
   }, []);
+
   const navigateToPage = useCallback(
     async (to, options) => {
       const scroll = options?.scroll !== false;
       const replace = options?.replace === true;
-      if (to === pathname) return;
+
+      // `matchClientRoute` only knows how to match pathnames, so any query
+      // string has to be stripped before the lookup. Splitting also lets us
+      // special-case same-path/different-query navigations as a history-only
+      // update — no bundle loading, no scroll reset, no full reload.
+      const qIdx = to.indexOf('?');
+      const pathOnly = qIdx === -1 ? to : to.slice(0, qIdx);
+      const search = qIdx === -1 ? '' : to.slice(qIdx);
+      const currentSearch =
+        typeof window !== 'undefined' ? window.location.search : '';
+
+      if (pathOnly === pathname && search === currentSearch) return;
+
+      if (pathOnly === pathname) {
+        if (replace) {
+          window.history.replaceState(null, '', to);
+        } else {
+          window.history.pushState(null, '', to);
+        }
+        setQueryVersion((v) => v + 1);
+        return;
+      }
+
       const manifest = manifestRef.current;
       if (!manifest) {
         window.location.href = to;
         return;
       }
-      const matched = matchClientRoute(manifest, to);
+
+      const matched = matchClientRoute(manifest, pathOnly);
       if (!matched) {
         window.location.href = to;
         return;
       }
+
       setIsNavigating(true);
       if (replace) {
-        window.history.replaceState(null, "", to);
+        window.history.replaceState(null, '', to);
       } else {
-        window.history.pushState(null, "", to);
+        window.history.pushState(null, '', to);
       }
+
       const targetLoadings = await loadLoadingComponents(matched.route);
       if (targetLoadings.length > 0) {
-        setPathname(to);
+        setPathname(pathOnly);
         setPageState((prev) => ({
           ...prev,
           loadings: targetLoadings,
-          params: matched.params
+          params: matched.params,
         }));
       }
+
       try {
-        const loaded = await loadPage(manifest, to);
+        const loaded = await loadPage(manifest, pathOnly);
         if (!loaded) {
           window.location.href = to;
           return;
         }
-        applyLoaded(loaded, to);
+
+        applyLoaded(loaded, pathOnly);
+        if (search !== currentSearch) setQueryVersion((v) => v + 1);
+
         if (scroll) {
           window.scrollTo(0, 0);
         }
       } catch (err) {
-        console.error("Client navigation failed, falling back to full page load:", err);
+        console.error('Client navigation failed, falling back to full page load:', err);
         window.location.href = to;
       }
     },
-    [pathname, applyLoaded]
+    [pathname, applyLoaded],
   );
+
   useEffect(() => {
     async function onPopState() {
       const newPath = window.location.pathname;
+
+      // Same-path back/forward is a query-only history step (or identical URL);
+      // skip the page load and just force re-render of search-param readers.
+      if (newPath === pathname) {
+        setQueryVersion((v) => v + 1);
+        return;
+      }
+
       const manifest = manifestRef.current;
+
       if (!manifest) {
         setPathname(newPath);
         setPageState((prev) => ({ ...prev, params: {} }));
+        setQueryVersion((v) => v + 1);
         return;
       }
+
       try {
         const loaded = await loadPage(manifest, newPath);
         if (loaded) {
           applyLoaded(loaded, newPath);
+          setQueryVersion((v) => v + 1);
         } else {
           window.location.reload();
         }
@@ -168,60 +225,72 @@ function Router({
         window.location.reload();
       }
     }
-    window.addEventListener("popstate", onPopState);
-    return () => window.removeEventListener("popstate", onPopState);
-  }, [applyLoaded]);
+
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, [pathname, applyLoaded]);
+
   const { component: PageComponent, layouts, loadings, params } = pageState;
+
   let content;
   if (PageComponent) {
-    const inner = isNavigating && loadings.length > 0 ? createElement(loadings.at(-1)) : createElement(PageComponent, params);
+    const inner =
+      isNavigating && loadings.length > 0
+        ? createElement(loadings.at(-1))
+        : createElement(PageComponent, params);
     content = wrapInLayouts(inner, layouts);
   } else {
     content = children;
   }
-  return /* @__PURE__ */ jsxs(
+
+  const progressBar =
+    isNavigating && loadings.length === 0 && !isPending
+      ? createElement('div', {
+          style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '2px',
+            backgroundColor: '#0070f3',
+            zIndex: 99999,
+            animation: 'nav-progress 1s ease-in-out infinite',
+          },
+        })
+      : null;
+
+  return createElement(
     RouterContext.Provider,
     {
       value: {
         pathname,
         params,
-        navigate: navigateToPage
+        navigate: navigateToPage,
+        queryVersion,
       },
-      children: [
-        content,
-        isNavigating && loadings.length === 0 && !isPending && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "fixed",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: "2px",
-              backgroundColor: "#0070f3",
-              zIndex: 99999,
-              animation: "nav-progress 1s ease-in-out infinite"
-            }
-          }
-        )
-      ]
-    }
+    },
+    content,
+    progressBar,
   );
 }
-function Link({ href, children, onClick, scroll, replace, prefetch = "hover", ...rest }) {
+
+function Link({ href, children, onClick, scroll, replace, prefetch = 'hover', ...rest }) {
   const router = useContext(RouterContext);
   const linkRef = useRef(null);
+
   const handleMouseEnter = useCallback(() => {
-    if (prefetch !== "hover") return;
+    if (prefetch !== 'hover') return;
     const manifest = readClientManifest();
     if (manifest) {
       prefetchRoute(manifest, href);
     }
   }, [href, prefetch]);
+
   useEffect(() => {
-    if (prefetch !== "viewport") return;
+    if (prefetch !== 'viewport') return;
     const el = linkRef.current;
-    if (!el || typeof IntersectionObserver === "undefined") return;
+    if (!el || typeof IntersectionObserver === 'undefined') return;
+
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
@@ -235,40 +304,42 @@ function Link({ href, children, onClick, scroll, replace, prefetch = "hover", ..
           }
         }
       },
-      { rootMargin: "200px" }
+      { rootMargin: '200px' },
     );
+
     observer.observe(el);
     return () => observer.disconnect();
   }, [href, prefetch]);
+
   function handleClick(e) {
     if (onClick) onClick(e);
     if (e.defaultPrevented) return;
     if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
     if (e.button !== 0) return;
-    if (rest.target === "_blank" || rest.download !== void 0) return;
+    if (rest.target === '_blank' || rest.download !== undefined) return;
+
     try {
       const url = new URL(href, window.location.origin);
       if (url.origin !== window.location.origin) return;
     } catch {
       return;
     }
+
     e.preventDefault();
     if (router) {
       router.navigate(href, { scroll, replace });
     } else {
-      window.history.pushState(null, "", href);
-      window.dispatchEvent(new PopStateEvent("popstate"));
+      window.history.pushState(null, '', href);
+      window.dispatchEvent(new PopStateEvent('popstate'));
     }
   }
-  return /* @__PURE__ */ jsx("a", { ref: linkRef, href, onClick: handleClick, onMouseEnter: handleMouseEnter, ...rest, children });
+
+  return createElement(
+    'a',
+    { ref: linkRef, href, onClick: handleClick, onMouseEnter: handleMouseEnter, ...rest },
+    children,
+  );
 }
+
 const SoloRouter = Router;
-export {
-  Link,
-  Router,
-  SoloRouter,
-  useParams,
-  usePathname,
-  useRouter,
-  useSearchParams
-};
+export { Link, Router, SoloRouter, useParams, usePathname, useRouter, useSearchParams };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arcway",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "A convention-based framework for building modular monoliths with strict domain boundaries.",
   "license": "MIT",
   "type": "module",
@@ -29,8 +29,10 @@
     "./ui/style-mira.css": "./client/ui/style-mira.css"
   },
   "scripts": {
-    "prepare": "esbuild client/router.jsx --outfile=client/router.js --format=esm --jsx=automatic",
     "test": "vitest run --project=unit",
+    "test:watch": "VITEST_MAX_WORKERS=2 vitest --project=unit",
+    "test:serial": "VITEST_MAX_WORKERS=1 vitest run --project=unit",
+    "test:coverage": "vitest run --project=unit --coverage",
     "test:storybook": "TMPDIR=~/tmp PLAYWRIGHT_BROWSERS_PATH=~/.cache/playwright vitest run --project=storybook",
     "test:all": "TMPDIR=~/tmp PLAYWRIGHT_BROWSERS_PATH=~/.cache/playwright vitest run",
     "format": "prettier --write 'server/**/*.js' 'client/**/*.js' 'tests/**/*.js'",

package/server/pages/build.js

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import fs from 'node:fs/promises';
+import crypto from 'node:crypto';
 import {
   discoverPages,
   discoverLayouts,
@@ -38,65 +39,111 @@ async function buildPages(options) {
   if (pages.length === 0) {
     return { pageCount: 0, outDir, manifest: { entries: [], sharedChunks: [] } };
   }
-  await fs.rm(outDir, { recursive: true, force: true });
-  await fs.mkdir(path.join(outDir, 'server'), { recursive: true });
-  await fs.mkdir(path.join(outDir, 'client'), { recursive: true });
-  let fontFaceCss;
-  let fontPreloadHtml;
-  if (options.fonts && options.fonts.length > 0) {
-    const publicDir = path.join(rootDir, 'public');
-    const fontResult = await resolveFonts(options.fonts, publicDir);
-    if (fontResult.fontFaceCss) fontFaceCss = fontResult.fontFaceCss;
-    if (fontResult.preloadHtml) fontPreloadHtml = fontResult.preloadHtml;
-  }
-  const builds = [
-    buildServerBundles(pages, outDir, serverTarget),
-    buildLayoutServerBundles(layouts, outDir, serverTarget),
-    buildMiddlewareServerBundles(middlewares, outDir, serverTarget),
-    buildClientBundles(
+  // Build into a uniquely-suffixed staging directory and atomically swap into place
+  // only after every step succeeds. If the build fails partway through, the previous
+  // `outDir` is left intact so the server keeps serving the old pages instead of
+  // falling back to 404s. The random suffix keeps concurrent callers against the same
+  // `outDir` (e.g. parallel vitest workers) from racing on the same staging path.
+  const buildDir = outDir + '-next-' + crypto.randomBytes(6).toString('hex');
+  await fs.mkdir(path.join(buildDir, 'server'), { recursive: true });
+  await fs.mkdir(path.join(buildDir, 'client'), { recursive: true });
+  const builds = [];
+  try {
+    let fontFaceCss;
+    let fontPreloadHtml;
+    if (options.fonts && options.fonts.length > 0) {
+      const publicDir = path.join(rootDir, 'public');
+      const fontResult = await resolveFonts(options.fonts, publicDir);
+      if (fontResult.fontFaceCss) fontFaceCss = fontResult.fontFaceCss;
+      if (fontResult.preloadHtml) fontPreloadHtml = fontResult.preloadHtml;
+    }
+    builds.push(
+      buildServerBundles(pages, buildDir, serverTarget),
+      buildLayoutServerBundles(layouts, buildDir, serverTarget),
+      buildMiddlewareServerBundles(middlewares, buildDir, serverTarget),
+      buildClientBundles(
+        pages,
+        layouts,
+        buildDir,
+        clientTarget,
+        minify,
+        rootDir,
+        loadings,
+        minify ? 'production' : 'development',
+        devMode,
+      ),
+      buildErrorPageBundles(errorPages, buildDir, serverTarget),
+      buildCssBundle(pagesDir, buildDir, minify, stylesPath, fontFaceCss),
+    );
+    if (devMode) builds.push(buildHmrRuntimeBundle(buildDir));
+    // Fail fast: `Promise.all` rejects the moment any build throws, so a broken
+    // page produces a prompt error instead of waiting for slower sibling builds
+    // to finish. Cleanup of the staging dir is scheduled in the catch block.
+    const [
+      serverResult,
+      layoutServerResult,
+      middlewareServerResult,
+      clientResult,
+      errorBundles,
+      cssBundle,
+    ] = await Promise.all(builds);
+    const manifest = generateManifest(
       pages,
       layouts,
-      outDir,
-      clientTarget,
-      minify,
-      rootDir,
       loadings,
-      minify ? 'production' : 'development',
-      devMode,
-    ),
-    buildErrorPageBundles(errorPages, outDir, serverTarget),
-    buildCssBundle(pagesDir, outDir, minify, stylesPath, fontFaceCss),
-  ];
-  if (devMode) builds.push(buildHmrRuntimeBundle(outDir));
-  const [
-    serverResult,
-    layoutServerResult,
-    middlewareServerResult,
-    clientResult,
-    errorBundles,
-    cssBundle,
-  ] = await Promise.all(builds);
-  const manifest = generateManifest(
-    pages,
-    layouts,
-    loadings,
-    middlewares,
-    serverResult,
-    layoutServerResult,
-    middlewareServerResult,
-    clientResult,
-  );
-  if (errorBundles.error) manifest.errorBundle = errorBundles.error;
-  if (errorBundles.notFound) manifest.notFoundBundle = errorBundles.notFound;
-  if (cssBundle) manifest.cssBundle = cssBundle;
-  if (fontPreloadHtml) manifest.fontPreloadHtml = fontPreloadHtml;
-  await fs.writeFile(path.join(outDir, 'pages-manifest.json'), JSON.stringify(manifest, null, 2));
-  return {
-    pageCount: pages.length,
-    outDir,
-    manifest,
-    ...(devMode && clientResult.metafile ? { clientMetafile: clientResult.metafile } : {}),
-  };
+      middlewares,
+      serverResult,
+      layoutServerResult,
+      middlewareServerResult,
+      clientResult,
+    );
+    if (errorBundles.error) manifest.errorBundle = errorBundles.error;
+    if (errorBundles.notFound) manifest.notFoundBundle = errorBundles.notFound;
+    if (cssBundle) manifest.cssBundle = cssBundle;
+    if (fontPreloadHtml) manifest.fontPreloadHtml = fontPreloadHtml;
+    await fs.writeFile(
+      path.join(buildDir, 'pages-manifest.json'),
+      JSON.stringify(manifest, null, 2),
+    );
+    await fs.rm(outDir, { recursive: true, force: true });
+    await fs.rename(buildDir, outDir);
+    const clientMetafile =
+      devMode && clientResult.metafile
+        ? rewriteMetafilePaths(clientResult.metafile, buildDir, outDir)
+        : undefined;
+    return {
+      pageCount: pages.length,
+      outDir,
+      manifest,
+      ...(clientMetafile ? { clientMetafile } : {}),
+    };
+  } catch (err) {
+    // esbuild has no cancellation API, so sibling builds may still be writing
+    // into `buildDir` when we land here. Wait for every pending build to settle
+    // before removing the directory — otherwise `fs.rm` races the writes and
+    // fails with ENOTEMPTY. The cleanup is fire-and-forget so the caller sees
+    // the original error immediately; the unique staging-dir suffix means any
+    // lingering files can't pollute a subsequent `buildPages` call.
+    void Promise.allSettled(builds).then(() =>
+      fs.rm(buildDir, { recursive: true, force: true }).catch(() => {}),
+    );
+    throw err;
+  }
+}
+// esbuild's metafile keys reference the outdir it was given. After the staging
+// directory is swapped into place, rewrite those keys to reference the final
+// outDir so HMR diffs across successive builds compare like-for-like paths.
+function rewriteMetafilePaths(metafile, fromDir, toDir) {
+  const outputs = {};
+  for (const [key, value] of Object.entries(metafile.outputs)) {
+    const abs = path.resolve(key);
+    const newKey =
+      abs === fromDir || abs.startsWith(fromDir + path.sep)
+        ? toDir + abs.slice(fromDir.length)
+        : abs;
+    outputs[newKey] = value;
+  }
+  return { ...metafile, outputs };
 }
 import { patternToFileName, layoutDirToFileName } from './build-server.js';
 import { generateHydrationEntry } from './build-client.js';

package/server/pages/hmr.js

@@ -123,7 +123,12 @@ function diffClientMetafiles(oldMeta, newMeta, outDir) {
     }
   }
   if (newFiles.length === 0) {
-    return { changedNavBundles: [], changedCssBundle: null, needsFullReload: false };
+    return {
+      changedNavBundles: [],
+      changedHydrationBundles: [],
+      changedCssBundle: null,
+      needsFullReload: false,
+    };
   }
   const getEntryNames = (meta) => {
     const names = new Set();
@@ -149,28 +154,29 @@ function diffClientMetafiles(oldMeta, newMeta, outDir) {
     }
   }
   const changedNavBundles = [];
+  const changedHydrationBundles = [];
   let changedCssBundle = null;
   for (const f of newFiles) {
     const rel = path.relative(outDir, f).replace(/\\/g, '/');
-    if (/^client\/nav_/.test(rel)) {
+    if (/^client\/nav_.*\.js$/.test(rel)) {
       changedNavBundles.push(rel);
     } else if (rel.endsWith('.css')) {
       changedCssBundle = rel;
-    }
-  }
-  const hasChangedHydrationBundles = newFiles.some((f) => {
-    const rel = path.relative(outDir, f).replace(/\\/g, '/');
-    return (
+    } else if (
       rel.startsWith('client/') &&
-      !rel.startsWith('client/nav_') &&
       !rel.startsWith('client/chunks/') &&
-      !rel.endsWith('.css') &&
       !rel.startsWith('client/hmr/')
-    );
-  });
-  if (hasChangedHydrationBundles && changedNavBundles.length === 0) {
+    ) {
+      changedHydrationBundles.push(rel);
+    }
+  }
+  if (
+    changedNavBundles.length === 0 &&
+    changedHydrationBundles.length === 0 &&
+    !changedCssBundle
+  ) {
     needsFullReload = true;
   }
-  return { changedNavBundles, changedCssBundle, needsFullReload };
+  return { changedNavBundles, changedHydrationBundles, changedCssBundle, needsFullReload };
 }
 export { buildHmrRuntimeBundle, buildHmrScript, diffClientMetafiles, reactRefreshPlugin };

package/server/pages/ssr.js

@@ -63,7 +63,7 @@ function wrapWithProviders(createElement, element, pathname, params) {
   }
   const providerCtx = globalThis[PROVIDER_CTX_KEY];
   if (providerCtx) {
-    const apiValue = { pathPrefix: '' };
+    const apiValue = { pathPrefix: '/api' };
     element = createElement(providerCtx.Provider, { value: apiValue }, element);
   }
   return element;
@@ -94,7 +94,7 @@ function buildHtmlShell({ headHtml, fontPreloadTags, cssLinkTag, bodysuffix }) {
 <html>
 <head>
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 ${fontPreloadTags}
 ${cssLinkTag}
 ${headHtml}
@@ -266,6 +266,7 @@ async function renderErrorPage(
 export {
   buildCssLinkTag,
   buildFontPreloadTags,
+  buildHtmlShell,
   buildLiveReloadScript,
   buildScriptTags,
   loadComponent,

package/server/pages/watcher.js

@@ -24,19 +24,20 @@ function createPagesWatcher(options) {
       const elapsed = Date.now() - start;
       if (handler.emitEvent && prevClientMetafile && result.clientMetafile && !isStructuralChange) {
         const diff = diffClientMetafiles(prevClientMetafile, result.clientMetafile, outDir);
+        const hmrModules = [...diff.changedNavBundles, ...diff.changedHydrationBundles];
         if (diff.needsFullReload) {
           handler.emitEvent({ type: 'reload' });
           log.info(`Pages rebuilt in ${elapsed}ms (full reload)`);
-        } else if (diff.changedNavBundles.length > 0) {
+        } else if (hmrModules.length > 0) {
           const manifestJson = handler.getClientManifestJson?.();
           handler.emitEvent({
             type: 'hmr-update',
-            modules: diff.changedNavBundles,
+            modules: hmrModules,
             timestamp: Date.now(),
             ...(manifestJson ? { manifest: manifestJson } : {}),
           });
           log.info(
-            `Pages rebuilt in ${elapsed}ms (HMR: ${diff.changedNavBundles.length} module(s))`,
+            `Pages rebuilt in ${elapsed}ms (HMR: ${hmrModules.length} module(s))`,
           );
         } else if (diff.changedCssBundle) {
           handler.emitEvent({

package/client/router.jsx

@@ -1,303 +0,0 @@
-import React from 'react';
-import {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useRef,
-  useTransition,
-  createElement,
-} from 'react';
-import {
-  readClientManifest,
-  loadPage,
-  matchClientRoute,
-  loadLoadingComponents,
-  prefetchRoute,
-} from './page-loader.js';
-import { parseQuery } from './query.js';
-
-const ROUTER_CTX_KEY = '__router_context__';
-const RouterContext = (globalThis[ROUTER_CTX_KEY] ??= createContext(null));
-
-function wrapInLayouts(element, layouts) {
-  for (let i = layouts.length - 1; i >= 0; i--) {
-    element = createElement(layouts[i], null, element);
-  }
-  return element;
-}
-
-function useRouter() {
-  const ctx = useContext(RouterContext);
-  if (!ctx) {
-    throw new Error('useRouter must be used within a <Router> provider');
-  }
-
-  return useMemo(
-    () => ({
-      pathname: ctx.pathname,
-      params: ctx.params,
-      query: typeof window !== 'undefined' ? parseQuery(window.location.search) : {},
-      push: (to, options) => ctx.navigate(to, { ...options, replace: false }),
-      replace: (to, options) => ctx.navigate(to, { ...options, replace: true }),
-      back: () => {
-        if (typeof window !== 'undefined') window.history.back();
-      },
-      forward: () => {
-        if (typeof window !== 'undefined') window.history.forward();
-      },
-      refresh: () => {
-        if (typeof window !== 'undefined') window.location.reload();
-      },
-    }),
-    [ctx.pathname, ctx.params, ctx.navigate],
-  );
-}
-
-function usePathname() {
-  return useRouter().pathname;
-}
-
-function useParams() {
-  return useRouter().params;
-}
-
-function useSearchParams() {
-  return useRouter().query;
-}
-
-function Router({
-  initialPath,
-  initialParams,
-  initialComponent,
-  initialLayouts,
-  initialLoadings,
-  children,
-}) {
-  const [pathname, setPathname] = useState(
-    () => initialPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/'),
-  );
-  const [pageState, setPageState] = useState({
-    component: initialComponent ?? null,
-    layouts: initialLayouts ?? [],
-    loadings: initialLoadings ?? [],
-    params: initialParams ?? {},
-  });
-  const [isNavigating, setIsNavigating] = useState(false);
-  const [isPending, startTransition] = useTransition();
-  const manifestRef = useRef(null);
-
-  useEffect(() => {
-    manifestRef.current = readClientManifest();
-    const onManifestUpdate = () => {
-      manifestRef.current = readClientManifest();
-    };
-    window.addEventListener('manifest-update', onManifestUpdate);
-    return () => window.removeEventListener('manifest-update', onManifestUpdate);
-  }, []);
-
-  const applyLoaded = useCallback((loaded, newPath) => {
-    startTransition(() => {
-      setPathname(newPath);
-      setPageState({
-        component: loaded.component,
-        layouts: loaded.layouts,
-        loadings: loaded.loadings,
-        params: loaded.params,
-      });
-      setIsNavigating(false);
-    });
-  }, []);
-
-  const navigateToPage = useCallback(
-    async (to, options) => {
-      const scroll = options?.scroll !== false;
-      const replace = options?.replace === true;
-      if (to === pathname) return;
-
-      const manifest = manifestRef.current;
-      if (!manifest) {
-        window.location.href = to;
-        return;
-      }
-
-      const matched = matchClientRoute(manifest, to);
-      if (!matched) {
-        window.location.href = to;
-        return;
-      }
-
-      setIsNavigating(true);
-      if (replace) {
-        window.history.replaceState(null, '', to);
-      } else {
-        window.history.pushState(null, '', to);
-      }
-
-      const targetLoadings = await loadLoadingComponents(matched.route);
-      if (targetLoadings.length > 0) {
-        setPathname(to);
-        setPageState((prev) => ({
-          ...prev,
-          loadings: targetLoadings,
-          params: matched.params,
-        }));
-      }
-
-      try {
-        const loaded = await loadPage(manifest, to);
-        if (!loaded) {
-          window.location.href = to;
-          return;
-        }
-
-        applyLoaded(loaded, to);
-
-        if (scroll) {
-          window.scrollTo(0, 0);
-        }
-      } catch (err) {
-        console.error('Client navigation failed, falling back to full page load:', err);
-        window.location.href = to;
-      }
-    },
-    [pathname, applyLoaded],
-  );
-
-  useEffect(() => {
-    async function onPopState() {
-      const newPath = window.location.pathname;
-      const manifest = manifestRef.current;
-
-      if (!manifest) {
-        setPathname(newPath);
-        setPageState((prev) => ({ ...prev, params: {} }));
-        return;
-      }
-
-      try {
-        const loaded = await loadPage(manifest, newPath);
-        if (loaded) {
-          applyLoaded(loaded, newPath);
-        } else {
-          window.location.reload();
-        }
-      } catch {
-        window.location.reload();
-      }
-    }
-
-    window.addEventListener('popstate', onPopState);
-    return () => window.removeEventListener('popstate', onPopState);
-  }, [applyLoaded]);
-
-  const { component: PageComponent, layouts, loadings, params } = pageState;
-
-  let content;
-  if (PageComponent) {
-    const inner = isNavigating && loadings.length > 0
-      ? createElement(loadings.at(-1))
-      : createElement(PageComponent, params);
-    content = wrapInLayouts(inner, layouts);
-  } else {
-    content = children;
-  }
-
-  return (
-    <RouterContext.Provider
-      value={{
-        pathname,
-        params,
-        navigate: navigateToPage,
-      }}
-    >
-      {content}
-      {isNavigating && loadings.length === 0 && !isPending && (
-        <div
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '2px',
-            backgroundColor: '#0070f3',
-            zIndex: 99999,
-            animation: 'nav-progress 1s ease-in-out infinite',
-          }}
-        />
-      )}
-    </RouterContext.Provider>
-  );
-}
-
-function Link({ href, children, onClick, scroll, replace, prefetch = 'hover', ...rest }) {
-  const router = useContext(RouterContext);
-  const linkRef = useRef(null);
-
-  const handleMouseEnter = useCallback(() => {
-    if (prefetch !== 'hover') return;
-    const manifest = readClientManifest();
-    if (manifest) {
-      prefetchRoute(manifest, href);
-    }
-  }, [href, prefetch]);
-
-  useEffect(() => {
-    if (prefetch !== 'viewport') return;
-    const el = linkRef.current;
-    if (!el || typeof IntersectionObserver === 'undefined') return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            const manifest = readClientManifest();
-            if (manifest) {
-              prefetchRoute(manifest, href);
-            }
-            observer.unobserve(el);
-            break;
-          }
-        }
-      },
-      { rootMargin: '200px' },
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [href, prefetch]);
-
-  function handleClick(e) {
-    if (onClick) onClick(e);
-    if (e.defaultPrevented) return;
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-    if (e.button !== 0) return;
-    if (rest.target === '_blank' || rest.download !== undefined) return;
-
-    try {
-      const url = new URL(href, window.location.origin);
-      if (url.origin !== window.location.origin) return;
-    } catch {
-      return;
-    }
-
-    e.preventDefault();
-    if (router) {
-      router.navigate(href, { scroll, replace });
-    } else {
-      window.history.pushState(null, '', href);
-      window.dispatchEvent(new PopStateEvent('popstate'));
-    }
-  }
-
-  return (
-    <a ref={linkRef} href={href} onClick={handleClick} onMouseEnter={handleMouseEnter} {...rest}>
-      {children}
-    </a>
-  );
-}
-
-const SoloRouter = Router;
-export { Link, Router, SoloRouter, useParams, usePathname, useRouter, useSearchParams };