almostnode 0.2.5 → 0.2.6

package/dist/index.cjs

@@ -12068,6 +12068,125 @@ export default css;
   }
 }
 
+const CONFIG_FILE_NAMES = [
+  "/tailwind.config.ts",
+  "/tailwind.config.js",
+  "/tailwind.config.mjs"
+];
+async function loadTailwindConfig(vfs, root = "/") {
+  let configPath = null;
+  let configContent = null;
+  for (const fileName of CONFIG_FILE_NAMES) {
+    const fullPath = root === "/" ? fileName : `${root}${fileName}`;
+    try {
+      const content = vfs.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
+      // Not an error, just no config
+    };
+  }
+  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;
@@ -12292,25 +12411,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'));
   };
@@ -12649,6 +12774,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;
+`;
 class NextDevServer extends DevServer {
   /** Pages Router directory (default: '/pages') */
   pagesDir;
@@ -12666,6 +13090,14 @@ class NextDevServer extends DevServer {
   options;
   /** Transform result cache for performance */
   transformCache = /* @__PURE__ */ new Map();
+  /** Path aliases from tsconfig.json (e.g., @/* -> ./*) */
+  pathAliases = /* @__PURE__ */ new Map();
+  /** Cached Tailwind config script (injected before CDN) */
+  tailwindConfigScript = "";
+  /** Whether Tailwind config has been loaded */
+  tailwindConfigLoaded = false;
+  /** Asset prefix for static files (e.g., '/marketing') */
+  assetPrefix = "";
   constructor(vfs, options) {
     super(vfs, options);
     this.options = options;
@@ -12677,6 +13109,93 @@ class NextDevServer extends DevServer {
     } else {
       this.useAppRouter = this.hasAppRouter();
     }
+    this.loadPathAliases();
+    this.loadAssetPrefix(options.assetPrefix);
+  }
+  /**
+   * Load path aliases from tsconfig.json
+   * Supports common patterns like @/* -> ./*
+   */
+  loadPathAliases() {
+    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 = tsconfig?.compilerOptions?.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) {
+    }
+  }
+  /**
+   * Load assetPrefix from options or auto-detect from next.config.ts/js
+   * The assetPrefix is used to prefix static asset URLs (e.g., '/marketing')
+   */
+  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) {
+    }
+  }
+  /**
+   * Resolve path aliases in transformed code
+   * Converts imports like "@/components/foo" to "/__virtual__/PORT/components/foo"
+   * This ensures imports go through the virtual server instead of the main server
+   */
+  resolvePathAliases(code, currentFile) {
+    if (this.pathAliases.size === 0) {
+      return code;
+    }
+    const virtualBase = `/__virtual__/${this.port}`;
+    let result = code;
+    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, path, quote) => {
+        const resolvedPath = `${virtualBase}${target}${path}`;
+        return `${prefix}${resolvedPath}${quote}`;
+      });
+    }
+    return result;
   }
   /**
    * Set an environment variable at runtime
@@ -12702,20 +13221,46 @@ class NextDevServer extends DevServer {
   /**
    * Generate a script tag that defines process.env with NEXT_PUBLIC_* variables
    * This makes environment variables available to browser code via process.env.NEXT_PUBLIC_*
+   * Also includes all env variables for Server Component compatibility
    */
   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>`;
   }
+  /**
+   * Load Tailwind config from tailwind.config.ts and generate a script
+   * that configures the Tailwind CDN at runtime
+   */
+  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;
+  }
   /**
    * Check if App Router is available
    */
@@ -12736,10 +13281,26 @@ class NextDevServer extends DevServer {
    */
   async handleRequest(method, url, headers, body) {
     const urlObj = new URL(url, "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);
     }
@@ -12759,6 +13320,13 @@ class NextDevServer extends DevServer {
     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);
     }
@@ -12783,6 +13351,18 @@ class NextDevServer extends DevServer {
       case "navigation":
         code = NEXT_NAVIGATION_SHIM;
         break;
+      case "image":
+        code = NEXT_IMAGE_SHIM;
+        break;
+      case "dynamic":
+        code = NEXT_DYNAMIC_SHIM;
+        break;
+      case "script":
+        code = NEXT_SCRIPT_SHIM;
+        break;
+      case "font/google":
+        code = NEXT_FONT_GOOGLE_SHIM;
+        break;
       default:
         return this.notFound(pathname);
     }
@@ -12798,6 +13378,26 @@ class NextDevServer extends DevServer {
       body: buffer
     };
   }
