@stacksjs/stx 0.2.95 → 0.2.97

package/dist/dev-server/serve-app.js

@@ -1,2 +1,682 @@
-// @bun
-import{uf as a}from"../chunk-qa59zejf.js";import"../chunk-20swzkx3.js";import"../chunk-ay9qf4zj.js";import"../chunk-vx22he47.js";import"../chunk-yywfvfph.js";import"../chunk-bk3j0n82.js";import"../chunk-47kpewks.js";import"../chunk-9b6cec0v.js";import"../chunk-a87qqft6.js";import"../chunk-scpkdrdb.js";import"../chunk-29y0hk5z.js";import"../chunk-gkzq8zw4.js";import"../chunk-7j5e8sdj.js";import"../chunk-tffh3b1e.js";import"../chunk-ejayeex8.js";import"../chunk-06w68hyg.js";import"../chunk-n5kg7fpx.js";import"../chunk-jnmgm2xw.js";import"../chunk-9eq3ht5f.js";import"../chunk-0p0nyq50.js";import"../chunk-6eqbxcrd.js";import"../chunk-ewa88139.js";import"../chunk-y6xsqe9a.js";import"../chunk-ynhngsdh.js";import"../chunk-0p1h3p3w.js";import"../chunk-p3fpb79v.js";import"../chunk-pcm1vd8w.js";import"../chunk-7b6s3g65.js";import"../chunk-wvf31nzs.js";import"../chunk-rw7937v4.js";import"../chunk-4qcy5tx6.js";import"../chunk-8dhdpa5h.js";import"../chunk-kdfe4t91.js";import"../chunk-t0c9wvpr.js";import"../chunk-rpx5fa65.js";import"../chunk-d1qh1x2g.js";import"../chunk-zk3d0jjf.js";import"../chunk-baf1hfwh.js";import"../chunk-vw7vqd76.js";import"../chunk-8n9nnqr6.js";import"../chunk-ktkmvaa8.js";import"../chunk-v97390pe.js";import"../chunk-h0hjy0kn.js";import"../chunk-0b9w2w1y.js";import"../chunk-4x7kae4j.js";import"../chunk-rtr974rc.js";import"../chunk-j8tn8enq.js";import"../chunk-pcntd9h4.js";import"../chunk-vgv7jvyz.js";import"../chunk-hjv76kcw.js";import"../chunk-9zbk5zx5.js";import"../chunk-trfswy66.js";import"../chunk-mv4fb50w.js";import"../chunk-rqxf5hns.js";import"../chunk-7sqdeqsw.js";import"../chunk-bndmdahk.js";import"../chunk-khdn7jwe.js";import"../chunk-ckxjqqn9.js";import"../chunk-3te20hqw.js";import"../chunk-jpndqst5.js";import"../chunk-80g54ncj.js";import"../chunk-zcxzdrn7.js";import"../chunk-akf1r75r.js";import"../chunk-zy3rp1ab.js";import"../chunk-10debkj5.js";import"../chunk-0a61y94n.js";import"../chunk-vmxjghsm.js";import"../chunk-jt0ezawy.js";import"../chunk-jjdq01dv.js";import"../chunk-wfg2gm11.js";import"../chunk-5f43yz6z.js";import"../chunk-yrsb6j3z.js";import"../chunk-k848dzsa.js";import"../chunk-xs03kc1h.js";import"../chunk-jz73j3qs.js";import"../chunk-p73meypx.js";import"../chunk-zf2pek72.js";import"../chunk-p1h8065h.js";import"../chunk-p3e0cqtt.js";import"../chunk-4d2y57k7.js";import"../chunk-bhqgmyqw.js";import"../chunk-hrnnh4tq.js";import"../chunk-vg5kt6az.js";import"../chunk-09k66d8a.js";import"../chunk-rw26rpek.js";import"../chunk-b77wjyn7.js";import"../chunk-j447q024.js";import"../chunk-04n64bnt.js";import"../chunk-p077sw22.js";import"../chunk-4aj7ftqb.js";import"../chunk-km25cwz6.js";import"../chunk-x3r64r0c.js";import"../chunk-1sr54zp8.js";import"../chunk-9t14se2t.js";import"../chunk-nm15ccsg.js";import"../chunk-2cdvw21b.js";import"../chunk-hbehnm18.js";import"../chunk-jjb05d21.js";import"../chunk-j58vh0w6.js";import"../chunk-1v49fwr5.js";import"../chunk-drjq2zwg.js";import"../chunk-m491r0rj.js";import"../chunk-aywxfqev.js";import"../chunk-rvptcndz.js";import"../chunk-15nesxgt.js";import"../chunk-q6zhd9yf.js";import"../chunk-8va64c9n.js";import"../chunk-xys2sxh6.js";import"../chunk-e98v1bc6.js";import"../chunk-hy8820vc.js";import"../chunk-d0zjtdw4.js";import"../chunk-mhgk632d.js";import"../chunk-avx8aydt.js";import"../chunk-r0jcmpv6.js";import"../chunk-1xz0w746.js";import"../chunk-m8448qby.js";import"../chunk-kx6eb6ma.js";import"../chunk-g1vt329s.js";import"../chunk-7074g241.js";import"../chunk-9cf97f9p.js";import"../chunk-6djzdes9.js";import"../chunk-v7f8jj15.js";import"../chunk-keawsbpn.js";import"../chunk-8b3z0zd5.js";import"../chunk-hbgxbgam.js";import"../chunk-ejh8fyak.js";import"../chunk-krqn0ddk.js";import"../chunk-y1k17c8b.js";import"../chunk-2j21d3ka.js";import"../chunk-frg705zq.js";import"../chunk-hjm2xab3.js";import"../chunk-07y6m5xx.js";import"../chunk-wazkqv7n.js";import"../chunk-x05nxhyv.js";import"../chunk-31dr4bys.js";import"../chunk-mgj88zeq.js";import"../chunk-m167kjhv.js";import"../chunk-3a4qsygv.js";import"../chunk-dqn9gyhb.js";import"../chunk-988dw6q3.js";import"../chunk-8qc1bsym.js";import"../chunk-xyg1r5w0.js";import"../chunk-7gd339hd.js";import"../chunk-4deg33rw.js";import"../chunk-pa9zb7ty.js";import"../chunk-a2g2qb2y.js";import"../chunk-h5jxydqq.js";import"../chunk-nhv099jv.js";import"../chunk-shv88d2d.js";import"../chunk-0dx4q6yq.js";import"../chunk-ek2w6zvy.js";import"../chunk-9wmq2272.js";import"../chunk-7dkz6z2s.js";import"../chunk-9ecv8aqj.js";import"../chunk-bdk6g1vj.js";import"../chunk-xqq1vxb6.js";import"../chunk-amaa1bev.js";import"../chunk-r5m9xtm7.js";import"../chunk-bs3gmfxz.js";import"../chunk-1zgsgk4b.js";import"../chunk-2jxbwnkz.js";import"../chunk-zen6ax1y.js";import"../chunk-yb1t2h8h.js";import"../chunk-fjk3x41y.js";import"../chunk-5shey2e4.js";import"../chunk-27zsyhrd.js";import"../chunk-7ed3tean.js";import"../chunk-8vtm0m84.js";import"../chunk-tzwtg722.js";import"../chunk-ah88wzbg.js";import"../chunk-v8j49spx.js";import"../chunk-tg2f1mzq.js";import"../chunk-n9dhs1dw.js";import"../chunk-rwrv9wbf.js";import"../chunk-wg9k6h8w.js";import"../chunk-9jtj77jx.js";import"../chunk-qygvvygy.js";import"../chunk-gz5fmp3q.js";import"../chunk-vjbefncc.js";import"../chunk-8xj7c3mf.js";import"../chunk-qvrbjpdc.js";import"../chunk-w3b6m427.js";import"../chunk-rz2ec6g7.js";import"../chunk-35faj94w.js";import"../chunk-djddhmcc.js";import"../chunk-knm8a8yx.js";import"../chunk-xv34zbp4.js";export{a as serveApp};
+import { serve } from "bun";
+import fs from "node:fs";
+import path from "node:path";
+import { detectShell, processShell, composeShellWithPage, stripDocumentWrapper, isSpaNavigation, extractContainerContent, extractLayoutMetadata } from "../app-shell.js";
+import {
+  getHmrServer,
+  injectHotReload,
+  isCssOnlyChange,
+  shouldIgnoreFile,
+  shouldReloadOnChange,
+  stopHmrServer
+} from "../hot-reload.js";
+import { partialsCache } from "../includes.js";
+import { plugin as stxPlugin } from "../plugin.js";
+import { createRouter, matchRoute, formatRoutes, findErrorPage } from "../router.js";
+import {
+  loadMiddlewareFromDirectory,
+  runMiddleware,
+  createMiddlewareContext,
+  createRouteLocation,
+  clearMiddleware,
+  getMiddlewareNames
+} from "../route-middleware.js";
+import { getPageMeta, resetHead } from "../head.js";
+import { clearComponentCache } from "../utils.js";
+import {
+  buildCrosswindCSS,
+  colors,
+  extractSidebarConfig,
+  findAvailablePort,
+  injectCrosswindCSS,
+  openNativeWindow,
+  rebuildCrosswindCSS,
+  setupKeyboardShortcuts
+} from "./index.js";
+function serveStaticFile(filePath) {
+  const file = Bun.file(filePath), ext = path.extname(filePath).toLowerCase(), contentTypes = {
+    ".html": "text/html",
+    ".css": "text/css",
+    ".js": "text/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",
+    ".otf": "font/otf",
+    ".eot": "application/vnd.ms-fontobject"
+  }, cacheHeaders = [".js", ".css", ".json"].includes(ext) ? {
+    "Cache-Control": "no-store, no-cache, must-revalidate",
+    Pragma: "no-cache",
+    Expires: "0"
+  } : {};
+  return new Response(file, {
+    headers: {
+      "Content-Type": contentTypes[ext] || "application/octet-stream",
+      ...cacheHeaders
+    }
+  });
+}
+export async function serveApp(appDir = ".", options = {}) {
+  const port = options.port || 3000, watch = options.watch !== !1, hotReload = options.hotReload !== !1 && watch;
+  let hmrServer = null, actualHmrPort = options.hmrPort || port + 1;
+  const absoluteAppDir = path.resolve(appDir), { loadStxConfig } = await import("../index.js"), projectConfig = await loadStxConfig(absoluteAppDir), stxRoot = projectConfig.root && projectConfig.root !== "." ? path.join(absoluteAppDir, projectConfig.root) : absoluteAppDir, pagesDirName = projectConfig.pagesDir || "pages", pagesDir = path.join(stxRoot, pagesDirName);
+  if (!fs.existsSync(pagesDir)) {
+    console.error(`${colors.red}Error: No '${pagesDirName}' directory found in ${colors.bright}${stxRoot}${colors.reset}`);
+    console.log(`${colors.dim}Create a ${pagesDirName}/ directory with .stx files to define your routes.${colors.reset}`);
+    console.log(`${colors.dim}Example: ${pagesDirName}/index.stx for the homepage.${colors.reset}`);
+    return !1;
+  }
+  const routes = createRouter(stxRoot);
+  if (routes.length === 0) {
+    console.error(`${colors.red}Error: No page files found in ${colors.bright}${pagesDir}${colors.reset}`);
+    return !1;
+  }
+  console.log(`${colors.blue}Found ${colors.bright}${routes.length}${colors.blue} routes${colors.reset}`);
+  const pluginPageDirs = projectConfig?._pluginPageDirs || [], pluginRoutes = [];
+  for (const { dir: pluginDir, prefix: pluginPrefix } of pluginPageDirs)
+    if (fs.existsSync(pluginDir)) {
+      const pRoutes = createRouter(path.dirname(pluginDir), { pagesDir: path.basename(pluginDir) });
+      for (const route of pRoutes) {
+        const prefixedPattern = pluginPrefix === "/" ? route.pattern : `${pluginPrefix}${route.pattern === "/" ? "" : route.pattern}`;
+        pluginRoutes.push({
+          route: { ...route, pattern: prefixedPattern },
+          prefix: pluginPrefix
+        });
+      }
+      if (pRoutes.length > 0)
+        console.log(`${colors.blue}Plugin pages: ${colors.bright}${pRoutes.length}${colors.blue} routes at ${colors.cyan}${pluginPrefix}${colors.reset}`);
+    }
+  const builtPluginPages = new Map;
+  let shell = null, shellPath = null;
+  if (options.stxOptions?.shell !== !1) {
+    shellPath = await detectShell(absoluteAppDir, options.stxOptions?.shell);
+    if (shellPath) {
+      shell = await processShell(shellPath, options.stxOptions || {});
+      if (shell)
+        console.log(`${colors.blue}Using app shell: ${colors.bright}${path.relative(absoluteAppDir, shellPath)}${colors.reset} ${colors.dim}(deprecated: use layouts/default.stx instead)${colors.reset}`);
+    }
+  }
+  clearMiddleware();
+  await loadMiddlewareFromDirectory(absoluteAppDir);
+  const loadedMiddleware = getMiddlewareNames();
+  if (loadedMiddleware.length > 0)
+    console.log(`${colors.blue}Loaded ${colors.bright}${loadedMiddleware.length}${colors.blue} middleware: ${colors.dim}${loadedMiddleware.join(", ")}${colors.reset}`);
+  let apiRoutes = {}, customRouter = null;
+  try {
+    const { loadStxConfig } = await import("../index.js"), projectConfig = await loadStxConfig(absoluteAppDir);
+    if (projectConfig?.apiRouter) {
+      customRouter = projectConfig?.apiRouter;
+      console.log(`${colors.blue}Using custom router for API handling${colors.reset}`);
+    }
+    if (projectConfig?.apiRoutes) {
+      apiRoutes = projectConfig.apiRoutes;
+      const routeCount = Object.keys(apiRoutes).length;
+      if (routeCount > 0)
+        console.log(`${colors.blue}Loaded ${colors.bright}${routeCount} API route${routeCount > 1 ? "s" : ""}${colors.reset}`);
+    }
+    if (projectConfig?.broadcasting?.enabled)
+      try {
+        const { startBroadcasting, loadChannels } = await import("../broadcasting.js"), bcConfig = projectConfig.broadcasting;
+        await startBroadcasting(bcConfig);
+        const bcPort = bcConfig.port ?? 6001;
+        console.log(`${colors.magenta}Broadcasting on ${colors.cyan}ws://localhost:${bcPort}/ws${colors.reset}`);
+        const channelsFile = path.join(process.cwd(), "channels.ts");
+        if (fs.existsSync(channelsFile))
+          try {
+            const count = await loadChannels(channelsFile);
+            console.log(`${colors.blue}Loaded ${colors.bright}${count} broadcast channel${count !== 1 ? "s" : ""}${colors.blue} from channels.ts${colors.reset}`);
+          } catch (err) {
+            console.warn(`${colors.yellow}Failed to load channels.ts: ${err.message}${colors.reset}`);
+          }
+      } catch (err) {
+        console.warn(`${colors.yellow}Broadcasting failed to start: ${err.message}${colors.reset}`);
+      }
+  } catch {}
+  const outputDir = path.join(absoluteAppDir, ".stx/output");
+  fs.mkdirSync(outputDir, { recursive: !0 });
+  const builtPages = new Map, streamingRoutes = new Set, renderErrorPage = async (statusCode) => {
+    const errorPagePath = findErrorPage(pagesDir, statusCode);
+    if (!errorPagePath)
+      return null;
+    try {
+      const result = await Bun.build({
+        entrypoints: [errorPagePath],
+        outdir: outputDir,
+        plugins: [stxPlugin],
+        publicPath: "/",
+        define: {
+          "process.env.NODE_ENV": '"development"'
+        },
+        ...options.stxOptions
+      });
+      if (!result.success)
+        return null;
+      const htmlOutput = result.outputs.find((o) => o.path.endsWith(".html"));
+      if (!htmlOutput)
+        return null;
+      return await Bun.file(htmlOutput.path).text();
+    } catch {
+      return null;
+    }
+  }, buildPage = async (route, requestParams) => {
+    try {
+      const { processDirectives, extractVariables, defaultConfig, loadStxConfig, injectRouterScript } = await import("../index.js"), { checkCache, cacheTemplate, readFileCached, templateCache } = await import("../caching.js"), projectConfig = await loadStxConfig(absoluteAppDir), resolveRel = (dir) => {
+        if (!dir)
+          return dir;
+        if (path.isAbsolute(dir))
+          return dir;
+        return path.resolve(absoluteAppDir, dir);
+      }, merged = {
+        ...defaultConfig,
+        ...projectConfig,
+        ...options.stxOptions,
+        autoShell: !0
+      };
+      if (options.debugDirectives)
+        merged.debug = !0;
+      merged.partialsDir = resolveRel(merged.partialsDir);
+      merged.componentsDir = resolveRel(merged.componentsDir);
+      merged.layoutsDir = resolveRel(merged.layoutsDir);
+      merged.storesDir = resolveRel(merged.storesDir || "stores");
+      merged.cachePath = resolveRel(merged.cachePath || ".stx/cache");
+      const isStaticBuild = !requestParams && !options.profile, cacheEnabled = merged.cache !== !1;
+      if (cacheEnabled && isStaticBuild) {
+        const memEntry = templateCache.get(route.filePath);
+        if (memEntry)
+          try {
+            if ((await fs.promises.stat(route.filePath)).mtime.getTime() <= memEntry.mtime) {
+              let valid = !0;
+              for (const dep of memEntry.dependencies) {
+                if (!fs.existsSync(dep)) {
+                  valid = !1;
+                  break;
+                }
+                if ((await fs.promises.stat(dep)).mtime.getTime() > memEntry.mtime) {
+                  valid = !1;
+                  break;
+                }
+              }
+              if (valid) {
+                let output = memEntry.output;
+                if (shell)
+                  output = stripDocumentWrapper(output, { preserveHead: !0 });
+                return { route, content: output };
+              }
+            }
+          } catch {}
+        const cached = await checkCache(route.filePath, merged);
+        if (cached) {
+          let output = cached;
+          if (shell)
+            output = stripDocumentWrapper(output, { preserveHead: !0 });
+          return { route, content: output };
+        }
+      }
+      const content = cacheEnabled ? await readFileCached(route.filePath) : await Bun.file(route.filePath).text(), { classifyAllScripts } = await import("../index.js"), classified = classifyAllScripts(content), serverScripts = classified.server.map((s) => s.content);
+      let templateContent = content;
+      for (const s of classified.server)
+        templateContent = templateContent.replace(s.fullTag, "");
+      const context = {
+        __filename: route.filePath,
+        __dirname: path.dirname(route.filePath),
+        params: requestParams ?? {}
+      }, { resetHead } = await import("../head.js");
+      resetHead();
+      for (const scriptBody of serverScripts)
+        try {
+          await extractVariables(scriptBody, context, route.filePath);
+        } catch (e) {
+          if (options.stxOptions?.debug)
+            console.error("[stx] variable extraction error", route.filePath, e?.message || e);
+        }
+      const dependencies = new Set;
+      let output;
+      if (options.profile) {
+        const t0 = performance.now();
+        output = await processDirectives(templateContent, context, route.filePath, merged, dependencies);
+        const ms = performance.now() - t0, rel = path.relative(absoluteAppDir, route.filePath) || route.filePath;
+        console.log(`[stx:profile] ${rel} \u2192 ${ms.toFixed(2)}ms`);
+      } else
+        output = await processDirectives(templateContent, context, route.filePath, merged, dependencies);
+      if (!shell)
+        output = await injectRouterScript(output);
+      {
+        const { interpolateScriptExpressions } = await import("../expressions.js");
+        output = output.replace(/<script\b([^>]*)>([\s\S]*?)<\/script>/g, (full, attrs, body) => {
+          if (!/function\s+__stx_setup_/.test(body))
+            return full;
+          return `<script${attrs}>${interpolateScriptExpressions(body, context)}</script>`;
+        });
+      }
+      if (shell)
+        output = stripDocumentWrapper(output, { preserveHead: !0 });
+      if (cacheEnabled && isStaticBuild)
+        await cacheTemplate(route.filePath, output, dependencies, merged);
+      const { extractStreamBoundaries } = await import("../streaming.js");
+      let boundaries = extractStreamBoundaries(context);
+      const streamTemplates = context.__streamTemplates;
+      if (streamTemplates && typeof streamTemplates === "object" && Object.keys(streamTemplates).length > 0) {
+        const dataFns = context.streamBoundaries || {}, fragmentConfig = { ...merged, autoShell: !1 }, tplBoundaries = Object.keys(streamTemplates).map((id) => ({
+          id,
+          render: async () => {
+            const data = typeof dataFns[id] === "function" ? await dataFns[id]() : void 0;
+            return processDirectives(streamTemplates[id], { ...context, $boundary: data }, route.filePath, fragmentConfig, new Set);
+          }
+        })), tplIds = new Set(tplBoundaries.map((b) => b.id));
+        boundaries = [...(boundaries || []).filter((b) => !tplIds.has(b.id)), ...tplBoundaries];
+      }
+      if (boundaries && boundaries.length > 0)
+        streamingRoutes.add(route.pattern);
+      else
+        boundaries = void 0;
+      return { route, content: output, boundaries };
+    } catch (error) {
+      console.error(`${colors.red}Error building ${colors.bright}${route.pattern}${colors.reset}:`, error);
+      return null;
+    }
+  }, BUILD_CONCURRENCY = 8, buildAllPages = async () => {
+    builtPages.clear();
+    builtPluginPages.clear();
+    for (let i = 0;i < routes.length; i += BUILD_CONCURRENCY) {
+      const chunk = routes.slice(i, i + BUILD_CONCURRENCY), results = await Promise.all(chunk.map((route) => buildPage(route)));
+      for (const built of results)
+        if (built)
+          builtPages.set(built.route.pattern, built);
+    }
+    for (let i = 0;i < pluginRoutes.length; i += BUILD_CONCURRENCY) {
+      const chunk = pluginRoutes.slice(i, i + BUILD_CONCURRENCY), results = await Promise.all(chunk.map(({ route }) => buildPage(route)));
+      for (const built of results)
+        if (built)
+          builtPluginPages.set(built.route.pattern, built);
+    }
+    return builtPages.size > 0;
+  };
+  console.log(`${colors.blue}Building pages...${colors.reset}`);
+  if (!await buildAllPages()) {
+    console.error(`${colors.red}No pages were successfully built${colors.reset}`);
+    return !1;
+  }
+  await buildCrosswindCSS(absoluteAppDir);
+  let actualPort = port;
+  try {
+    actualPort = await findAvailablePort(port);
+    if (actualPort !== port)
+      console.log(`${colors.yellow}Port ${port} is busy, using port ${actualPort} instead${colors.reset}`);
+  } catch {
+    console.error(`${colors.red}Could not find an available port${colors.reset}`);
+    return !1;
+  }
+  if (hotReload) {
+    const desiredHmrPort = options.hmrPort || actualPort + 1;
+    hmrServer = getHmrServer({ wsPort: desiredHmrPort, verbose: !1 });
+    actualHmrPort = hmrServer.start(desiredHmrPort);
+  }
+  const injectRouteParams = (content, params) => {
+    const paramsScript = `<script>(function(){var s=typeof stx!=='undefined'?stx:{};s._rp=${JSON.stringify(params)};if(s.setRouteParams)s.setRouteParams(s._rp);})()</script>`;
+    if (content.includes("</head>"))
+      return content.replace("</head>", `${paramsScript}</head>`);
+    if (content.includes("<body"))
+      return content.replace(/<body([^>]*)>/, `<body$1>${paramsScript}`);
+    return paramsScript + content;
+  };
+  console.log(`${colors.blue}Starting server...${colors.reset}`);
+  const server = serve({
+    port: actualPort,
+    async fetch(request) {
+      const url = new URL(request.url), publicDirName = projectConfig?.publicDir || "public", publicPath = path.join(absoluteAppDir, publicDirName, url.pathname), distPath = path.join(absoluteAppDir, url.pathname), outputPath = path.join(outputDir, url.pathname), [publicStat, distStat, outputStat] = await Promise.all([
+        fs.promises.stat(publicPath).catch(() => null),
+        fs.promises.stat(distPath).catch(() => null),
+        fs.promises.stat(outputPath).catch(() => null)
+      ]);
+      if (publicStat?.isFile())
+        return serveStaticFile(publicPath);
+      if (distStat?.isFile())
+        return serveStaticFile(distPath);
+      if (outputStat?.isFile())
+        return serveStaticFile(outputPath);
+      if (url.pathname.startsWith("/_stx/component/")) {
+        const componentName = decodeURIComponent(url.pathname.slice(16));
+        if (componentName)
+          try {
+            const componentTemplate = `<${componentName} />`, componentOpts = { ...buildConfig, autoShell: !1 }, html = await processDirectives(componentTemplate, {}, path.join(absoluteAppDir, "components", `${componentName}.stx`), componentOpts, new Set);
+            return new Response(html, { headers: { "Content-Type": "text/html" } });
+          } catch (e) {
+            return new Response(`<div class="stx-async-error">${e.message}</div>`, { status: 500, headers: { "Content-Type": "text/html" } });
+          }
+      }
+      if (url.pathname === "/_stx/img") {
+        const { handleImageRequest } = await import("../image-optimization/serve.js"), imgResponse = await handleImageRequest(request, {
+          publicDir: path.join(absoluteAppDir, publicDirName),
+          cacheDir: path.join(absoluteAppDir, ".stx/cache/img")
+        });
+        if (imgResponse)
+          return imgResponse;
+      }
+      if (customRouter)
+        try {
+          const routerResponse = await customRouter.handleRequest(request);
+          if (routerResponse.status !== 404)
+            return routerResponse;
+        } catch {}
+      if (apiRoutes[url.pathname])
+        try {
+          return await apiRoutes[url.pathname](request);
+        } catch (err) {
+          return new Response(JSON.stringify({ error: err.message }), {
+            status: 500,
+            headers: { "Content-Type": "application/json" }
+          });
+        }
+      const routeMatch = matchRoute(url.pathname, routes);
+      if (routeMatch) {
+        let builtPage = builtPages.get(routeMatch.route.pattern);
+        const isStreamingRoute = streamingRoutes.has(routeMatch.route.pattern);
+        if (routeMatch.route.isDynamic && Object.keys(routeMatch.params).length > 0 || isStreamingRoute) {
+          const rebuilt = await buildPage(routeMatch.route, routeMatch.params);
+          if (rebuilt)
+            builtPage = rebuilt;
+        }
+        if (builtPage) {
+          const pageMeta = getPageMeta();
+          if (pageMeta.validate) {
+            if (!await pageMeta.validate({ params: routeMatch.params })) {
+              const custom404 = await renderErrorPage(404);
+              if (custom404) {
+                let content = custom404;
+                content = await injectCrosswindCSS(content, absoluteAppDir);
+                if (hotReload)
+                  content = injectHotReload(content, actualHmrPort);
+                return new Response(content, {
+                  status: 404,
+                  headers: { "Content-Type": "text/html" }
+                });
+              }
+              return new Response("Not Found", { status: 404 });
+            }
+          }
+          if (pageMeta.middleware) {
+            const toRoute = createRouteLocation(url.pathname, routeMatch.params, pageMeta, url.search), middlewareContext = createMiddlewareContext(toRoute, null, request), middlewareResult = await runMiddleware(pageMeta.middleware, middlewareContext);
+            if (middlewareResult.redirect) {
+              const redirectUrl = middlewareResult.redirect.path, statusCode = middlewareResult.redirect.options.redirectCode || 302, headers = new Headers(middlewareResult.responseHeaders);
+              headers.set("Location", redirectUrl);
+              return new Response(null, {
+                status: statusCode,
+                headers
+              });
+            }
+            if (middlewareResult.abort) {
+              const { statusCode, message } = middlewareResult.abort.error;
+              return new Response(`<!DOCTYPE html><html><head><title>Error ${statusCode}</title></head><body><h1>Error ${statusCode}</h1><p>${message}</p></body></html>`, {
+                status: statusCode,
+                headers: { "Content-Type": "text/html" }
+              });
+            }
+            if (Object.keys(middlewareResult.state).length > 0) {
+              const stateScript = `<script>(function(){var s=typeof stx!=='undefined'?stx:{};s._ms=${JSON.stringify(middlewareResult.state)};if(s.setMiddlewareState)s.setMiddlewareState(s._ms);})()</script>`;
+              builtPage.content = builtPage.content.replace("</head>", `${stateScript}</head>`);
+            }
+          }
+          let content = builtPage.content;
+          if (shell && isSpaNavigation(request)) {
+            const layoutMetadata = extractLayoutMetadata(content), titleMatch = content.match(/<title[^>]*>([\s\S]*?)<\/title>/i), pageTitle = titleMatch ? titleMatch[1].trim() : "";
+            if (Object.keys(routeMatch.params).length > 0)
+              content = injectRouteParams(content, routeMatch.params);
+            content = await injectCrosswindCSS(content, absoluteAppDir);
+            const routerContainer = projectConfig?.router?.container || "main";
+            content = extractContainerContent(content, routerContainer);
+            return new Response(content, {
+              headers: {
+                "Content-Type": "text/html",
+                "X-STX-Fragment": "true",
+                "X-STX-Layout": layoutMetadata.layout,
+                "X-STX-Layout-Group": layoutMetadata.group,
+                ...pageTitle && { "X-STX-Title": encodeURIComponent(pageTitle) },
+                "Cache-Control": "no-store, no-cache, must-revalidate"
+              }
+            });
+          }
+          if (shell)
+            content = composeShellWithPage(shell, content);
+          if (Object.keys(routeMatch.params).length > 0)
+            content = injectRouteParams(content, routeMatch.params);
+          content = await injectCrosswindCSS(content, absoluteAppDir);
+          if (hotReload)
+            content = injectHotReload(content, actualHmrPort);
+          if (options.native) {
+            const nativeSidebarInjection = "<style>[data-stx-sidebar],.stx-sidebar{display:none!important}</style><script>window.__craftNativeSidebar=true;document.documentElement.classList.add('has-native-sidebar')</script>";
+            if (content.includes("<head>"))
+              content = content.replace("<head>", `<head>${nativeSidebarInjection}`);
+            else
+              content = `<head>${nativeSidebarInjection}</head>` + content;
+          }
+          if (options.titlebarHidden) {
+            const tbInjection = "<style>html.stx-titlebar-hidden .stx-traffic-lights-dot{visibility:hidden}</style><script>document.documentElement.classList.add('stx-titlebar-hidden')</script>";
+            if (content.includes("<head>"))
+              content = content.replace("<head>", `<head>${tbInjection}`);
+            else
+              content = `<head>${tbInjection}</head>${content}`;
+          }
+          if (builtPage.boundaries && builtPage.boundaries.length > 0) {
+            const { renderStreamingPage, streamToResponse } = await import("../streaming.js");
+            return streamToResponse(renderStreamingPage(content, builtPage.boundaries, { timeoutMs: 30000 }), {
+              headers: {
+                "Cache-Control": "no-store, no-cache, must-revalidate",
+                Pragma: "no-cache",
+                Expires: "0"
+              }
+            });
+          }
+          return new Response(content, {
+            headers: {
+              "Content-Type": "text/html",
+              "Cache-Control": "no-store, no-cache, must-revalidate",
+              Pragma: "no-cache",
+              Expires: "0"
+            }
+          });
+        }
+      }
+      if (pluginRoutes.length > 0) {
+        const allPluginPatterns = pluginRoutes.map((pr) => pr.route), pluginMatch = matchRoute(url.pathname, allPluginPatterns);
+        if (pluginMatch) {
+          const builtPage = builtPluginPages.get(pluginMatch.route.pattern);
+          if (builtPage) {
+            let content = builtPage.content;
+            if (shell)
+              content = composeShellWithPage(shell, content);
+            if (Object.keys(pluginMatch.params).length > 0)
+              content = injectRouteParams(content, pluginMatch.params);
+            content = await injectCrosswindCSS(content, absoluteAppDir);
+            if (hotReload)
+              content = injectHotReload(content, actualHmrPort);
+            return new Response(content, {
+              headers: {
+                "Content-Type": "text/html",
+                "Cache-Control": "no-store, no-cache, must-revalidate",
+                Pragma: "no-cache",
+                Expires: "0"
+              }
+            });
+          }
+        }
+        for (const { prefix: pluginPrefix } of pluginPageDirs)
+          if (pluginPrefix !== "/" && url.pathname.startsWith(pluginPrefix)) {
+            const pluginIndex = builtPluginPages.get(pluginPrefix) || builtPluginPages.get(pluginPrefix + "/");
+            if (pluginIndex) {
+              let content = pluginIndex.content;
+              if (shell)
+                content = composeShellWithPage(shell, content);
+              content = await injectCrosswindCSS(content, absoluteAppDir);
+              if (hotReload)
+                content = injectHotReload(content, actualHmrPort);
+              return new Response(content, {
+                headers: {
+                  "Content-Type": "text/html",
+                  "Cache-Control": "no-store, no-cache, must-revalidate",
+                  Pragma: "no-cache",
+                  Expires: "0"
+                }
+              });
+            }
+          }
+      }
+      const indexPage = builtPages.get("/");
+      if (indexPage) {
+        let content = indexPage.content;
+        content = await injectCrosswindCSS(content, absoluteAppDir);
+        if (hotReload)
+          content = injectHotReload(content, actualHmrPort);
+        if (options.native) {
+          const nativeSidebarInjection = "<style>[data-stx-sidebar],.stx-sidebar{display:none!important}</style><script>window.__craftNativeSidebar=true;document.documentElement.classList.add('has-native-sidebar')</script>";
+          if (content.includes("<head>"))
+            content = content.replace("<head>", `<head>${nativeSidebarInjection}`);
+          else
+            content = `<head>${nativeSidebarInjection}</head>` + content;
+        }
+        return new Response(content, {
+          headers: {
+            "Content-Type": "text/html",
+            "Cache-Control": "no-store, no-cache, must-revalidate",
+            Pragma: "no-cache",
+            Expires: "0"
+          }
+        });
+      }
+      const custom404 = await renderErrorPage(404);
+      if (custom404) {
+        let content = custom404;
+        content = await injectCrosswindCSS(content, absoluteAppDir);
+        if (hotReload)
+          content = injectHotReload(content, actualHmrPort);
+        return new Response(content, {
+          status: 404,
+          headers: { "Content-Type": "text/html" }
+        });
+      }
+      return new Response("Not Found", { status: 404 });
+    },
+    async error(error) {
+      const custom500 = await renderErrorPage(500);
+      if (custom500)
+        return new Response(custom500, {
+          status: 500,
+          headers: { "Content-Type": "text/html" }
+        });
+      return new Response(`<pre>${error}
+${error.stack}</pre>`, {
+        headers: { "Content-Type": "text/html" }
+      });
+    }
+  });
+  console.clear();
+  console.log(`
+${colors.blue}stx${colors.reset}  ${colors.green}${process.env.stx_VERSION || "v0.0.10"}${colors.reset}  ${colors.dim}ready in ${Math.random() * 10 + 5 | 0}.${Math.random() * 90 + 10 | 0} ms${colors.reset}`);
+  console.log(`
+${colors.bright}\u2192  ${colors.cyan}http://localhost:${actualPort}/${colors.reset}`);
+  if (hotReload)
+    console.log(`${colors.dim}   HMR: ws://localhost:${actualHmrPort}${colors.reset}`);
+  console.log(`
+${colors.yellow}Routes:${colors.reset}`);
+  const allRouteStrings = [...formatRoutes(routes, absoluteAppDir)];
+  for (const { route: pluginRoute } of pluginRoutes)
+    allRouteStrings.push(`${pluginRoute.pattern}`);
+  allRouteStrings.forEach((str, i) => {
+    const prefix = i === allRouteStrings.length - 1 ? "\u2514\u2500 " : "\u251C\u2500 ";
+    console.log(`  ${colors.green}${prefix}${colors.reset}${str}`);
+  });
+  console.log(`
+Press ${colors.cyan}h${colors.reset} + ${colors.cyan}Enter${colors.reset} to show shortcuts`);
+  setupKeyboardShortcuts(server.url.toString(), () => {
+    if (hmrServer)
+      stopHmrServer();
+    server.stop();
+  });
+  if (options.native) {
+    let sidebarConfig;
+    const indexPath = path.join(pagesDir, "index.stx");
+    if (fs.existsSync(indexPath)) {
+      const templateContent = await Bun.file(indexPath).text();
+      sidebarConfig = extractSidebarConfig(templateContent);
+    }
+    const appWindow = projectConfig?.app?.window ?? {};
+    await openNativeWindow(actualPort, {
+      title: projectConfig?.app?.head?.title || path.basename(absoluteAppDir) || "stx App",
+      width: appWindow.width,
+      height: appWindow.height,
+      darkMode: appWindow.darkMode,
+      hotReload: appWindow.hotReload,
+      titlebarHidden: appWindow.titlebarHidden ?? options.titlebarHidden === !0,
+      nativeSidebar: !!sidebarConfig,
+      sidebarConfig
+    });
+  }
+  if (watch) {
+    console.log(`${colors.blue}Watching for changes...${colors.reset}`);
+    const isStaticAsset = (filename) => {
+      return filename.startsWith("public/") || filename.startsWith("public\\");
+    }, isTemplateFile = (filename) => {
+      const ext = filename.toLowerCase();
+      return ext.endsWith(".stx") || ext.endsWith(".html") || ext.endsWith(".md");
+    }, watcher = fs.watch(absoluteAppDir, { recursive: !0 }, async (eventType, filename) => {
+      if (!filename || shouldIgnoreFile(filename))
+        return;
+      if (shouldReloadOnChange(filename))
+        if (isStaticAsset(filename)) {
+          console.log(`${colors.cyan}${filename} changed${colors.reset}`);
+          if (hotReload && hmrServer)
+            hmrServer.reload(filename);
+        } else if (isTemplateFile(filename)) {
+          console.log(`${colors.yellow}${filename} changed, rebuilding...${colors.reset}`);
+          partialsCache.clear();
+          clearComponentCache();
+          try {
+            const { invalidateFileCache, templateCache } = await import("../caching.js");
+            invalidateFileCache(path.resolve(absoluteAppDir, filename));
+            templateCache.delete(path.resolve(absoluteAppDir, filename));
+          } catch {}
+          if (shellPath && filename) {
+            if (path.resolve(absoluteAppDir, filename) === shellPath || path.basename(shellPath) === filename) {
+              const newShell = await processShell(shellPath, options.stxOptions || {});
+              if (newShell)
+                shell = newShell;
+            }
+          }
+          await buildAllPages();
+          await rebuildCrosswindCSS(absoluteAppDir);
+          if (hotReload && hmrServer)
+            hmrServer.reload(filename);
+        } else {
+          console.log(`${colors.yellow}${filename} changed, rebuilding...${colors.reset}`);
+          partialsCache.clear();
+          clearComponentCache();
+          try {
+            const { invalidateFileCache, templateCache } = await import("../caching.js");
+            invalidateFileCache(path.resolve(absoluteAppDir, filename));
+            templateCache.delete(path.resolve(absoluteAppDir, filename));
+          } catch {}
+          await buildAllPages();
+          if (hotReload && hmrServer)
+            hmrServer.reload(filename);
+        }
+      else if (isCssOnlyChange(filename)) {
+        console.log(`${colors.cyan}CSS ${filename} changed${colors.reset}`);
+        if (hotReload && hmrServer)
+          hmrServer.updateCss(filename);
+      }
+    });
+    process.on("SIGINT", () => {
+      watcher.close();
+      if (hmrServer)
+        stopHmrServer();
+      server.stop();
+      process.exit(0);
+    });
+  }
+  return !0;
+}