almostnode 0.2.5 → 0.2.6

package/dist/index.mjs

@@ -11977,6 +11977,123 @@ export default css;
       }
     }
   };
+  const CONFIG_FILE_NAMES = [
+    "/tailwind.config.ts",
+    "/tailwind.config.js",
+    "/tailwind.config.mjs"
+  ];
+  async function loadTailwindConfig(vfs2, root = "/") {
+    let configPath = null;
+    let configContent = null;
+    for (const fileName of CONFIG_FILE_NAMES) {
+      const fullPath = root === "/" ? fileName : `${root}${fileName}`;
+      try {
+        const content = vfs2.readFileSync(fullPath);
+        configContent = typeof content === "string" ? content : content instanceof Uint8Array ? new TextDecoder("utf-8").decode(content) : Buffer.from(content).toString("utf-8");
+        configPath = fullPath;
+        break;
+      } catch {
+        continue;
+      }
+    }
+    if (!configPath || configContent === null) {
+      return {
+        configScript: "",
+        success: true
+      };
+    }
+    try {
+      const jsConfig = stripTypescriptSyntax(configContent);
+      const configObject = extractConfigObject(jsConfig);
+      if (!configObject) {
+        return {
+          configScript: "",
+          success: false,
+          error: "Could not extract config object from tailwind.config"
+        };
+      }
+      const configScript = generateConfigScript(configObject);
+      return {
+        configScript,
+        success: true
+      };
+    } catch (error) {
+      return {
+        configScript: "",
+        success: false,
+        error: `Failed to parse tailwind.config: ${error instanceof Error ? error.message : String(error)}`
+      };
+    }
+  }
+  function stripTypescriptSyntax(content) {
+    let result = content;
+    result = result.replace(/import\s+type\s+\{[^}]*\}\s+from\s+['"][^'"]*['"]\s*;?\s*/g, "");
+    result = result.replace(/import\s+\{[^}]*\}\s+from\s+['"][^'"]*['"]\s*;?\s*/g, "");
+    result = result.replace(/\s+satisfies\s+\w+\s*$/gm, "");
+    result = result.replace(/\s+satisfies\s+\w+\s*;?\s*$/gm, "");
+    result = result.replace(/:\s*Config\s*=/g, " =");
+    result = result.replace(/\s+as\s+const\s*/g, " ");
+    return result;
+  }
+  function extractConfigObject(content) {
+    const exportDefaultMatch = content.match(/export\s+default\s*/);
+    if (!exportDefaultMatch || exportDefaultMatch.index === void 0) {
+      return null;
+    }
+    const startIndex = exportDefaultMatch.index + exportDefaultMatch[0].length;
+    const remaining = content.substring(startIndex);
+    const trimmedRemaining = remaining.trimStart();
+    if (!trimmedRemaining.startsWith("{")) {
+      return null;
+    }
+    const objectStart = startIndex + (remaining.length - trimmedRemaining.length);
+    const objectContent = content.substring(objectStart);
+    let braceCount = 0;
+    let inString = false;
+    let stringChar = "";
+    let escaped = false;
+    let endIndex = -1;
+    for (let i = 0; i < objectContent.length; i++) {
+      const char = objectContent[i];
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (char === "\\") {
+        escaped = true;
+        continue;
+      }
+      if (inString) {
+        if (char === stringChar) {
+          inString = false;
+        }
+        continue;
+      }
+      if (char === '"' || char === "'" || char === "`") {
+        inString = true;
+        stringChar = char;
+        continue;
+      }
+      if (char === "{") {
+        braceCount++;
+      } else if (char === "}") {
+        braceCount--;
+        if (braceCount === 0) {
+          endIndex = i + 1;
+          break;
+        }
+      }
+    }
+    if (endIndex === -1) {
+      return null;
+    }
+    return objectContent.substring(0, endIndex);
+  }
+  function generateConfigScript(configObject) {
+    return `<script>
+  tailwind.config = ${configObject};
+<\/script>`;
+  }
   const isBrowser = typeof window !== "undefined" && typeof window.navigator !== "undefined" && "serviceWorker" in window.navigator;
   async function initEsbuild() {
     if (!isBrowser) return;
@@ -12201,25 +12318,31 @@ const applyVirtualBase = (url) => {
 
 export default function Link({ href, children, ...props }) {
   const handleClick = (e) => {
+    console.log('[Link] Click handler called, href:', href);
+
     if (props.onClick) {
       props.onClick(e);
     }
 
     // Allow cmd/ctrl click to open in new tab
     if (e.metaKey || e.ctrlKey) {
+      console.log('[Link] Meta/Ctrl key pressed, allowing default behavior');
       return;
     }
 
     if (typeof href !== 'string' || !href || href.startsWith('#') || href.startsWith('?')) {
+      console.log('[Link] Skipping navigation for href:', href);
       return;
     }
 
     if (/^(https?:)?\\/\\//.test(href)) {
+      console.log('[Link] External URL, allowing default behavior:', href);
       return;
     }
 
     e.preventDefault();
     const resolvedHref = applyVirtualBase(href);
+    console.log('[Link] Navigating to:', resolvedHref);
     window.history.pushState({}, '', resolvedHref);
     window.dispatchEvent(new PopStateEvent('popstate'));
   };
@@ -12557,6 +12680,305 @@ export default function Head({ children }) {
 
   return null;
 }
+`;
+  const NEXT_IMAGE_SHIM = `
+import React from 'react';
+
+function Image({
+  src,
+  alt = '',
+  width,
+  height,
+  fill,
+  loader,
+  quality = 75,
+  priority,
+  loading,
+  placeholder,
+  blurDataURL,
+  unoptimized,
+  onLoad,
+  onError,
+  style,
+  className,
+  sizes,
+  ...rest
+}) {
+  // Handle src - could be string or StaticImageData object
+  const imageSrc = typeof src === 'object' ? src.src : src;
+
+  // Build style object
+  const imgStyle = { ...style };
+  if (fill) {
+    imgStyle.position = 'absolute';
+    imgStyle.width = '100%';
+    imgStyle.height = '100%';
+    imgStyle.objectFit = imgStyle.objectFit || 'cover';
+    imgStyle.inset = '0';
+  }
+
+  return React.createElement('img', {
+    src: imageSrc,
+    alt,
+    width: fill ? undefined : width,
+    height: fill ? undefined : height,
+    loading: priority ? 'eager' : (loading || 'lazy'),
+    decoding: 'async',
+    style: imgStyle,
+    className,
+    onLoad,
+    onError,
+    ...rest
+  });
+}
+
+export default Image;
+export { Image };
+`;
+  const NEXT_DYNAMIC_SHIM = `
+import React from 'react';
+
+function dynamic(importFn, options = {}) {
+  const {
+    loading: LoadingComponent,
+    ssr = true,
+  } = options;
+
+  // Create a lazy component
+  const LazyComponent = React.lazy(importFn);
+
+  // Wrapper component that handles loading state
+  function DynamicComponent(props) {
+    const fallback = LoadingComponent
+      ? React.createElement(LoadingComponent, { isLoading: true })
+      : null;
+
+    return React.createElement(
+      React.Suspense,
+      { fallback },
+      React.createElement(LazyComponent, props)
+    );
+  }
+
+  return DynamicComponent;
+}
+
+export default dynamic;
+export { dynamic };
+`;
+  const NEXT_SCRIPT_SHIM = `
+import React from 'react';
+
+function Script({
+  src,
+  strategy = 'afterInteractive',
+  onLoad,
+  onReady,
+  onError,
+  children,
+  dangerouslySetInnerHTML,
+  ...rest
+}) {
+  React.useEffect(function() {
+    if (!src && !children && !dangerouslySetInnerHTML) return;
+
+    var script = document.createElement('script');
+
+    if (src) {
+      script.src = src;
+      script.async = strategy !== 'beforeInteractive';
+    }
+
+    Object.keys(rest).forEach(function(key) {
+      script.setAttribute(key, rest[key]);
+    });
+
+    if (children) {
+      script.textContent = children;
+    } else if (dangerouslySetInnerHTML && dangerouslySetInnerHTML.__html) {
+      script.textContent = dangerouslySetInnerHTML.__html;
+    }
+
+    script.onload = function() {
+      if (onLoad) onLoad();
+      if (onReady) onReady();
+    };
+    script.onerror = onError;
+
+    document.head.appendChild(script);
+
+    return function() {
+      if (script.parentNode) {
+        script.parentNode.removeChild(script);
+      }
+    };
+  }, [src]);
+
+  return null;
+}
+
+export default Script;
+export { Script };
+`;
+  const NEXT_FONT_GOOGLE_SHIM = `
+// Track loaded fonts to avoid duplicate style injections
+const loadedFonts = new Set();
+
+/**
+ * Convert font function name to Google Fonts family name
+ * Examples:
+ *   DM_Sans -> DM Sans
+ *   Open_Sans -> Open Sans
+ *   Fraunces -> Fraunces
+ */
+function toFontFamily(fontName) {
+  return fontName.replace(/_/g, ' ');
+}
+
+/**
+ * Inject font CSS into document
+ * - Adds preconnect links for faster font loading
+ * - Loads the font from Google Fonts CDN
+ * - Creates a CSS class that sets the CSS variable
+ */
+function injectFontCSS(fontFamily, variableName, weight, style) {
+  const fontKey = fontFamily + '-' + (variableName || 'default');
+  if (loadedFonts.has(fontKey)) {
+    return;
+  }
+  loadedFonts.add(fontKey);
+
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  // Add preconnect links for faster loading (only once)
+  if (!document.querySelector('link[href="https://fonts.googleapis.com"]')) {
+    const preconnect1 = document.createElement('link');
+    preconnect1.rel = 'preconnect';
+    preconnect1.href = 'https://fonts.googleapis.com';
+    document.head.appendChild(preconnect1);
+
+    const preconnect2 = document.createElement('link');
+    preconnect2.rel = 'preconnect';
+    preconnect2.href = 'https://fonts.gstatic.com';
+    preconnect2.crossOrigin = 'anonymous';
+    document.head.appendChild(preconnect2);
+  }
+
+  // Build Google Fonts URL
+  const escapedFamily = fontFamily.replace(/ /g, '+');
+
+  // Build axis list based on options
+  let axisList = '';
+  const axes = [];
+
+  // Handle italic style
+  if (style === 'italic') {
+    axes.push('ital');
+  }
+
+  // Handle weight - use specific weight or variable range
+  if (weight && weight !== '400' && !Array.isArray(weight)) {
+    // Specific weight requested
+    axes.push('wght');
+    if (style === 'italic') {
+      axisList = ':ital,wght@1,' + weight;
+    } else {
+      axisList = ':wght@' + weight;
+    }
+  } else if (Array.isArray(weight)) {
+    // Multiple weights
+    axes.push('wght');
+    axisList = ':wght@' + weight.join(';');
+  } else {
+    // Default: request common weights for flexibility
+    axisList = ':wght@400;500;600;700';
+  }
+
+  const fontUrl = 'https://fonts.googleapis.com/css2?family=' +
+    escapedFamily + axisList + '&display=swap';
+
+  // Add link element for Google Fonts (if not already present)
+  if (!document.querySelector('link[href*="family=' + escapedFamily + '"]')) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = fontUrl;
+    document.head.appendChild(link);
+  }
+
+  // Create style element for CSS variable at :root level (globally available)
+  // This makes the variable work without needing to apply the class to body
+  if (variableName) {
+    const styleEl = document.createElement('style');
+    styleEl.setAttribute('data-font-var', variableName);
+    styleEl.textContent = ':root { ' + variableName + ': "' + fontFamily + '", ' + (fontFamily.includes('Serif') ? 'serif' : 'sans-serif') + '; }';
+    document.head.appendChild(styleEl);
+  }
+}
+
+/**
+ * Create a font loader function for a specific font
+ */
+function createFontLoader(fontName) {
+  const fontFamily = toFontFamily(fontName);
+
+  return function(options = {}) {
+    const {
+      weight,
+      style = 'normal',
+      subsets = ['latin'],
+      variable,
+      display = 'swap',
+      preload = true,
+      fallback = ['sans-serif'],
+      adjustFontFallback = true
+    } = options;
+
+    // Inject the font CSS
+    injectFontCSS(fontFamily, variable, weight, style);
+
+    // Generate class name from variable (--font-inter -> __font-inter)
+    const className = variable
+      ? variable.replace('--', '__')
+      : '__font-' + fontName.toLowerCase().replace(/_/g, '-');
+
+    return {
+      className,
+      variable: className,
+      style: {
+        fontFamily: '"' + fontFamily + '", ' + fallback.join(', ')
+      }
+    };
+  };
+}
+
+/**
+ * Use a Proxy to dynamically create font loaders for ANY font name
+ * This allows: import { AnyGoogleFont } from "next/font/google"
+ */
+const fontProxy = new Proxy({}, {
+  get(target, prop) {
+    // Handle special properties
+    if (prop === '__esModule') return true;
+    if (prop === 'default') return fontProxy;
+    if (typeof prop !== 'string') return undefined;
+
+    // Create a font loader for this font name
+    return createFontLoader(prop);
+  }
+});
+
+// Export the proxy as both default and named exports
+export default fontProxy;
+
+// Re-export through proxy for named imports
+export const {
+  Fraunces, Inter, DM_Sans, DM_Serif_Text, Roboto, Open_Sans, Lato,
+  Montserrat, Poppins, Playfair_Display, Merriweather, Raleway, Nunito,
+  Ubuntu, Oswald, Quicksand, Work_Sans, Fira_Sans, Barlow, Mulish, Rubik,
+  Noto_Sans, Manrope, Space_Grotesk, Geist, Geist_Mono
+} = fontProxy;
 `;
   NextDevServer = class extends DevServer {
     constructor(vfs2, options2) {
@@ -12569,6 +12991,10 @@ export default function Head({ children }) {
       __publicField(this, "hmrTargetWindow", null);
       __publicField(this, "options");
       __publicField(this, "transformCache", /* @__PURE__ */ new Map());
+      __publicField(this, "pathAliases", /* @__PURE__ */ new Map());
+      __publicField(this, "tailwindConfigScript", "");
+      __publicField(this, "tailwindConfigLoaded", false);
+      __publicField(this, "assetPrefix", "");
       this.options = options2;
       this.pagesDir = options2.pagesDir || "/pages";
       this.appDir = options2.appDir || "/app";
@@ -12578,6 +13004,82 @@ export default function Head({ children }) {
       } else {
         this.useAppRouter = this.hasAppRouter();
       }
+      this.loadPathAliases();
+      this.loadAssetPrefix(options2.assetPrefix);
+    }
+    loadPathAliases() {
+      var _a2;
+      try {
+        const tsconfigPath = "/tsconfig.json";
+        if (!this.vfs.existsSync(tsconfigPath)) {
+          return;
+        }
+        const content = this.vfs.readFileSync(tsconfigPath, "utf-8");
+        const tsconfig = JSON.parse(content);
+        const paths = (_a2 = tsconfig == null ? void 0 : tsconfig.compilerOptions) == null ? void 0 : _a2.paths;
+        if (!paths) {
+          return;
+        }
+        for (const [alias, targets] of Object.entries(paths)) {
+          if (Array.isArray(targets) && targets.length > 0) {
+            const aliasPrefix = alias.replace(/\*$/, "");
+            const targetPrefix = targets[0].replace(/\*$/, "").replace(/^\./, "");
+            this.pathAliases.set(aliasPrefix, targetPrefix);
+          }
+        }
+      } catch (e) {
+      }
+    }
+    loadAssetPrefix(optionValue) {
+      if (optionValue !== void 0) {
+        this.assetPrefix = optionValue.startsWith("/") ? optionValue : `/${optionValue}`;
+        if (this.assetPrefix.endsWith("/")) {
+          this.assetPrefix = this.assetPrefix.slice(0, -1);
+        }
+        return;
+      }
+      try {
+        const configFiles = [
+          "/next.config.ts",
+          "/next.config.js",
+          "/next.config.mjs"
+        ];
+        for (const configPath of configFiles) {
+          if (!this.vfs.existsSync(configPath)) {
+            continue;
+          }
+          const content = this.vfs.readFileSync(configPath, "utf-8");
+          const match = content.match(/assetPrefix\s*:\s*["']([^"']+)["']/);
+          if (match) {
+            let prefix = match[1];
+            if (!prefix.startsWith("/")) {
+              prefix = `/${prefix}`;
+            }
+            if (prefix.endsWith("/")) {
+              prefix = prefix.slice(0, -1);
+            }
+            this.assetPrefix = prefix;
+            return;
+          }
+        }
+      } catch (e) {
+      }
+    }
+    resolvePathAliases(code2, currentFile) {
+      if (this.pathAliases.size === 0) {
+        return code2;
+      }
+      const virtualBase = `/__virtual__/${this.port}`;
+      let result = code2;
+      for (const [alias, target] of this.pathAliases) {
+        const aliasEscaped = alias.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const pattern = new RegExp(`(from\\s*['"]|import\\s*\\(\\s*['"])${aliasEscaped}([^'"]+)(['"])`, "g");
+        result = result.replace(pattern, (match, prefix, path2, quote) => {
+          const resolvedPath2 = `${virtualBase}${target}${path2}`;
+          return `${prefix}${resolvedPath2}${quote}`;
+        });
+      }
+      return result;
     }
     setEnv(key, value) {
       this.options.env = this.options.env || {};
@@ -12593,20 +13095,38 @@ export default function Head({ children }) {
     }
     generateEnvScript() {
       const env = this.options.env || {};
-      const publicEnvVars = Object.entries(env).filter(([key]) => key.startsWith("NEXT_PUBLIC_")).reduce((acc, [k, v]) => ({
-        ...acc,
-        [k]: v
-      }), {});
-      if (Object.keys(publicEnvVars).length === 0) {
-        return "";
+      const publicEnvVars = {};
+      for (const [key, value] of Object.entries(env)) {
+        if (key.startsWith("NEXT_PUBLIC_")) {
+          publicEnvVars[key] = value;
+        }
       }
       return `<script>
-  // NEXT_PUBLIC_* environment variables (injected by NextDevServer)
+  // Environment variables (injected by NextDevServer)
   window.process = window.process || {};
   window.process.env = window.process.env || {};
   Object.assign(window.process.env, ${JSON.stringify(publicEnvVars)});
 <\/script>`;
     }
+    async loadTailwindConfigIfNeeded() {
+      if (this.tailwindConfigLoaded) {
+        return this.tailwindConfigScript;
+      }
+      try {
+        const result = await loadTailwindConfig(this.vfs, this.root);
+        if (result.success) {
+          this.tailwindConfigScript = result.configScript;
+        } else if (result.error) {
+          console.warn("[NextDevServer] Tailwind config warning:", result.error);
+          this.tailwindConfigScript = "";
+        }
+      } catch (error) {
+        console.warn("[NextDevServer] Failed to load tailwind.config:", error);
+        this.tailwindConfigScript = "";
+      }
+      this.tailwindConfigLoaded = true;
+      return this.tailwindConfigScript;
+    }
     hasAppRouter() {
       try {
         if (!this.exists(this.appDir)) return false;
@@ -12626,10 +13146,26 @@ export default function Head({ children }) {
     }
     async handleRequest(method, url2, headers, body) {
       const urlObj = new URL(url2, "http://localhost");
-      const pathname = urlObj.pathname;
+      let pathname = urlObj.pathname;
+      const virtualPrefixMatch = pathname.match(/^\/__virtual__\/\d+/);
+      if (virtualPrefixMatch) {
+        pathname = pathname.slice(virtualPrefixMatch[0].length) || "/";
+      }
+      if (this.assetPrefix && pathname.startsWith(this.assetPrefix)) {
+        const rest = pathname.slice(this.assetPrefix.length);
+        if (rest === "" || rest.startsWith("/")) {
+          pathname = rest || "/";
+          if (pathname.startsWith("//")) {
+            pathname = pathname.slice(1);
+          }
+        }
+      }
       if (pathname.startsWith("/_next/shims/")) {
         return this.serveNextShim(pathname);
       }
+      if (pathname === "/_next/route-info") {
+        return this.serveRouteInfo(urlObj.searchParams.get("pathname") || "/");
+      }
       if (pathname.startsWith("/_next/pages/")) {
         return this.servePageComponent(pathname);
       }
@@ -12649,6 +13185,13 @@ export default function Head({ children }) {
       if (this.needsTransform(pathname) && this.exists(pathname)) {
         return this.transformAndServe(pathname, pathname);
       }
+      const resolvedFile = this.resolveFileWithExtension(pathname);
+      if (resolvedFile) {
+        if (this.needsTransform(resolvedFile)) {
+          return this.transformAndServe(resolvedFile, pathname);
+        }
+        return this.serveFile(resolvedFile);
+      }
       if (this.exists(pathname) && !this.isDirectory(pathname)) {
         return this.serveFile(pathname);
       }
@@ -12670,6 +13213,18 @@ export default function Head({ children }) {
         case "navigation":
           code2 = NEXT_NAVIGATION_SHIM;
           break;
+        case "image":
+          code2 = NEXT_IMAGE_SHIM;
+          break;
+        case "dynamic":
+          code2 = NEXT_DYNAMIC_SHIM;
+          break;
+        case "script":
+          code2 = NEXT_SCRIPT_SHIM;
+          break;
+        case "font/google":
+          code2 = NEXT_FONT_GOOGLE_SHIM;
+          break;
         default:
           return this.notFound(pathname);
       }
@@ -12685,6 +13240,28 @@ export default function Head({ children }) {
         body: buffer2
       };
     }
+    serveRouteInfo(pathname) {
+      const route = this.resolveAppRoute(pathname);
+      const info = route ? {
+        params: route.params,
+        found: true
+      } : {
+        params: {},
+        found: false
+      };
+      const json = JSON.stringify(info);
+      const buffer2 = BufferPolyfill.from(json);
+      return {
+        statusCode: 200,
+        statusMessage: "OK",
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+          "Content-Length": String(buffer2.length),
+          "Cache-Control": "no-cache"
+        },
+        body: buffer2
+      };
+    }
     serveStaticAsset(pathname) {
       const filePath = pathname.replace("/_next/static/", "/");
       if (this.exists(filePath)) {
@@ -13193,7 +13770,8 @@ export default function Head({ children }) {
         if (this.exists(pagePath)) {
           return {
             page: pagePath,
-            layouts
+            layouts,
+            params: {}
           };
         }
       }
@@ -13206,7 +13784,7 @@ export default function Head({ children }) {
         ".js",
         ".ts"
       ];
-      const tryPath = (dirPath, remainingSegments, layouts2) => {
+      const tryPath = (dirPath, remainingSegments, layouts2, params) => {
         for (const ext of extensions) {
           const layoutPath = `${dirPath}/layout${ext}`;
           if (this.exists(layoutPath) && !layouts2.includes(layoutPath)) {
@@ -13222,7 +13800,8 @@ export default function Head({ children }) {
             if (this.exists(pagePath)) {
               return {
                 page: pagePath,
-                layouts: layouts2
+                layouts: layouts2,
+                params
               };
             }
           }
@@ -13231,16 +13810,35 @@ export default function Head({ children }) {
         const [current, ...rest] = remainingSegments;
         const exactPath = `${dirPath}/${current}`;
         if (this.isDirectory(exactPath)) {
-          const result = tryPath(exactPath, rest, layouts2);
+          const result = tryPath(exactPath, rest, layouts2, params);
           if (result) return result;
         }
         try {
           const entries = this.vfs.readdirSync(dirPath);
           for (const entry of entries) {
-            if (entry.startsWith("[") && entry.endsWith("]") && !entry.includes(".")) {
+            if (entry.startsWith("[...") && entry.endsWith("]")) {
               const dynamicPath = `${dirPath}/${entry}`;
               if (this.isDirectory(dynamicPath)) {
-                const result = tryPath(dynamicPath, rest, layouts2);
+                const paramName = entry.slice(4, -1);
+                const newParams = {
+                  ...params,
+                  [paramName]: [
+                    current,
+                    ...rest
+                  ]
+                };
+                const result = tryPath(dynamicPath, [], layouts2, newParams);
+                if (result) return result;
+              }
+            } else if (entry.startsWith("[") && entry.endsWith("]") && !entry.includes(".")) {
+              const dynamicPath = `${dirPath}/${entry}`;
+              if (this.isDirectory(dynamicPath)) {
+                const paramName = entry.slice(1, -1);
+                const newParams = {
+                  ...params,
+                  [paramName]: current
+                };
+                const result = tryPath(dynamicPath, rest, layouts2, newParams);
                 if (result) return result;
               }
             }
@@ -13257,7 +13855,7 @@ export default function Head({ children }) {
           break;
         }
       }
-      return tryPath(this.appDir, segments, layouts);
+      return tryPath(this.appDir, segments, layouts, {});
     }
     async generateAppRouterHtml(route, pathname) {
       const virtualPrefix = `/__virtual__/${this.port}`;
@@ -13277,6 +13875,7 @@ export default function Head({ children }) {
       for (let i = route.layouts.length - 1; i >= 0; i--) {
       }
       const envScript = this.generateEnvScript();
+      const tailwindConfigScript = await this.loadTailwindConfigIfNeeded();
       return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -13286,6 +13885,7 @@ export default function Head({ children }) {
   <title>Next.js App</title>
   ${envScript}
   ${TAILWIND_CDN_SCRIPT}
+  ${tailwindConfigScript}
   ${CORS_PROXY_SCRIPT}
   ${globalCssLinks.join("\n  ")}
   ${REACT_REFRESH_PREAMBLE}
@@ -13307,7 +13907,11 @@ export default function Head({ children }) {
       "next/link": "${virtualPrefix}/_next/shims/link.js",
       "next/router": "${virtualPrefix}/_next/shims/router.js",
       "next/head": "${virtualPrefix}/_next/shims/head.js",
-      "next/navigation": "${virtualPrefix}/_next/shims/navigation.js"
+      "next/navigation": "${virtualPrefix}/_next/shims/navigation.js",
+      "next/image": "${virtualPrefix}/_next/shims/image.js",
+      "next/dynamic": "${virtualPrefix}/_next/shims/dynamic.js",
+      "next/script": "${virtualPrefix}/_next/shims/script.js",
+      "next/font/google": "${virtualPrefix}/_next/shims/font/google.js"
     }
   }
   <\/script>
@@ -13321,6 +13925,39 @@ export default function Head({ children }) {
 
     const virtualBase = '${virtualPrefix}';
 
+    // Initial route params (embedded by server for initial page load)
+    const initialRouteParams = ${JSON.stringify(route.params)};
+    const initialPathname = '${pathname}';
+
+    // Route params cache for client-side navigation
+    const routeParamsCache = new Map();
+    routeParamsCache.set(initialPathname, initialRouteParams);
+
+    // Extract route params from server for client-side navigation
+    async function extractRouteParams(pathname) {
+      // Strip virtual base if present
+      let route = pathname;
+      if (route.startsWith(virtualBase)) {
+        route = route.slice(virtualBase.length);
+      }
+      route = route.replace(/^\\/+/, '/') || '/';
+
+      // Check cache first
+      if (routeParamsCache.has(route)) {
+        return routeParamsCache.get(route);
+      }
+
+      try {
+        const response = await fetch(virtualBase + '/_next/route-info?pathname=' + encodeURIComponent(route));
+        const info = await response.json();
+        routeParamsCache.set(route, info.params || {});
+        return info.params || {};
+      } catch (e) {
+        console.error('[Router] Failed to extract route params:', e);
+        return {};
+      }
+    }
+
     // Convert URL path to app router page module path
     function getAppPageModulePath(pathname) {
       let route = pathname;
@@ -13387,11 +14024,60 @@ export default function Head({ children }) {
       return layouts;
     }
 
+    // Wrapper for async Server Components
+    function AsyncComponent({ component: Component, pathname, search }) {
+      const [content, setContent] = React.useState(null);
+      const [error, setError] = React.useState(null);
+
+      React.useEffect(() => {
+        let cancelled = false;
+        async function render() {
+          try {
+            // Create searchParams as a Promise (Next.js 15 pattern)
+            const url = new URL(window.location.href);
+            const searchParamsObj = Object.fromEntries(url.searchParams);
+            const searchParams = Promise.resolve(searchParamsObj);
+
+            // Extract route params from pathname (fetches from server for dynamic routes)
+            const routeParams = await extractRouteParams(pathname);
+            const params = Promise.resolve(routeParams);
+
+            // Call component with props like Next.js does for page components
+            const result = Component({ searchParams, params });
+            if (result && typeof result.then === 'function') {
+              // It's a Promise (async component)
+              const resolved = await result;
+              if (!cancelled) setContent(resolved);
+            } else {
+              // Synchronous component - result is already JSX
+              if (!cancelled) setContent(result);
+            }
+          } catch (e) {
+            console.error('[AsyncComponent] Error rendering:', e);
+            if (!cancelled) setError(e);
+          }
+        }
+        render();
+        return () => { cancelled = true; };
+      }, [Component, pathname, search]);
+
+      if (error) {
+        return React.createElement('div', { style: { color: 'red', padding: '20px' } },
+          'Error: ' + error.message
+        );
+      }
+      if (!content) {
+        return React.createElement('div', { style: { padding: '20px' } }, 'Loading...');
+      }
+      return content;
+    }
+
     // Router component
     function Router() {
       const [Page, setPage] = React.useState(null);
       const [layouts, setLayouts] = React.useState([]);
       const [path, setPath] = React.useState(window.location.pathname);
+      const [search, setSearch] = React.useState(window.location.search);
 
       React.useEffect(() => {
         Promise.all([loadPage(path), loadLayouts(path)]).then(([P, L]) => {
@@ -13403,21 +14089,35 @@ export default function Head({ children }) {
       React.useEffect(() => {
         const handleNavigation = async () => {
           const newPath = window.location.pathname;
+          const newSearch = window.location.search;
+          console.log('[Router] handleNavigation called, newPath:', newPath, 'current path:', path);
+
+          // Always update search params
+          if (newSearch !== search) {
+            setSearch(newSearch);
+          }
+
           if (newPath !== path) {
+            console.log('[Router] Path changed, loading new page...');
             setPath(newPath);
             const [P, L] = await Promise.all([loadPage(newPath), loadLayouts(newPath)]);
+            console.log('[Router] Page loaded:', !!P, 'Layouts:', L.length);
             if (P) setPage(() => P);
             setLayouts(L);
+          } else {
+            console.log('[Router] Path unchanged, skipping navigation');
           }
         };
         window.addEventListener('popstate', handleNavigation);
+        console.log('[Router] Added popstate listener for path:', path);
         return () => window.removeEventListener('popstate', handleNavigation);
-      }, [path]);
+      }, [path, search]);
 
       if (!Page) return null;
 
-      // Build nested layout structure
-      let content = React.createElement(Page);
+      // Use AsyncComponent wrapper to handle async Server Components
+      // Pass search to force re-render when query params change
+      let content = React.createElement(AsyncComponent, { component: Page, pathname: path, search: search });
       for (let i = layouts.length - 1; i >= 0; i--) {
         content = React.createElement(layouts[i], null, content);
       }
@@ -13539,6 +14239,7 @@ export default function Head({ children }) {
         }
       }
       const envScript = this.generateEnvScript();
+      const tailwindConfigScript = await this.loadTailwindConfigIfNeeded();
       return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -13548,6 +14249,7 @@ export default function Head({ children }) {
   <title>Next.js App</title>
   ${envScript}
   ${TAILWIND_CDN_SCRIPT}
+  ${tailwindConfigScript}
   ${CORS_PROXY_SCRIPT}
   ${globalCssLinks.join("\n  ")}
   ${REACT_REFRESH_PREAMBLE}
@@ -13561,7 +14263,12 @@ export default function Head({ children }) {
       "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
       "next/link": "${virtualPrefix}/_next/shims/link.js",
       "next/router": "${virtualPrefix}/_next/shims/router.js",
-      "next/head": "${virtualPrefix}/_next/shims/head.js"
+      "next/head": "${virtualPrefix}/_next/shims/head.js",
+      "next/navigation": "${virtualPrefix}/_next/shims/navigation.js",
+      "next/image": "${virtualPrefix}/_next/shims/image.js",
+      "next/dynamic": "${virtualPrefix}/_next/shims/dynamic.js",
+      "next/script": "${virtualPrefix}/_next/shims/script.js",
+      "next/font/google": "${virtualPrefix}/_next/shims/font/google.js"
     }
   }
   <\/script>
@@ -13677,6 +14384,30 @@ export default function Head({ children }) {
         body: buffer2
       };
     }
+    resolveFileWithExtension(pathname) {
+      if (/\.\w+$/.test(pathname) && this.exists(pathname)) {
+        return pathname;
+      }
+      const extensions = [
+        ".tsx",
+        ".ts",
+        ".jsx",
+        ".js"
+      ];
+      for (const ext of extensions) {
+        const withExt = pathname + ext;
+        if (this.exists(withExt)) {
+          return withExt;
+        }
+      }
+      for (const ext of extensions) {
+        const indexPath = pathname + "/index" + ext;
+        if (this.exists(indexPath)) {
+          return indexPath;
+        }
+      }
+      return null;
+    }
     needsTransform(path2) {
       return /\.(jsx|tsx|ts)$/.test(path2);
     }
@@ -13700,7 +14431,7 @@ export default function Head({ children }) {
             body: buffer22
           };
         }
-        const transformed = await this.transformCode(content, urlPath);
+        const transformed = await this.transformCode(content, filePath);
         this.transformCache.set(filePath, {
           code: transformed,
           hash
@@ -13743,11 +14474,12 @@ console.error(${JSON.stringify(message)});`;
         throw new Error("esbuild not available");
       }
       const codeWithoutCssImports = this.stripCssImports(code2);
+      const codeWithResolvedAliases = this.resolvePathAliases(codeWithoutCssImports, filename2);
       let loader = "js";
       if (filename2.endsWith(".jsx")) loader = "jsx";
       else if (filename2.endsWith(".tsx")) loader = "tsx";
       else if (filename2.endsWith(".ts")) loader = "ts";
-      const result = await esbuild2.transform(codeWithoutCssImports, {
+      const result = await esbuild2.transform(codeWithResolvedAliases, {
         loader,
         format: "esm",
         target: "esnext",
@@ -13756,15 +14488,57 @@ console.error(${JSON.stringify(message)});`;
         sourcemap: "inline",
         sourcefile: filename2
       });
+      const codeWithCdnImports = this.redirectNpmImports(result.code);
       if (/\.(jsx|tsx)$/.test(filename2)) {
-        return this.addReactRefresh(result.code, filename2);
+        return this.addReactRefresh(codeWithCdnImports, filename2);
       }
-      return result.code;
+      return codeWithCdnImports;
+    }
+    redirectNpmImports(code2) {
+      const explicitMappings = {
+        "react": "https://esm.sh/react@18.2.0?dev",
+        "react/jsx-runtime": "https://esm.sh/react@18.2.0&dev/jsx-runtime",
+        "react/jsx-dev-runtime": "https://esm.sh/react@18.2.0&dev/jsx-dev-runtime",
+        "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
+        "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev"
+      };
+      const localPackages = /* @__PURE__ */ new Set([
+        "next/link",
+        "next/router",
+        "next/head",
+        "next/navigation",
+        "next/dynamic",
+        "next/image",
+        "next/script",
+        "next/font/google",
+        "convex/_generated/api"
+      ]);
+      const importPattern = /(from\s*['"])([^'"./][^'"]*?)(['"])/g;
+      return code2.replace(importPattern, (match, prefix, packageName, suffix) => {
+        if (packageName.startsWith("http://") || packageName.startsWith("https://") || packageName.startsWith("/__virtual__")) {
+          return match;
+        }
+        if (explicitMappings[packageName]) {
+          return `${prefix}${explicitMappings[packageName]}${suffix}`;
+        }
+        if (localPackages.has(packageName)) {
+          return match;
+        }
+        const basePkg = packageName.includes("/") ? packageName.split("/")[0] : packageName;
+        const isScoped = basePkg.startsWith("@");
+        const scopedBasePkg = isScoped && packageName.includes("/") ? packageName.split("/").slice(0, 2).join("/") : basePkg;
+        if (localPackages.has(scopedBasePkg)) {
+          return match;
+        }
+        const esmUrl = `https://esm.sh/${packageName}?external=react`;
+        return `${prefix}${esmUrl}${suffix}`;
+      });
     }
     stripCssImports(code2) {
-      return code2.replace(/import\s+['"][^'"]+\.css['"]\s*;?/g, "// CSS import removed (loaded via <link>)");
+      return code2.replace(/import\s+['"][^'"]+\.css['"]\s*;?/g, "");
     }
     async transformApiHandler(code2, filename2) {
+      const codeWithResolvedAliases = this.resolvePathAliases(code2, filename2);
       if (isBrowser) {
         await initEsbuild();
         const esbuild2 = getEsbuild();
@@ -13775,7 +14549,7 @@ console.error(${JSON.stringify(message)});`;
         if (filename2.endsWith(".jsx")) loader = "jsx";
         else if (filename2.endsWith(".tsx")) loader = "tsx";
         else if (filename2.endsWith(".ts")) loader = "ts";
-        const result = await esbuild2.transform(code2, {
+        const result = await esbuild2.transform(codeWithResolvedAliases, {
           loader,
           format: "cjs",
           target: "esnext",
@@ -13784,7 +14558,7 @@ console.error(${JSON.stringify(message)});`;
         });
         return result.code;
       }
-      let transformed = code2;
+      let transformed = codeWithResolvedAliases;
       transformed = transformed.replace(/import\s+(\w+)\s+from\s+['"]([^'"]+)['"]/g, 'const $1 = require("$2")');
       transformed = transformed.replace(/import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, 'const {$1} = require("$2")');
       transformed = transformed.replace(/export\s+default\s+function\s+(\w+)/g, "module.exports = function $1");
@@ -13900,6 +14674,50 @@ ${registrations}
         }
       }
     }
+    serveFile(filePath) {
+      if (filePath.endsWith(".json")) {
+        try {
+          const normalizedPath = this.resolvePath(filePath);
+          const content = this.vfs.readFileSync(normalizedPath);
+          let jsonContent;
+          if (typeof content === "string") {
+            jsonContent = content;
+          } else if (content instanceof Uint8Array) {
+            jsonContent = new TextDecoder("utf-8").decode(content);
+          } else {
+            jsonContent = BufferPolyfill.from(content).toString("utf-8");
+          }
+          const esModuleContent = `export default ${jsonContent};`;
+          const buffer2 = BufferPolyfill.from(esModuleContent);
+          return {
+            statusCode: 200,
+            statusMessage: "OK",
+            headers: {
+              "Content-Type": "application/javascript; charset=utf-8",
+              "Content-Length": String(buffer2.length),
+              "Cache-Control": "no-cache"
+            },
+            body: buffer2
+          };
+        } catch (error) {
+          if (error.code === "ENOENT") {
+            return this.notFound(filePath);
+          }
+          return this.serverError(error);
+        }
+      }
+      return super.serveFile(filePath);
+    }
+    resolvePath(urlPath) {
+      let path2 = urlPath.split("?")[0].split("#")[0];
+      if (!path2.startsWith("/")) {
+        path2 = "/" + path2;
+      }
+      if (this.root !== "/") {
+        path2 = this.root + path2;
+      }
+      return path2;
+    }
     stop() {
       if (this.watcherCleanup) {
         this.watcherCleanup();