+  /**
+   * Serve route info for client-side navigation
+   * Returns params extracted from dynamic route segments
+   */
+  serveRouteInfo(pathname) {
+    const route = this.resolveAppRoute(pathname);
+    const info = route ? { params: route.params, found: true } : { params: {}, found: false };
+    const json = JSON.stringify(info);
+    const buffer = BufferPolyfill.from(json);
+    return {
+      statusCode: 200,
+      statusMessage: "OK",
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+        "Content-Length": String(buffer.length),
+        "Cache-Control": "no-cache"
+      },
+      body: buffer
+    };
+  }
   /**
    * Serve static assets from /_next/static/
    */
@@ -13304,17 +13904,18 @@ class NextDevServer extends DevServer {
     for (const ext of extensions) {
       const pagePath = `${dirPath}/page${ext}`;
       if (this.exists(pagePath)) {
-        return { page: pagePath, layouts };
+        return { page: pagePath, layouts, params: {} };
       }
     }
     return this.resolveAppDynamicRoute(pathname, segments);
   }
   /**
    * Resolve dynamic App Router routes like /app/[id]/page.jsx
+   * Also extracts route params from dynamic segments
    */
   resolveAppDynamicRoute(pathname, segments) {
     const extensions = [".jsx", ".tsx", ".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)) {
@@ -13325,7 +13926,7 @@ class NextDevServer extends DevServer {
         for (const ext of extensions) {
           const pagePath = `${dirPath}/page${ext}`;
           if (this.exists(pagePath)) {
-            return { page: pagePath, layouts: layouts2 };
+            return { page: pagePath, layouts: layouts2, params };
           }
         }
         return null;
@@ -13333,16 +13934,26 @@ class NextDevServer extends DevServer {
       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;
             }
           }
@@ -13359,7 +13970,7 @@ class NextDevServer extends DevServer {
         break;
       }
     }
-    return tryPath(this.appDir, segments, layouts);
+    return tryPath(this.appDir, segments, layouts, {});
   }
   /**
    * Generate HTML for App Router with nested layouts
@@ -13378,6 +13989,7 @@ class NextDevServer extends DevServer {
     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>
@@ -13387,6 +13999,7 @@ class NextDevServer extends DevServer {
   <title>Next.js App</title>
   ${envScript}
   ${TAILWIND_CDN_SCRIPT}
+  ${tailwindConfigScript}
   ${CORS_PROXY_SCRIPT}
   ${globalCssLinks.join("\n  ")}
   ${REACT_REFRESH_PREAMBLE}
@@ -13408,7 +14021,11 @@ class NextDevServer extends DevServer {
       "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>
@@ -13422,6 +14039,39 @@ class NextDevServer extends DevServer {
 
     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;
@@ -13488,11 +14138,60 @@ class NextDevServer extends DevServer {
       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]) => {
@@ -13504,21 +14203,35 @@ class NextDevServer extends DevServer {
       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);
       }
@@ -13635,6 +14348,7 @@ class NextDevServer extends DevServer {
       }
     }
     const envScript = this.generateEnvScript();
+    const tailwindConfigScript = await this.loadTailwindConfigIfNeeded();
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -13644,6 +14358,7 @@ class NextDevServer extends DevServer {
   <title>Next.js App</title>
   ${envScript}
   ${TAILWIND_CDN_SCRIPT}
+  ${tailwindConfigScript}
   ${CORS_PROXY_SCRIPT}
   ${globalCssLinks.join("\n  ")}
   ${REACT_REFRESH_PREAMBLE}
@@ -13657,7 +14372,12 @@ class NextDevServer extends DevServer {
       "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>
@@ -13776,6 +14496,30 @@ class NextDevServer extends DevServer {
       body: buffer
     };
   }
+  /**
+   * Try to resolve a file path by adding common extensions
+   * e.g., /components/faq -> /components/faq.tsx
+   * Also handles index files in directories
+   */
+  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;
+  }
   /**
    * Check if a file needs transformation
    */
@@ -13805,7 +14549,7 @@ class NextDevServer extends DevServer {
           body: buffer2
         };
       }
