bun-plugin-stx 0.2.9 → 0.2.11

package/dist/serve.js

@@ -5064,9 +5064,39 @@ var defaultStxConfig = {
   partialsDir: "partials",
   componentsDir: "components",
   layoutsDir: "layouts",
+  publicDir: "public",
   ssr: true,
   defaultTitle: "stx App"
 };
+var staticContentTypes = {
+  css: "text/css",
+  js: "application/javascript",
+  mjs: "application/javascript",
+  json: "application/json",
+  html: "text/html; charset=utf-8",
+  txt: "text/plain",
+  xml: "application/xml",
+  pdf: "application/pdf",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  svg: "image/svg+xml",
+  ico: "image/x-icon",
+  bmp: "image/bmp",
+  mp4: "video/mp4",
+  webm: "video/webm",
+  ogg: "audio/ogg",
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  woff: "font/woff",
+  woff2: "font/woff2",
+  ttf: "font/ttf",
+  otf: "font/otf",
+  eot: "application/vnd.ms-fontobject"
+};
 async function serve(options) {
   const stxConfig = await loadConfig5({
     name: "stx",
@@ -5076,6 +5106,7 @@ async function serve(options) {
   const componentsDir = options.componentsDir ?? stxConfig.componentsDir ?? defaultStxConfig.componentsDir;
   const layoutsDir = options.layoutsDir ?? stxConfig.layoutsDir ?? defaultStxConfig.layoutsDir;
   const partialsDir = options.partialsDir ?? stxConfig.partialsDir ?? defaultStxConfig.partialsDir;
+  const publicDir = options.publicDir ?? stxConfig.publicDir ?? "public";
   const { patterns, port = 3456 } = options;
   if (patterns.length === 0) {
     console.error("Usage: serve <files...> [--port 3000]");
@@ -5103,10 +5134,17 @@ After installing: bun add bun-plugin-stx`);
         const fs = await import("fs/promises");
         const stat3 = await fs.stat(pattern).catch(() => null);
         if (stat3?.isDirectory()) {
+          const excludeDirs = ["layouts", "components", "partials"];
+          if (layoutsDir)
+            excludeDirs.push(layoutsDir.replace(/^.*\//, ""));
+          if (componentsDir)
+            excludeDirs.push(componentsDir.replace(/^.*\//, ""));
+          if (partialsDir)
+            excludeDirs.push(partialsDir.replace(/^.*\//, ""));
           for (const ext of [".stx", ".md", ".html"]) {
             const glob = new Glob(`**/*${ext}`);
             const discovered = await Array.fromAsync(glob.scan({ cwd: pattern, followSymlinks: true }));
-            files.push(...discovered.map((f) => `${pattern}/${f}`.replace(/\/+/g, "/")));
+            files.push(...discovered.filter((f) => !excludeDirs.some((dir) => f.startsWith(`${dir}/`))).map((f) => `${pattern}/${f}`.replace(/\/+/g, "/")));
           }
         } else if (pattern.includes("*")) {
           const glob = new Glob(pattern);
@@ -5121,6 +5159,12 @@ After installing: bun add bun-plugin-stx`);
       }
     }
     sourceFiles = files;
+    try {
+      const { Router } = await import("./chunk-c60m6z2p.js");
+      const pagesDir = patterns[0]?.replace(/\/$/, "") || "pages";
+      const router = new Router(process13.cwd(), { pagesDir });
+      console.log(`[stx] Generated ${router.routes.length} routes \u2192 .stx/routes.ts`);
+    } catch (e) {}
     return files;
   }
   async function ensureAssets() {
@@ -5145,7 +5189,7 @@ After installing: bun add bun-plugin-stx`);
       return crosswindModule;
     crosswindLoadAttempted = true;
     try {
-      const mod = await import("./chunk-fj6fej0j.js");
+      const mod = await import("@cwcss/crosswind");
       crosswindModule = { CSSGenerator: mod.CSSGenerator, config: mod.config };
       return crosswindModule;
     } catch {
@@ -5175,13 +5219,89 @@ After installing: bun add bun-plugin-stx`);
         }
         match = classRegex.exec(htmlContent);
       }
+      const dynRegex = /(?:x-class|:class)\s*=\s*"([^"]+)"/gi;
+      let dynMatch = dynRegex.exec(htmlContent);
+      while (dynMatch !== null) {
+        const strLiterals = dynMatch[1].match(/'([^']+)'/g);
+        if (strLiterals) {
+          for (const lit of strLiterals) {
+            const unquoted = lit.slice(1, -1);
+            for (const cls of unquoted.split(/\s+/)) {
+              if (cls.trim())
+                classes.add(cls.trim());
+            }
+          }
+        }
+        dynMatch = dynRegex.exec(htmlContent);
+      }
       if (classes.size === 0)
         return "";
-      const generator = new cw.CSSGenerator({ ...cw.config, preflight: true, minify: false });
+      let userConfig = {};
+      try {
+        const nodePath = await import("path");
+        const configPath = nodePath.join(process13.cwd(), "crosswind.config.ts");
+        console.log("[crosswind] loading config from:", configPath);
+        userConfig = (await import(configPath)).default || {};
+        console.log("[crosswind] config loaded, keys:", Object.keys(userConfig));
+      } catch (e) {
+        console.warn("[crosswind] config load error:", e?.message || e);
+      }
+      if (userConfig.safelist) {
+        for (const cls of userConfig.safelist)
+          classes.add(cls);
+        console.log("[crosswind] safelist:", userConfig.safelist);
+      }
+      if (userConfig.shortcuts) {
+        console.log("[crosswind] shortcuts:", Object.keys(userConfig.shortcuts));
+      }
+      const generatorConfig = { ...cw.config, preflight: true, minify: false };
+      if (userConfig.shortcuts) {
+        generatorConfig.shortcuts = { ...generatorConfig.shortcuts || {}, ...userConfig.shortcuts };
+      }
+      if (userConfig.theme) {
+        generatorConfig.theme = { ...generatorConfig.theme || {}, ...userConfig.theme };
+      }
+      const generator = new cw.CSSGenerator(generatorConfig);
       for (const className of classes) {
         generator.generate(className);
       }
-      return generator.toCSS(true, false);
+      let shortcutCSS = "";
+      const shortcuts = generatorConfig.shortcuts || {};
+      for (const [name, classStr] of Object.entries(shortcuts)) {
+        if (!classes.has(name))
+          continue;
+        const parts = classStr.split(/\s+/).filter(Boolean);
+        for (const p of parts)
+          generator.generate(p);
+      }
+      const baseCss = generator.toCSS(true, false);
+      for (const [name, classStr] of Object.entries(shortcuts)) {
+        if (!classes.has(name))
+          continue;
+        const parts = classStr.split(/\s+/).filter(Boolean);
+        const decls = [];
+        const darkDecls = [];
+        for (const cls of parts) {
+          const isDark = cls.startsWith("dark:");
+          const actualCls = isDark ? cls.slice(5) : cls;
+          const escaped = actualCls.replace(/[/:.[\]%()]/g, (c) => `\\${c}`);
+          const re = new RegExp(`\\.${escaped}\\s*\\{([^}]+)\\}`);
+          const m = baseCss.match(re);
+          if (m) {
+            if (isDark)
+              darkDecls.push(m[1].trim());
+            else
+              decls.push(m[1].trim());
+          }
+        }
+        if (decls.length)
+          shortcutCSS += `.${name} { ${decls.join(" ")} }
+`;
+        if (darkDecls.length)
+          shortcutCSS += `@media (prefers-color-scheme: dark) { .dark .${name} { ${darkDecls.join(" ")} } }
+`;
+      }
+      return baseCss + shortcutCSS;
     } catch (error) {
       console.warn("Failed to generate Crosswind CSS:", error);
       return "";
@@ -5190,35 +5310,33 @@ After installing: bun add bun-plugin-stx`);
   async function processTemplate(filePath) {
     const path = await import("path");
     const content = await Bun.file(filePath).text();
-    const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
-    const clientScripts = [];
+    const serverScriptRegex = /<script\b([^>]*)\bserver\b[^>]*>([\s\S]*?)<\/script>/gi;
     const serverScripts = [];
     let scriptMatch;
-    while ((scriptMatch = scriptRegex.exec(content)) !== null) {
-      const attrs = scriptMatch[1];
-      const scriptBody = scriptMatch[2];
-      const fullScript = scriptMatch[0];
-      const isClientScript = attrs.includes("client") || attrs.includes('type="module"') || attrs.includes("src=");
-      if (isClientScript) {
-        clientScripts.push(fullScript);
-      } else {
-        serverScripts.push(scriptBody);
-      }
+    while ((scriptMatch = serverScriptRegex.exec(content)) !== null) {
+      serverScripts.push(scriptMatch[2]);
     }
-    let templateContent = content.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "");
+    let templateContent = content.replace(/<script\b[^>]*\bserver\b[^>]*>[\s\S]*?<\/script>/gi, "");
     const context = {
       __filename: filePath,
       __dirname: path.dirname(filePath)
     };
-    const { processDirectives, extractVariables, defaultConfig: defaultConfig3, generateSpaShell, injectRouterScript } = await import("@stacksjs/stx");
+    const { processDirectives, extractVariables, defaultConfig: defaultConfig3, generateSpaShell, injectRouterScript, resetHead } = await import("@stacksjs/stx");
+    resetHead();
     for (const scriptBody of serverScripts) {
       await extractVariables(scriptBody, context, filePath);
     }
+    context.__stx_head_preset = true;
     const config3 = {
       ...defaultConfig3,
       ...componentsDir && { componentsDir },
       ...layoutsDir && { layoutsDir },
-      ...partialsDir && { partialsDir }
+      ...partialsDir && { partialsDir },
+      autoShell: true,
+      ssr: stxConfig.ssr ?? defaultStxConfig.ssr ?? true,
+      app: stxConfig.app || {},
+      ..."strict" in stxConfig && { strict: stxConfig.strict },
+      ..."router" in stxConfig && { router: stxConfig.router }
     };
     if (config3.ssr === false || stxConfig.ssr === false) {
       return generateSpaShell({
@@ -5230,11 +5348,12 @@ After installing: bun add bun-plugin-stx`);
     let output = templateContent;
     const dependencies = new Set;
     output = await processDirectives(output, context, filePath, config3, dependencies);
-    output = injectRouterScript(output);
-    const hasDirectiveTemplates = /<template\s[^>]*(?:@for|:for|@if|:if)/.test(output);
+    output = await injectRouterScript(output);
+    const directiveTemplateRe = /@for|:for|@if|:if|x-for|x-if/;
+    const hasDirectiveTemplates = /<template\s[^>]*(?:@for|:for|@if|:if|x-for|x-if)/.test(output);
     if (hasDirectiveTemplates) {
       output = output.replace(/<template(?:\s[^>]*)?>|<\/template>/gi, (match) => {
-        if (/@for|:for|@if|:if/.test(match))
+        if (directiveTemplateRe.test(match))
           return match;
         if (match === "</template>")
           return match;
@@ -5243,25 +5362,9 @@ After installing: bun add bun-plugin-stx`);
     } else {
       output = output.replace(/<template[^>]*>/gi, "").replace(/<\/template>/gi, "");
     }
-    const crosswindCSS = await generateCrosswindCSS(output);
-    if (crosswindCSS) {
-      const styleTag = `<style>/* crosswind css */
-${crosswindCSS}</style>`;
-      if (output.includes("</head>")) {
-        output = output.replace("</head>", `${styleTag}
-</head>`);
-      } else if (output.includes("<body")) {
-        output = output.replace(/<body/i, `${styleTag}
-<body`);
-      } else {
-        output = styleTag + output;
-      }
-    }
     return output;
   }
   async function getRoute(requestPath) {
-    if (routes.has(requestPath))
-      return routes.get(requestPath);
     const files = await discoverFiles();
     const nodePath = await import("path");
     let normalizedPath = requestPath.startsWith("/") ? requestPath.slice(1) : requestPath;
@@ -5290,7 +5393,6 @@ ${crosswindCSS}</style>`;
         const normalizedFilePath = filePath.replace(/^\.\//, "").replace(/\\/g, "/");
         if (normalizedFilePath === possible || normalizedFilePath.endsWith(`/${possible}`)) {
           const output = await processTemplate(filePath);
-          routes.set(requestPath, output);
           return output;
         }
       }
@@ -5359,22 +5461,13 @@ ${crosswindCSS}</style>`;
   async function processTemplateDynamic(filePath, paramNames, paramValues, routePath) {
     const path = await import("path");
     const content = await Bun.file(filePath).text();
-    const dynScriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
-    const dynClientScripts = [];
+    const serverScriptRegex = /<script\b([^>]*)\bserver\b[^>]*>([\s\S]*?)<\/script>/gi;
     const dynServerScripts = [];
     let dynScriptMatch;
-    while ((dynScriptMatch = dynScriptRegex.exec(content)) !== null) {
-      const attrs = dynScriptMatch[1];
-      const scriptBody = dynScriptMatch[2];
-      const fullScript = dynScriptMatch[0];
-      const isClientScript = attrs.includes("client") || attrs.includes('type="module"') || attrs.includes("src=");
-      if (isClientScript) {
-        dynClientScripts.push(fullScript);
-      } else {
-        dynServerScripts.push(scriptBody);
-      }
+    while ((dynScriptMatch = serverScriptRegex.exec(content)) !== null) {
+      dynServerScripts.push(dynScriptMatch[2]);
     }
-    const templateContent = content.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "");
+    const templateContent = content.replace(/<script\b[^>]*\bserver\b[^>]*>[\s\S]*?<\/script>/gi, "");
     const context = {
       __filename: filePath,
       __dirname: path.dirname(filePath),
@@ -5383,39 +5476,53 @@ ${crosswindCSS}</style>`;
     for (let i = 0;i < paramNames.length; i++) {
       context[paramNames[i]] = paramValues[i];
     }
-    const { processDirectives, extractVariables, defaultConfig: defaultConfig3, injectRouterScript: injectRouter } = await import("@stacksjs/stx");
+    const { processDirectives, extractVariables, defaultConfig: defaultConfig3, injectRouterScript: injectRouter, resetHead: resetHeadDyn } = await import("@stacksjs/stx");
+    resetHeadDyn();
     for (const scriptBody of dynServerScripts) {
       await extractVariables(scriptBody, context, filePath);
     }
+    context.__stx_head_preset = true;
     const config3 = {
       ...defaultConfig3,
       ...componentsDir && { componentsDir },
       ...layoutsDir && { layoutsDir },
-      ...partialsDir && { partialsDir }
+      ...partialsDir && { partialsDir },
+      autoShell: true,
+      ssr: stxConfig.ssr ?? defaultStxConfig.ssr ?? true,
+      app: stxConfig.app || {},
+      ..."strict" in stxConfig && { strict: stxConfig.strict },
+      ..."router" in stxConfig && { router: stxConfig.router }
     };
     let output = templateContent;
     const dependencies = new Set;
     output = await processDirectives(output, context, filePath, config3, dependencies);
-    output = injectRouter(output);
-    output = output.replace(/<template[^>]*>/gi, "").replace(/<\/template>/gi, "");
-    const crosswindCSS = await generateCrosswindCSS(output);
-    if (crosswindCSS) {
-      const styleTag = `<style>/* crosswind css */
-${crosswindCSS}</style>`;
+    if (paramNames.length > 0) {
+      const paramsObj = {};
+      for (let i = 0;i < paramNames.length; i++) {
+        paramsObj[paramNames[i]] = paramValues[i];
+      }
+      const paramsScript = `<script>if(window.stx)window.stx._rp=${JSON.stringify(paramsObj)};else window.__stx_rp=${JSON.stringify(paramsObj)};</script>`;
       if (output.includes("</head>")) {
-        output = output.replace("</head>", `${styleTag}
+        output = output.replace("</head>", `${paramsScript}
 </head>`);
-      } else if (output.includes("<body")) {
-        output = output.replace(/<body/i, `${styleTag}
-<body`);
       } else {
-        output = styleTag + output;
+        output = `${paramsScript}
+${output}`;
       }
     }
+    output = await injectRouter(output);
+    const directiveTemplateRe2 = /@for|:for|@if|:if|x-for|x-if/;
+    output = output.replace(/<template(?:\s[^>]*)?>|<\/template>/gi, (match) => {
+      if (directiveTemplateRe2.test(match))
+        return match;
+      if (match === "</template>")
+        return match;
+      return "";
+    });
     return output;
   }
-  if (!options.quiet)
-    console.log(`  \u2713 Frontend running at http://localhost:${port}`);
+  const startTime = performance.now();
+  await discoverFiles();
   const corsHeaders = {
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
@@ -5440,6 +5547,31 @@ ${crosswindCSS}</style>`;
           return routeHandler(req);
         }
       }
+      if (path.startsWith("/_stx/component/")) {
+        const componentName = decodeURIComponent(path.slice("/_stx/component/".length));
+        if (componentName) {
+          try {
+            const { processDirectives, defaultConfig: defaultConfig3 } = await import("@stacksjs/stx");
+            const componentTemplate = `<${componentName} />`;
+            const componentOpts = {
+              ...defaultConfig3,
+              ...componentsDir && { componentsDir },
+              ...layoutsDir && { layoutsDir },
+              ...partialsDir && { partialsDir },
+              autoShell: false
+            };
+            const html = await processDirectives(componentTemplate, {}, `${componentsDir}/${componentName}.stx`, componentOpts, new Set);
+            return new Response(html, {
+              headers: { "Content-Type": "text/html; charset=utf-8", ...corsHeaders }
+            });
+          } catch (e) {
+            return new Response(`<div class="stx-async-error">${e.message}</div>`, {
+              status: 500,
+              headers: { "Content-Type": "text/html; charset=utf-8", ...corsHeaders }
+            });
+          }
+        }
+      }
       if (path.startsWith("/api/data/") && req.method === "POST") {
         try {
           const tableName = path.replace("/api/data/", "").split("/")[0];
@@ -5449,62 +5581,70 @@ ${crosswindCSS}</style>`;
               headers: { "Content-Type": "application/json", ...corsHeaders }
             });
           }
+          if (!/^[a-zA-Z_]\w*$/.test(tableName)) {
+            return new Response(JSON.stringify({ error: "Invalid table name" }), {
+              status: 400,
+              headers: { "Content-Type": "application/json", ...corsHeaders }
+            });
+          }
           const body = await req.json();
           const nodePath = await import("path");
           const { Database } = await import("bun:sqlite");
           const dbPath = nodePath.resolve(process13.cwd(), "database/stacks.sqlite");
           const db = new Database(dbPath);
-          const tableInfo = db.query(`PRAGMA table_info(${tableName})`).all();
-          const validColumns = tableInfo.map((c) => c.name).filter((n) => n !== "id" && n !== "created_at" && n !== "updated_at");
-          const columns = [];
-          const placeholders = [];
-          const values = [];
-          for (const col of validColumns) {
-            if (body[col] !== undefined && body[col] !== "") {
-              columns.push(col);
+          try {
+            const tableInfo = db.query(`PRAGMA table_info("${tableName}")`).all();
+            const validColumns = tableInfo.map((c) => c.name).filter((n) => n !== "id" && n !== "created_at" && n !== "updated_at");
+            const columns = [];
+            const placeholders = [];
+            const values = [];
+            for (const col of validColumns) {
+              if (body[col] !== undefined && body[col] !== "") {
+                columns.push(col);
+                placeholders.push("?");
+                values.push(body[col]);
+              }
+            }
+            const now = new Date().toISOString();
+            if (tableInfo.some((c) => c.name === "created_at")) {
+              columns.push("created_at");
               placeholders.push("?");
-              values.push(body[col]);
+              values.push(now);
             }
-          }
-          const now = new Date().toISOString();
-          if (tableInfo.some((c) => c.name === "created_at")) {
-            columns.push("created_at");
-            placeholders.push("?");
-            values.push(now);
-          }
-          if (tableInfo.some((c) => c.name === "updated_at")) {
-            columns.push("updated_at");
-            placeholders.push("?");
-            values.push(now);
-          }
-          if (columns.length === 0) {
-            db.close();
-            return new Response(JSON.stringify({ error: "No valid fields provided" }), {
-              status: 400,
+            if (tableInfo.some((c) => c.name === "updated_at")) {
+              columns.push("updated_at");
+              placeholders.push("?");
+              values.push(now);
+            }
+            if (columns.length === 0) {
+              return new Response(JSON.stringify({ error: "No valid fields provided" }), {
+                status: 400,
+                headers: { "Content-Type": "application/json", ...corsHeaders }
+              });
+            }
+            const query = `INSERT INTO "${tableName}" (${columns.join(", ")}) VALUES (${placeholders.join(", ")})`;
+            const stmt = db.prepare(query);
+            const result = stmt.run(...values);
+            return new Response(JSON.stringify({
+              success: true,
+              id: result.lastInsertRowid,
+              message: "Record created successfully"
+            }), {
+              status: 201,
               headers: { "Content-Type": "application/json", ...corsHeaders }
             });
+          } catch (error) {
+            console.error("API Error:", error);
+            return new Response(JSON.stringify({
+              error: error.message || "Failed to create record"
+            }), {
+              status: 500,
+              headers: { "Content-Type": "application/json", ...corsHeaders }
+            });
+          } finally {
+            db.close();
           }
-          const query = `INSERT INTO ${tableName} (${columns.join(", ")}) VALUES (${placeholders.join(", ")})`;
-          const stmt = db.prepare(query);
-          const result = stmt.run(...values);
-          db.close();
-          return new Response(JSON.stringify({
-            success: true,
-            id: result.lastInsertRowid,
-            message: "Record created successfully"
-          }), {
-            status: 201,
-            headers: { "Content-Type": "application/json", ...corsHeaders }
-          });
-        } catch (error) {
-          console.error("API Error:", error);
-          return new Response(JSON.stringify({
-            error: error.message || "Failed to create record"
-          }), {
-            status: 500,
-            headers: { "Content-Type": "application/json", ...corsHeaders }
-          });
-        }
+        } catch {}
       }
       if (path === "/index")
         path = "/";
@@ -5525,9 +5665,92 @@ ${crosswindCSS}</style>`;
       }
       const content = await getRoute(path);
       if (content) {
-        return new Response(content, {
+        const isSpaNav = req.headers.get("X-STX-Router") === "true";
+        if (isSpaNav) {
+          const layoutMatch = content.match(/<!-- stx-layout: ([^ ]+) -->/);
+          const pageLayout = layoutMatch ? layoutMatch[1] : "default";
+          let fragment = content;
+          const headStyles = [];
+          const headMatch = content.match(/<head\b[^>]*>([\s\S]*?)<\/head>/i);
+          if (headMatch) {
+            const headContent = headMatch[1];
+            let styleMatch;
+            const styleRe = /<style\b[^>]*>[\s\S]*?<\/style>/gi;
+            while ((styleMatch = styleRe.exec(headContent)) !== null) {
+              if (styleMatch[0].includes("data-crosswind")) {
+                const cssContent = styleMatch[0].replace(/<style[^>]*>/, "").replace(/<\/style>/, "");
+                const hiddenRule = cssContent.indexOf("[hidden]");
+                if (hiddenRule !== -1) {
+                  const afterPreflight = cssContent.indexOf("}", hiddenRule) + 1;
+                  const utilities = cssContent.slice(afterPreflight).trim();
+                  if (utilities) {
+                    headStyles.push(`<style data-crosswind="fragment">${utilities}</style>`);
+                  }
+                }
+                continue;
+              }
+              headStyles.push(styleMatch[0]);
+            }
+          }
+          const mainOpenMatch = fragment.match(/<main\b[^>]*>/i);
+          const mainCloseIdx = fragment.lastIndexOf("</main>");
+          if (mainOpenMatch && mainCloseIdx !== -1) {
+            const bodyMatch = content.match(/<body\b[^>]*>/i);
+            if (bodyMatch) {
+              const bodyStart = bodyMatch.index + bodyMatch[0].length;
+              const mainIdx = mainOpenMatch.index;
+              const beforeMain = content.slice(bodyStart, mainIdx);
+              let bodyStyleMatch;
+              const bodyStyleRe = /<style\b[^>]*>[\s\S]*?<\/style>/gi;
+              while ((bodyStyleMatch = bodyStyleRe.exec(beforeMain)) !== null) {
+                headStyles.push(bodyStyleMatch[0]);
+              }
+            }
+            const mainStart = mainOpenMatch.index + mainOpenMatch[0].length;
+            fragment = fragment.slice(mainStart, mainCloseIdx).trim();
+          }
+          const pageSetupScripts = [];
+          const allScriptRe = /<script\b[^>]*data-stx-scoped[^>]*>[\s\S]*?<\/script>/gi;
+          let setupMatch;
+          while ((setupMatch = allScriptRe.exec(content)) !== null) {
+            const scriptContent = setupMatch[0];
+            if (scriptContent.includes("__stx_early_mounts"))
+              continue;
+            if (scriptContent.includes("data-stx-reactive") && scriptContent.includes("window.__stx_reactive"))
+              continue;
+            pageSetupScripts.push(scriptContent);
+          }
+          const bridgeInitRe = /<script\b[^>]*data-stx-reactive[^>]*>(?![\s\S]*window\.__stx_reactive)[\s\S]*?<\/script>/gi;
+          while ((setupMatch = bridgeInitRe.exec(content)) !== null) {
+            pageSetupScripts.push(setupMatch[0]);
+          }
+          fragment = fragment.replace(/<script data-stx-scoped>\s*;?\(function\(\)\s*\{[\s\S]*?<\/script>/g, "");
+          const clearStale = "<script data-stx-page>if(window.stx)window.stx._latestSetup=null;</script>";
+          fragment = `${headStyles.join(`
+`)}
+${fragment}
+${clearStale}
+${pageSetupScripts.join(`
+`)}`;
+          return new Response(fragment, {
+            headers: {
+              "Content-Type": "text/html; charset=utf-8",
+              "X-STX-Fragment": "true",
+              "X-STX-Layout": pageLayout,
+              "Cache-Control": "no-cache",
+              ...corsHeaders
+            }
+          });
+        }
+        let cleaned = content;
+        let runtimeCount = 0;
+        cleaned = content.replace(/<script data-stx-scoped>\(function\(\)\{'use strict';var cloakStyle[\s\S]*?<\/script>/g, (match) => {
+          runtimeCount++;
+          return runtimeCount === 1 ? match : "";
+        });
+        return new Response(cleaned, {
           headers: {
-            "Content-Type": "text/html",
+            "Content-Type": "text/html; charset=utf-8",
             "Cache-Control": "no-cache",
             ...corsHeaders
           }
@@ -5537,7 +5760,7 @@ ${crosswindCSS}</style>`;
       if (contentWithExt) {
         return new Response(contentWithExt, {
           headers: {
-            "Content-Type": "text/html",
+            "Content-Type": "text/html; charset=utf-8",
             "Cache-Control": "no-cache",
             ...corsHeaders
           }
@@ -5584,24 +5807,9 @@ ${crosswindCSS}</style>`;
                   }
                 });
               }
-              const contentTypes = {
-                css: "text/css",
-                js: "application/javascript",
-                json: "application/json",
-                png: "image/png",
-                jpg: "image/jpeg",
-                jpeg: "image/jpeg",
-                gif: "image/gif",
-                svg: "image/svg+xml",
-                ico: "image/x-icon",
-                woff: "font/woff",
-                woff2: "font/woff2",
-                ttf: "font/ttf",
-                eot: "application/vnd.ms-fontobject"
-              };
               return new Response(file, {
                 headers: {
-                  "Content-Type": contentTypes[ext || ""] || "application/octet-stream",
+                  "Content-Type": staticContentTypes[ext || ""] || "application/octet-stream",
                   "Cache-Control": "public, max-age=31536000"
                 }
               });
@@ -5611,27 +5819,38 @@ ${crosswindCSS}</style>`;
           }
         }
       }
-      if (path === "/favicon.ico") {
-        const faviconPaths = [
-          "./public/favicon.ico",
-          "./resources/assets/favicon.ico",
-          "./favicon.ico"
-        ];
-        for (const faviconPath of faviconPaths) {
-          try {
-            const favicon = Bun.file(faviconPath);
-            if (await favicon.exists()) {
-              return new Response(favicon, {
-                headers: {
-                  "Content-Type": "image/x-icon",
-                  "Cache-Control": "public, max-age=86400"
+      if ((req.method === "GET" || req.method === "HEAD") && path !== "/") {
+        const nodePathMod = await import("path");
+        const publicRoot = nodePathMod.resolve(process13.cwd(), publicDir);
+        let safePathname;
+        try {
+          safePathname = decodeURIComponent(path);
+        } catch {
+          safePathname = path;
+        }
+        if (!safePathname.includes("\x00")) {
+          const resolvedPath = nodePathMod.resolve(publicRoot, `.${safePathname}`);
+          const isInsidePublicRoot = resolvedPath === publicRoot || resolvedPath.startsWith(`${publicRoot}${nodePathMod.sep}`);
+          if (isInsidePublicRoot) {
+            try {
+              const file = Bun.file(resolvedPath);
+              if (await file.exists()) {
+                const stat3 = await file.stat().catch(() => null);
+                if (stat3 && !stat3.isDirectory()) {
+                  const ext = resolvedPath.split(".").pop()?.toLowerCase();
+                  return new Response(file, {
+                    headers: {
+                      "Content-Type": staticContentTypes[ext || ""] || "application/octet-stream",
+                      "Cache-Control": "public, max-age=3600"
+                    }
+                  });
                 }
-              });
-            }
-          } catch {
-            continue;
+              }
+            } catch {}
           }
         }
+      }
+      if (path === "/favicon.ico") {
         return new Response(null, { status: 204 });
       }
       const files = await discoverFiles();
@@ -5682,10 +5901,40 @@ ${crosswindCSS}</style>`;
         </html>
       `, {
         status: 404,
-        headers: { "Content-Type": "text/html" }
+        headers: { "Content-Type": "text/html; charset=utf-8" }
       });
     }
   });
+  if (!options.quiet) {
+    const elapsed = (performance.now() - startTime).toFixed(0);
+    const routeCount = sourceFiles?.length || 0;
+    const patternsStr = patterns.join(", ");
+    console.log();
+    console.log(`  \x1B[36m\x1B[1mstx\x1B[0m`);
+    console.log();
+    console.log(`  \x1B[32m\u279C\x1B[0m  \x1B[1mLocal\x1B[0m:   \x1B[36mhttp://localhost:${port}/\x1B[0m`);
+    console.log(`  \x1B[32m\u279C\x1B[0m  \x1B[1mRoutes\x1B[0m:  \x1B[2m${routeCount} files from ${patternsStr}\x1B[0m`);
+    console.log();
+    console.log(`  \x1B[2mready in ${elapsed}ms\x1B[0m`);
+    console.log();
+    console.log(`  \x1B[2mPress\x1B[0m o + Enter \x1B[2mto open in browser\x1B[0m`);
+    console.log(`  \x1B[2mPress\x1B[0m q + Enter \x1B[2mto quit\x1B[0m`);
+    console.log();
+    if (process13.stdin.isTTY) {
+      process13.stdin.setRawMode(false);
+      const rl = await import("readline");
+      const reader = rl.createInterface({ input: process13.stdin });
+      reader.on("line", (line) => {
+        const cmd = line.trim().toLowerCase();
+        if (cmd === "o") {
+          const openCmd = process13.platform === "darwin" ? "open" : process13.platform === "win32" ? "start" : "xdg-open";
+          Bun.spawn([openCmd, `http://localhost:${port}/`]);
+        } else if (cmd === "q") {
+          process13.exit(0);
+        }
+      });
+    }
+  }
   await Bun.sleep(Number.POSITIVE_INFINITY);
 }
 async function main() {