-      const transformed = await this.transformCode(content, urlPath);
+      const transformed = await this.transformCode(content, filePath);
       this.transformCache.set(filePath, { code: transformed, hash });
       const buffer = BufferPolyfill.from(transformed);
       return {
@@ -13848,11 +14592,12 @@ console.error(${JSON.stringify(message)});`;
       throw new Error("esbuild not available");
     }
     const codeWithoutCssImports = this.stripCssImports(code);
+    const codeWithResolvedAliases = this.resolvePathAliases(codeWithoutCssImports, filename);
     let loader = "js";
     if (filename.endsWith(".jsx")) loader = "jsx";
     else if (filename.endsWith(".tsx")) loader = "tsx";
     else if (filename.endsWith(".ts")) loader = "ts";
-    const result = await esbuild.transform(codeWithoutCssImports, {
+    const result = await esbuild.transform(codeWithResolvedAliases, {
       loader,
       format: "esm",
       target: "esnext",
@@ -13861,22 +14606,71 @@ console.error(${JSON.stringify(message)});`;
       sourcemap: "inline",
       sourcefile: filename
     });
+    const codeWithCdnImports = this.redirectNpmImports(result.code);
     if (/\.(jsx|tsx)$/.test(filename)) {
-      return this.addReactRefresh(result.code, filename);
+      return this.addReactRefresh(codeWithCdnImports, filename);
     }
-    return result.code;
+    return codeWithCdnImports;
+  }
+  /**
+   * Redirect bare npm package imports to esm.sh CDN
+   * e.g., import { Crisp } from "crisp-sdk-web" -> import { Crisp } from "https://esm.sh/crisp-sdk-web?external=react"
+   *
+   * IMPORTANT: We redirect ALL npm packages to esm.sh URLs (including React)
+   * because import maps don't work reliably for dynamically imported modules.
+   */
+  redirectNpmImports(code) {
+    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 code.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}`;
+    });
   }
   /**
    * Strip CSS imports from code (they are loaded via <link> tags instead)
    * Handles: import './styles.css', import '../globals.css', etc.
    */
   stripCssImports(code) {
-    return code.replace(/import\s+['"][^'"]+\.css['"]\s*;?/g, "// CSS import removed (loaded via <link>)");
+    return code.replace(/import\s+['"][^'"]+\.css['"]\s*;?/g, "");
   }
   /**
    * Transform API handler code to CommonJS for eval execution
    */
   async transformApiHandler(code, filename) {
+    const codeWithResolvedAliases = this.resolvePathAliases(code, filename);
     if (isBrowser) {
       await initEsbuild();
       const esbuild = getEsbuild();
@@ -13887,7 +14681,7 @@ console.error(${JSON.stringify(message)});`;
       if (filename.endsWith(".jsx")) loader = "jsx";
       else if (filename.endsWith(".tsx")) loader = "tsx";
       else if (filename.endsWith(".ts")) loader = "ts";
-      const result = await esbuild.transform(code, {
+      const result = await esbuild.transform(codeWithResolvedAliases, {
         loader,
         format: "cjs",
         // CommonJS for eval execution
@@ -13897,7 +14691,7 @@ console.error(${JSON.stringify(message)});`;
       });
       return result.code;
     }
-    let transformed = code;
+    let transformed = codeWithResolvedAliases;
     transformed = transformed.replace(
       /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]/g,
       'const $1 = require("$2")'
@@ -14028,6 +14822,57 @@ ${registrations}
       }
     }
   }
+  /**
+   * Override serveFile to wrap JSON files as ES modules
+   * This is needed because browsers can't dynamically import raw JSON files
+   */
+  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 buffer = BufferPolyfill.from(esModuleContent);
+        return {
+          statusCode: 200,
+          statusMessage: "OK",
+          headers: {
+            "Content-Type": "application/javascript; charset=utf-8",
+            "Content-Length": String(buffer.length),
+            "Cache-Control": "no-cache"
+          },
+          body: buffer
+        };
+      } catch (error) {
+        if (error.code === "ENOENT") {
+          return this.notFound(filePath);
+        }
+        return this.serverError(error);
+      }
+    }
+    return super.serveFile(filePath);
+  }
+  /**
+   * Resolve a path (helper to access protected method from parent)
+   */
+  resolvePath(urlPath) {
+    let path = urlPath.split("?")[0].split("#")[0];
+    if (!path.startsWith("/")) {
+      path = "/" + path;
+    }
+    if (this.root !== "/") {
+      path = this.root + path;
+    }
+    return path;
+  }
   /**
    * Stop the server
    */