stx-router 0.2.48 → 0.2.53

package/dist/index.js

@@ -1,719 +1,170 @@
 // @bun
-// src/file-router.ts
-import fs3 from "fs";
-import path4 from "path";
+// src/client.ts
+function getRouterScript() {
+  return `
+;(function(){
+  'use strict';
+  if(window.__stxRouter)return;
 
-// src/codegen.ts
-import fs from "fs";
-import path from "path";
-function generateRouteTypes(routes, outputDir) {
-  const lines = [
-    "// Auto-generated by STX - do not edit",
-    'declare module "stx/routes" {',
-    "  interface RouteMap {"
-  ];
-  for (const route of routes) {
-    const paramEntries = [];
-    for (const p of route.params) {
-      const type = route.pattern.includes(`:${p}*`) ? "string[]" : "string";
-      paramEntries.push(`${p}: ${type}`);
-    }
-    const paramsStr = paramEntries.join("; ");
-    lines.push(`    '${route.pattern}': { ${paramsStr} }`);
-  }
-  lines.push("  }", "}", "");
-  fs.mkdirSync(outputDir, { recursive: true });
-  fs.writeFileSync(path.join(outputDir, "route-types.d.ts"), lines.join(`
-`));
-}
-function generateRouteManifest(routes, outputDir, pagesDir) {
-  const cwd = process.cwd();
-  const relativePages = path.relative(cwd, pagesDir);
-  const excludeDirs = ["components", "layouts", "partials"];
-  const pageRoutes = routes.filter((r) => !excludeDirs.some((dir) => r.pattern.startsWith(`/${dir}/`) || r.pattern === `/${dir}`));
-  const lines = [
-    "// Auto-generated by stx \u2014 do not edit",
-    `// Source: ${relativePages || "pages"}/`,
-    "",
-    "export const routes = ["
-  ];
-  for (const route of pageRoutes) {
-    const relFile = path.relative(cwd, route.filePath).replace(/\\/g, "/");
-    const params = JSON.stringify(route.params);
-    const layoutStr = route.layout ? `, layout: '${path.relative(cwd, route.layout).replace(/\\/g, "/")}'` : "";
-    lines.push(`  { pattern: '${route.pattern}', filePath: '${relFile}', isDynamic: ${route.isDynamic}, params: ${params}${layoutStr} },`);
-  }
-  lines.push("] as const", "");
-  lines.push("export type RouteName = typeof routes[number]['pattern']", "");
-  fs.mkdirSync(outputDir, { recursive: true });
-  fs.writeFileSync(path.join(outputDir, "routes.ts"), lines.join(`
-`));
-}
+  // \u2500\u2500 Configuration \u2500\u2500
+  var defaults={container:'main',loadingClass:'stx-navigating',viewTransitions:true,cache:true,scrollToTop:true,prefetch:true,progress:true,progressColor:'#78dce8',progressHeight:'2px',interceptAllLinks:false};
+  var o=Object.assign({},defaults,window.__stxRouterConfig||{},window.STX_ROUTER_OPTIONS||{});
+  var containerSel=o.container;
+  var debug=!!o.debug;
+  function log(){if(debug&&typeof console!=='undefined'&&console.log)console.log.apply(console,arguments)}
 
-// src/matcher.ts
-import path2 from "path";
-function filePathToPattern(filePath, pagesDir) {
-  const relativePath = path2.relative(pagesDir, filePath);
-  let route = relativePath.replace(/\.(stx|md)$/, "");
-  route = route.split(path2.sep).join("/");
-  if (route === "index") {
-    return "/";
+  // \u2500\u2500 Progress bar (0\u2192100% at top of viewport) \u2500\u2500
+  // Native loading indicator baked into the router. Starts when navigation
+  // begins, trickles up to ~90% during fetch, snaps to 100% + fades on
+  // completion. Opt-out via window.__stxRouterConfig={progress:false}.
+  var progEl=null;
+  var progVal=0;
+  var progTimer=null;
+  function setProgress(v){
+    progVal=v<0?0:(v>100?100:v);
+    if(!progEl)return;
+    progEl.style.opacity=progVal>0?'1':'0';
+    progEl.style.transform='scaleX('+(progVal/100)+')';
   }
-  if (route.endsWith("/index")) {
-    route = route.slice(0, -6);
+  function startProgress(){
+    if(!o.progress||!progEl)return;
+    if(progTimer){clearInterval(progTimer);progTimer=null}
+    setProgress(8);
+    progTimer=setInterval(function(){
+      if(progVal>=90)return;
+      // Asymptotic trickle \u2014 fast at first, slower near 90%
+      var inc=Math.max(0.4,(90-progVal)*0.08);
+      setProgress(progVal+inc);
+    },160);
   }
-  route = route.replace(/\[\[([^\]]+)\]\]/g, ":$1?");
-  route = route.replace(/\[([^\]]+)\]/g, ":$1");
-  route = route.replace(/:\.\.\.([^/]+)/g, ":$1*");
-  return `/${route}`;
-}
-function patternToRegex(pattern) {
-  const params = [];
-  let regexStr = pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&");
-  regexStr = regexStr.replace(/\/:([^/]+)\?/g, (_, name) => {
-    params.push(name);
-    return "(?:/([^/]+))?";
-  });
-  regexStr = regexStr.replace(/:([^/]+)\*/g, (_, name) => {
-    params.push(name);
-    return "(.+)";
-  });
-  regexStr = regexStr.replace(/:([^/]+)/g, (_, name) => {
-    params.push(name);
-    return "([^/]+)";
-  });
-  regexStr = `^${regexStr}$`;
-  return { regex: new RegExp(regexStr), params };
-}
-function matchRoute(pathname, routes) {
-  const normalizedPath = pathname === "" ? "/" : pathname;
-  for (const route of routes) {
-    const match = normalizedPath.match(route.regex);
-    if (match) {
-      const params = {};
-      route.params.forEach((name, index) => {
-        params[name] = match[index + 1];
-      });
-      return { route, params };
+  function finishProgress(){
+    if(!o.progress||!progEl)return;
+    if(progTimer){clearInterval(progTimer);progTimer=null}
+    setProgress(100);
+    // Fade out, then reset. Delays chosen so the "full" state is briefly
+    // visible before the bar disappears.
+    setTimeout(function(){
+      if(!progEl)return;
+      progEl.style.opacity='0';
+      setTimeout(function(){progVal=0;if(progEl)progEl.style.transform='scaleX(0)'},260);
+    },180);
+  }
+
+  var cache={};
+  var prefetching={};
+  var isNavigating=false;
+
+  // Extract top-level CSS blocks (rules AND @media blocks with nested braces).
+  // The old regex ([^{}]+{[^{}]*}) silently dropped @media blocks because
+  // it couldn't handle nested braces \u2014 causing responsive classes (lg:, md:)
+  // to vanish after SPA navigation.
+  function extractCssBlocks(css){
+    var blocks=[];
+    var i=0;
+    var len=css.length;
+    while(i<len){
+      // Skip whitespace
+      while(i<len&&(css[i]===' '||css[i]==='\\n'||css[i]==='\\r'||css[i]==='\\t'))i++;
+      if(i>=len)break;
+      // Find the start of a block (first {)
+      var blockStart=i;
+      var bracePos=css.indexOf('{',i);
+      if(bracePos===-1)break;
+      // Walk forward tracking brace depth to find the matching close
+      var depth=0;
+      var j=bracePos;
+      while(j<len){
+        if(css[j]==='{')depth++;
+        else if(css[j]==='}'){depth--;if(depth===0){j++;break}}
+        j++;
+      }
+      if(depth!==0)break;
+      blocks.push(css.slice(blockStart,j).trim());
+      i=j;
     }
+    return blocks;
   }
-  return null;
-}
 
-// src/nested-layouts.ts
-import fs2 from "fs";
-import path3 from "path";
-function resolveLayoutChain(routeFilePath, pagesDir) {
-  const layouts = [];
-  let dir = path3.dirname(routeFilePath);
-  while (dir.startsWith(pagesDir) || dir === pagesDir) {
-    const layoutFile = path3.join(dir, "_layout.stx");
-    if (fs2.existsSync(layoutFile)) {
-      layouts.unshift(layoutFile);
+  function mergeCrosswindCSS(existing,incoming){
+    var blocks=extractCssBlocks(incoming);
+    var newBlocks=[];
+    for(var bi=0;bi<blocks.length;bi++){
+      if(existing.indexOf(blocks[bi])===-1)newBlocks.push(blocks[bi]);
     }
-    if (dir === pagesDir)
-      break;
-    dir = path3.dirname(dir);
+    if(newBlocks.length>0)return existing+'\\n'+newBlocks.join('\\n');
+    return null;
   }
-  return layouts;
-}
 
-// src/file-router.ts
-function scanDirectory(dir, extensions) {
-  const files = [];
-  if (!fs3.existsSync(dir)) {
-    return files;
+  function getContainer(){
+    return document.querySelector(containerSel)||document.querySelector('[data-stx-content]')||document.querySelector('main');
   }
-  const entries = fs3.readdirSync(dir, { withFileTypes: true });
-  for (const entry of entries) {
-    const fullPath = path4.join(dir, entry.name);
-    if (entry.isDirectory()) {
-      if (entry.name.startsWith(".")) {
-        continue;
-      }
-      files.push(...scanDirectory(fullPath, extensions));
-    } else if (entry.isFile()) {
-      const ext = path4.extname(entry.name);
-      if (extensions.includes(ext)) {
-        if (entry.name.startsWith("_") && entry.name !== "_layout.stx") {
-          continue;
-        }
-        if (entry.name === "_layout.stx") {
-          continue;
-        }
-        files.push(fullPath);
-      }
+
+  // \u2500\u2500 Navigation \u2500\u2500
+  // Layout group detection \u2014 layouts in the same group share a <main> container.
+  // Only truly different layout groups trigger a full page reload.
+  var layoutCache={};
+  var layoutGroupCache={};
+  // Track executed script hashes to prevent redeclaration errors on navigation.
+  // Layout-level scripts (theme, nav setup) execute on initial page load and
+  // should NOT re-execute when navigating to another page with the same layout.
+  var executedScriptHashes={};
+  function hashScript(code){
+    var h=0;for(var i=0;i<code.length;i++){h=((h<<5)-h)+code.charCodeAt(i);h|=0}
+    return h;
+  }
+  // Record scripts from the initial page load
+  document.querySelectorAll('script').forEach(function(s){
+    var text=s.textContent||'';
+    if(text.trim()&&!s.hasAttribute('src'))executedScriptHashes[hashScript(text)]=1;
+  });
+  function cacheKey(url){
+    var u=new URL(url,location.origin);
+    return u.pathname+u.search;
+  }
+  function defaultLayoutGroup(layout){
+    if(!layout)return 'app';
+    var clean=String(layout).replace(/\\\\/g,'/');
+    var parts=clean.split('/').filter(Boolean);
+    var idx=parts.lastIndexOf('layouts');
+    var part=idx>=0?parts[idx+1]:parts[parts.length-1];
+    return part?part.replace(/\\.stx$/i,''):'app';
+  }
+  function getCurrentLayoutGroup(){
+    var meta=document.querySelector('meta[name="stx-layout-group"]');
+    if(meta&&meta.getAttribute('content'))return meta.getAttribute('content');
+    var layout=document.querySelector('meta[name="stx-layout"]');
+    return defaultLayoutGroup(layout?layout.getAttribute('content'):'');
+  }
+  function getDocLayoutGroup(doc,layout){
+    var meta=doc&&doc.querySelector?doc.querySelector('meta[name="stx-layout-group"]'):null;
+    return meta&&meta.getAttribute('content')?meta.getAttribute('content'):defaultLayoutGroup(layout||'');
+  }
+  function checkLayoutChange(newLayout,targetUrl,newGroup){
+    var currentLayout=document.querySelector('meta[name="stx-layout"]');
+    var curLayoutName=currentLayout?currentLayout.getAttribute('content'):'';
+    var curGroup=getCurrentLayoutGroup();
+    var nextGroup=newGroup||defaultLayoutGroup(newLayout);
+    log('[router] layout check: current='+curLayoutName+'('+curGroup+') new='+(newLayout||'')+'('+nextGroup+')');
+    // Different layout GROUP (e.g. app \u2192 auth): full reload
+    if(curGroup!==nextGroup){
+      log('[router] layout group change:',curGroup,'\u2192',nextGroup,'\u2014 full reload to:',targetUrl);
+      return true;
+    }
+    // Same group but different SPECIFIC layout (e.g. layouts/app \u2192 layouts/coach):
+    // full body swap so nav, sidebar, and other layout-level elements update
+    if(curLayoutName && newLayout && curLayoutName!==newLayout){
+      log('[router] layout name change:',curLayoutName,'\u2192',newLayout,'\u2014 full body swap');
+      return true;
     }
+    return false;
   }
-  return files;
-}
 
-class Router {
-  routes;
-  pagesDir;
-  pagesDirs;
-  config;
-  constructor(baseDir, config = {}) {
-    this.config = config;
-    const rawDirs = config.pagesDirs && config.pagesDirs.length > 0 ? config.pagesDirs : [config.pagesDir || "pages"];
-    this.pagesDirs = rawDirs.map((d) => path4.resolve(baseDir, d));
-    this.pagesDir = this.pagesDirs[0];
-    const extensions = config.extensions || [".stx"];
-    const seenPatterns = new Set;
-    this.routes = [];
-    for (const dir of this.pagesDirs) {
-      const files = scanDirectory(dir, extensions);
-      for (const filePath of files) {
-        const pattern = filePathToPattern(filePath, dir);
-        if (seenPatterns.has(pattern))
-          continue;
-        seenPatterns.add(pattern);
-        const { regex, params } = patternToRegex(pattern);
-        const layouts = config.layouts !== false ? resolveLayoutChain(filePath, dir) : [];
-        this.routes.push({
-          pattern,
-          regex,
-          params,
-          filePath,
-          isDynamic: params.length > 0,
-          layout: layouts.length > 0 ? layouts[layouts.length - 1] : undefined
-        });
-      }
-    }
-    this.routes.sort((a, b) => {
-      if (!a.isDynamic && b.isDynamic)
-        return -1;
-      if (a.isDynamic && !b.isDynamic)
-        return 1;
-      const aSegments = a.pattern.split("/").length;
-      const bSegments = b.pattern.split("/").length;
-      if (aSegments !== bSegments)
-        return bSegments - aSegments;
-      return a.pattern.localeCompare(b.pattern);
-    });
-    const stxDir = path4.join(baseDir, ".stx");
-    generateRouteTypes(this.routes, stxDir);
-    generateRouteManifest(this.routes, stxDir, this.pagesDir);
-  }
-  match(pathname) {
-    const normalizedPath = pathname === "" ? "/" : pathname;
-    for (const route of this.routes) {
-      const m = normalizedPath.match(route.regex);
-      if (m) {
-        const params = {};
-        route.params.forEach((name, index) => {
-          params[name] = m[index + 1];
-        });
-        return { route, params };
-      }
-    }
-    return null;
-  }
-  resolve(name, params) {
-    const route = this.routes.find((r) => r.pattern === name || r.filePath.includes(name));
-    if (!route)
-      return "#not-found";
-    let resolved = route.pattern;
-    if (params) {
-      for (const [key, value] of Object.entries(params)) {
-        resolved = resolved.replace(`:${key}`, encodeURIComponent(value));
-      }
-    }
-    return resolved;
-  }
-  addRoute(route) {
-    this.routes.push(route);
-    this.routes.sort((a, b) => {
-      if (!a.isDynamic && b.isDynamic)
-        return -1;
-      if (a.isDynamic && !b.isDynamic)
-        return 1;
-      return a.pattern.localeCompare(b.pattern);
-    });
-  }
-  getLayout(route) {
-    return route.layout ?? null;
-  }
-}
-function createRouter(baseDir, config) {
-  return new Router(baseDir, config);
-}
-function findErrorPage(pagesDir, statusCode) {
-  const candidates = [`${statusCode}.stx`, "error.stx"];
-  for (const candidate of candidates) {
-    const filePath = path4.join(pagesDir, candidate);
-    if (fs3.existsSync(filePath))
-      return filePath;
-  }
-  return null;
-}
-function formatRoutes(routes, baseDir) {
-  return routes.map((route) => {
-    const relativePath = path4.relative(baseDir, route.filePath);
-    const dynamicLabel = route.isDynamic ? " (dynamic)" : "";
-    return `${route.pattern} \u2192 ${relativePath}${dynamicLabel}`;
-  });
-}
-// src/named-routes.ts
-var routes = {};
-var appUrl = "";
-function setAppUrl(url) {
-  appUrl = url.replace(/\/$/, "");
-}
-function defineRoute(name, routePath, params = {}) {
-  routes[name] = { path: routePath, name, params };
-}
-function defineRoutes(routeDefinitions) {
-  for (const [name, definition] of Object.entries(routeDefinitions)) {
-    if (typeof definition === "string") {
-      routes[name] = { path: definition, name };
-    } else {
-      routes[name] = { ...definition, name };
-    }
-  }
-}
-function route(name, params = {}, absolute = false) {
-  const r = routes[name];
-  if (!r) {
-    console.warn(`Route [${name}] not defined.`);
-    return "#undefined-route";
-  }
-  const mergedParams = { ...r.params, ...params };
-  let routePath = r.path;
-  routePath = routePath.replace(/:(\w+)/g, (_, paramName) => {
-    const value = mergedParams[paramName];
-    if (value === undefined) {
-      console.warn(`Missing parameter [${paramName}] for route [${name}].`);
-      return `:${paramName}`;
-    }
-    delete mergedParams[paramName];
-    return encodeURIComponent(String(value));
-  });
-  const remainingParams = Object.entries(mergedParams);
-  if (remainingParams.length > 0) {
-    const queryString = remainingParams.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`).join("&");
-    routePath += (routePath.includes("?") ? "&" : "?") + queryString;
-  }
-  return absolute && appUrl ? `${appUrl}${routePath}` : routePath;
-}
-function resetRoutes() {
-  for (const key of Object.keys(routes)) {
-    delete routes[key];
-  }
-  appUrl = "";
-}
-// src/middleware.ts
-import fs4 from "fs";
-import path5 from "path";
-function navigateTo(navPath, options = {}) {
-  return {
-    type: "redirect",
-    path: navPath,
-    options: {
-      replace: options.replace ?? false,
-      external: options.external ?? false,
-      redirectCode: options.redirectCode ?? 302
-    }
-  };
-}
-function abortNavigation(error) {
-  const normalizedError = typeof error === "string" ? { statusCode: 500, message: error } : error;
-  return {
-    type: "abort",
-    error: normalizedError
-  };
-}
-function defineMiddleware(handler, options = {}) {
-  return {
-    handler,
-    mode: options.mode ?? "universal"
-  };
-}
-function parseCookies(cookieHeader) {
-  const cookies = {};
-  if (!cookieHeader)
-    return cookies;
-  const pairs = cookieHeader.split(";");
-  for (const pair of pairs) {
-    const [name, ...rest] = pair.split("=");
-    if (name) {
-      const key = name.trim();
-      const value = rest.join("=").trim();
-      if (key) {
-        cookies[key] = decodeURIComponent(value);
-      }
-    }
-  }
-  return cookies;
-}
-function serializeCookie(name, value, options = {}) {
-  let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
-  if (options.expires) {
-    const expires = typeof options.expires === "number" ? new Date(Date.now() + options.expires * 1000) : options.expires;
-    cookie += `; Expires=${expires.toUTCString()}`;
-  }
-  if (options.path)
-    cookie += `; Path=${options.path}`;
-  if (options.domain)
-    cookie += `; Domain=${options.domain}`;
-  if (options.secure)
-    cookie += "; Secure";
-  if (options.httpOnly)
-    cookie += "; HttpOnly";
-  if (options.sameSite)
-    cookie += `; SameSite=${options.sameSite}`;
-  return cookie;
-}
-function createServerCookieManager(request, responseHeaders) {
-  const cookieHeader = request.headers.get("cookie") || "";
-  const cookies = parseCookies(cookieHeader);
-  return {
-    get(name) {
-      return cookies[name];
-    },
-    set(name, value, options = {}) {
-      cookies[name] = value;
-      responseHeaders.append("Set-Cookie", serializeCookie(name, value, options));
-    },
-    delete(name) {
-      delete cookies[name];
-      responseHeaders.append("Set-Cookie", serializeCookie(name, "", { expires: new Date(0), path: "/" }));
-    },
-    getAll() {
-      return { ...cookies };
-    }
-  };
-}
-function createClientCookieManager() {
-  return {
-    get(name) {
-      if (typeof document === "undefined")
-        return;
-      const cookies = parseCookies(document.cookie);
-      return cookies[name];
-    },
-    set(name, value, options = {}) {
-      if (typeof document === "undefined")
-        return;
-      document.cookie = serializeCookie(name, value, options);
-    },
-    delete(name) {
-      if (typeof document === "undefined")
-        return;
-      document.cookie = serializeCookie(name, "", { expires: new Date(0), path: "/" });
-    },
-    getAll() {
-      if (typeof document === "undefined")
-        return {};
-      return parseCookies(document.cookie);
-    }
-  };
-}
-function createStorageManager() {
-  const available = typeof window !== "undefined" && typeof window.localStorage !== "undefined";
-  return {
-    get(key) {
-      if (!available)
-        return null;
-      try {
-        return window.localStorage.getItem(key);
-      } catch {
-        return null;
-      }
-    },
-    set(key, value) {
-      if (!available)
-        return;
-      try {
-        window.localStorage.setItem(key, value);
-      } catch {}
-    },
-    remove(key) {
-      if (!available)
-        return;
-      try {
-        window.localStorage.removeItem(key);
-      } catch {}
-    },
-    isAvailable() {
-      return available;
-    }
-  };
-}
-var middlewareRegistry = new Map;
-function registerMiddleware(name, middleware) {
-  middlewareRegistry.set(name, middleware);
-}
-function getMiddleware(name) {
-  return middlewareRegistry.get(name);
-}
-function hasMiddleware(name) {
-  return middlewareRegistry.has(name);
-}
-function clearMiddleware() {
-  middlewareRegistry.clear();
-}
-function getMiddlewareNames() {
-  return Array.from(middlewareRegistry.keys());
-}
-async function loadMiddlewareFromDirectory(baseDir, middlewareDir = "middleware") {
-  const fullPath = path5.resolve(baseDir, middlewareDir);
-  if (!fs4.existsSync(fullPath)) {
-    return;
-  }
-  const files = fs4.readdirSync(fullPath);
-  for (const file of files) {
-    if (!file.endsWith(".ts") && !file.endsWith(".js"))
-      continue;
-    if (file.includes(".test.") || file.includes(".spec."))
-      continue;
-    const name = file.replace(/\.(ts|js)$/, "");
-    const filePath = path5.join(fullPath, file);
-    try {
-      const mod = await import(filePath);
-      const mw = mod.default;
-      if (mw && typeof mw.handler === "function") {
-        registerMiddleware(name, mw);
-      } else if (typeof mw === "function") {
-        registerMiddleware(name, { handler: mw, mode: "universal" });
-      }
-    } catch (error) {
-      console.warn(`Failed to load middleware '${name}' from ${filePath}:`, error);
-    }
-  }
-}
-function parseQuery(search) {
-  const query = {};
-  if (!search)
-    return query;
-  const params = new URLSearchParams(search);
-  for (const [key, value] of params) {
-    query[key] = value;
-  }
-  return query;
-}
-function createRouteLocation(pathname, params, meta, search = "") {
-  return {
-    path: pathname,
-    params,
-    query: parseQuery(search),
-    fullPath: search ? `${pathname}?${search}` : pathname,
-    meta
-  };
-}
-function createMiddlewareContext(to, from, request) {
-  const isServer = typeof window === "undefined";
-  const isClient = !isServer;
-  const responseHeaders = new Headers;
-  return {
-    to,
-    from,
-    isClient,
-    isServer,
-    cookies: isServer && request ? createServerCookieManager(request, responseHeaders) : createClientCookieManager(),
-    storage: createStorageManager(),
-    state: {},
-    request,
-    responseHeaders
-  };
-}
-async function runMiddleware(middlewareNames, context) {
-  const names = Array.isArray(middlewareNames) ? middlewareNames : [middlewareNames];
-  const isServer = context.isServer;
-  for (const name of names) {
-    const middleware = getMiddleware(name);
-    if (!middleware) {
-      console.warn(`Middleware '${name}' not found`);
-      continue;
-    }
-    if (middleware.mode === "server" && !isServer)
-      continue;
-    if (middleware.mode === "client" && isServer)
-      continue;
-    try {
-      const result = await middleware.handler(context);
-      if (result) {
-        if (result.type === "redirect") {
-          return {
-            passed: false,
-            redirect: result,
-            state: context.state,
-            responseHeaders: context.responseHeaders
-          };
-        }
-        if (result.type === "abort") {
-          return {
-            passed: false,
-            abort: result,
-            state: context.state,
-            responseHeaders: context.responseHeaders
-          };
-        }
-      }
-    } catch (error) {
-      console.error(`Error in middleware '${name}':`, error);
-      return {
-        passed: false,
-        abort: {
-          type: "abort",
-          error: {
-            statusCode: 500,
-            message: error instanceof Error ? error.message : "Middleware error"
-          }
-        },
-        state: context.state,
-        responseHeaders: context.responseHeaders
-      };
-    }
-  }
-  return {
-    passed: true,
-    state: context.state,
-    responseHeaders: context.responseHeaders
-  };
-}
-// src/client.ts
-function getRouterScript() {
-  return `
-;(function(){
-  'use strict';
-  if(window.__stxRouter)return;
-
-  // \u2500\u2500 Configuration \u2500\u2500
-  var defaults={container:'main',loadingClass:'stx-navigating',viewTransitions:true,cache:true,scrollToTop:true,prefetch:true,progress:true,progressColor:'#78dce8',progressHeight:'2px',interceptAllLinks:false};
-  var o=Object.assign({},defaults,window.__stxRouterConfig||{},window.STX_ROUTER_OPTIONS||{});
-  var containerSel=o.container;
-
-  // \u2500\u2500 Progress bar (0\u2192100% at top of viewport) \u2500\u2500
-  // Native loading indicator baked into the router. Starts when navigation
-  // begins, trickles up to ~90% during fetch, snaps to 100% + fades on
-  // completion. Opt-out via window.__stxRouterConfig={progress:false}.
-  var progEl=null;
-  var progVal=0;
-  var progTimer=null;
-  function setProgress(v){
-    progVal=v<0?0:(v>100?100:v);
-    if(!progEl)return;
-    progEl.style.opacity=progVal>0?'1':'0';
-    progEl.style.transform='scaleX('+(progVal/100)+')';
-  }
-  function startProgress(){
-    if(!o.progress||!progEl)return;
-    if(progTimer){clearInterval(progTimer);progTimer=null}
-    setProgress(8);
-    progTimer=setInterval(function(){
-      if(progVal>=90)return;
-      // Asymptotic trickle \u2014 fast at first, slower near 90%
-      var inc=Math.max(0.4,(90-progVal)*0.08);
-      setProgress(progVal+inc);
-    },160);
-  }
-  function finishProgress(){
-    if(!o.progress||!progEl)return;
-    if(progTimer){clearInterval(progTimer);progTimer=null}
-    setProgress(100);
-    // Fade out, then reset. Delays chosen so the "full" state is briefly
-    // visible before the bar disappears.
-    setTimeout(function(){
-      if(!progEl)return;
-      progEl.style.opacity='0';
-      setTimeout(function(){progVal=0;if(progEl)progEl.style.transform='scaleX(0)'},260);
-    },180);
-  }
-
-  var cache={};
-  var prefetching={};
-  var isNavigating=false;
-
-  // Extract top-level CSS blocks (rules AND @media blocks with nested braces).
-  // The old regex ([^{}]+{[^{}]*}) silently dropped @media blocks because
-  // it couldn't handle nested braces \u2014 causing responsive classes (lg:, md:)
-  // to vanish after SPA navigation.
-  function extractCssBlocks(css){
-    var blocks=[];
-    var i=0;
-    var len=css.length;
-    while(i<len){
-      // Skip whitespace
-      while(i<len&&(css[i]===' '||css[i]==='\\n'||css[i]==='\\r'||css[i]==='\\t'))i++;
-      if(i>=len)break;
-      // Find the start of a block (first {)
-      var blockStart=i;
-      var bracePos=css.indexOf('{',i);
-      if(bracePos===-1)break;
-      // Walk forward tracking brace depth to find the matching close
-      var depth=0;
-      var j=bracePos;
-      while(j<len){
-        if(css[j]==='{')depth++;
-        else if(css[j]==='}'){depth--;if(depth===0){j++;break}}
-        j++;
-      }
-      if(depth!==0)break;
-      blocks.push(css.slice(blockStart,j).trim());
-      i=j;
-    }
-    return blocks;
-  }
-
-  function mergeCrosswindCSS(existing,incoming){
-    var blocks=extractCssBlocks(incoming);
-    var newBlocks=[];
-    for(var bi=0;bi<blocks.length;bi++){
-      if(existing.indexOf(blocks[bi])===-1)newBlocks.push(blocks[bi]);
-    }
-    if(newBlocks.length>0)return existing+'\\n'+newBlocks.join('\\n');
-    return null;
-  }
-
-  function getContainer(){
-    return document.querySelector(containerSel)||document.querySelector('[data-stx-content]')||document.querySelector('main');
-  }
-
-  // \u2500\u2500 Navigation \u2500\u2500
-  // Layout group detection \u2014 layouts in the same group share a <main> container.
-  // Only truly different layout groups trigger a full page reload.
-  var layoutCache={};
-  // Track executed script hashes to prevent redeclaration errors on navigation.
-  // Layout-level scripts (theme, nav setup) execute on initial page load and
-  // should NOT re-execute when navigating to another page with the same layout.
-  var executedScriptHashes={};
-  function hashScript(code){
-    var h=0;for(var i=0;i<code.length;i++){h=((h<<5)-h)+code.charCodeAt(i);h|=0}
-    return h;
-  }
-  // Record scripts from the initial page load
-  document.querySelectorAll('script').forEach(function(s){
-    var text=s.textContent||'';
-    if(text.trim()&&!s.hasAttribute('src'))executedScriptHashes[hashScript(text)]=1;
-  });
-  function getLayoutGroup(layout){
-    if(!layout)return 'app';
-    if(layout.indexOf('auth')!==-1||layout.indexOf('guest')!==-1)return 'auth';
-    return 'app';
-  }
-  function checkLayoutChange(newLayout,targetUrl){
-    var currentLayout=document.querySelector('meta[name="stx-layout"]');
-    var curLayoutName=currentLayout?currentLayout.getAttribute('content'):'';
-    var curGroup=getLayoutGroup(curLayoutName);
-    var newGroup=getLayoutGroup(newLayout);
-    console.log('[router] layout check: current='+curLayoutName+'('+curGroup+') new='+(newLayout||'')+'('+newGroup+')');
-    // Different layout GROUP (e.g. app \u2192 auth): full reload
-    if(curGroup!==newGroup){
-      console.log('[router] layout group change:',curGroup,'\u2192',newGroup,'\u2014 full reload to:',targetUrl);
-      return true;
-    }
-    // Same group but different SPECIFIC layout (e.g. layouts/app \u2192 layouts/coach):
-    // full body swap so nav, sidebar, and other layout-level elements update
-    if(curLayoutName && newLayout && curLayoutName!==newLayout){
-      console.log('[router] layout name change:',curLayoutName,'\u2192',newLayout,'\u2014 full body swap');
-      return true;
-    }
-    return false;
+  function shouldUseFragmentResponse(){
+    return containerSel==='main'||containerSel==='[data-stx-content]';
   }
 
   function navigate(url,pushState,force){
-    console.log('[router] navigate() called:',url,'isNavigating:',isNavigating);
+    log('[router] navigate() called:',url,'isNavigating:',isNavigating);
     if(isNavigating)return;
     var t=new URL(url,location.origin);
 
@@ -739,20 +190,20 @@ function getRouterScript() {
     startProgress();
 
     var targetHref=t.href;
-    var targetPath=t.pathname;
+    var targetPath=cacheKey(url);
     var targetHash=t.hash;
 
     function done(){isNavigating=false;document.body.classList.remove(o.loadingClass);finishProgress()}
 
     if(o.cache&&cache[targetPath]&&!force){
-      if(checkLayoutChange(layoutCache[targetPath],url)){
+      if(checkLayoutChange(layoutCache[targetPath],url,layoutGroupCache[targetPath])){
         // Layout changed \u2014 fetch full page and do full document swap
-        console.log('[router] cache hit but layout changed \u2014 fetching full page');
+        log('[router] cache hit but layout changed \u2014 fetching full page');
         fetch(url,{headers:{'Accept':'text/html'}}).then(function(r){
           if(!r.ok)throw new Error(r.status);
           return r.text();
         }).then(function(html){
-          console.log('[router] full page fetched from cache path, len:',html.length);
+          log('[router] full page fetched from cache path, len:',html.length);
           swap(html,targetPath,pushState,targetHash);
         }).catch(function(err){
           console.error('[router] full page fetch error:',err);
@@ -765,28 +216,32 @@ function getRouterScript() {
     }
 else {
       if(force&&cache[targetPath])delete cache[targetPath];
-      // First fetch as fragment (SPA mode)
-      fetch(url,{headers:{'X-STX-Router':'true','Accept':'text/html'}}).then(function(r){
+      // First fetch as fragment (SPA mode) when the configured container is
+      // the page content. Custom app-shell containers need full documents so
+      // the router does not inject a <main> fragment into the wrong element.
+      var wantsFragment=shouldUseFragmentResponse();
+      fetch(url,{headers:wantsFragment?{'X-STX-Router':'true','Accept':'text/html'}:{'Accept':'text/html'}}).then(function(r){
         if(!r.ok)throw new Error(r.status);
-        var isFragment=r.headers.get('X-STX-Fragment')==='true';
+        var isFragment=wantsFragment&&r.headers.get('X-STX-Fragment')==='true';
         var newLayout=r.headers.get('X-STX-Layout')||'';
+        var newGroup=r.headers.get('X-STX-Layout-Group')||'';
         // Layout change? Fetch the FULL page (no X-STX-Router header) and do full document swap
-        if(isFragment&&checkLayoutChange(newLayout,url)){
-          console.log('[router] layout change \u2014 fetching full page for document swap');
+        if(isFragment&&checkLayoutChange(newLayout,url,newGroup)){
+          log('[router] layout change \u2014 fetching full page for document swap');
           return fetch(url,{headers:{'Accept':'text/html'}}).then(function(fullRes){
-            console.log('[router] full page fetched:',fullRes.status,'ok:',fullRes.ok);
+            log('[router] full page fetched:',fullRes.status,'ok:',fullRes.ok);
             if(!fullRes.ok)throw new Error(fullRes.status);
             return fullRes.text().then(function(html){
-              console.log('[router] full page html length:',html.length);
-              return{html:html,isFragment:false,layout:newLayout};
+              log('[router] full page html length:',html.length);
+              return{html:html,isFragment:false,layout:newLayout,layoutGroup:newGroup};
             });
           });
         }
-        return r.text().then(function(html){return{html:html,isFragment:isFragment,layout:newLayout}});
+        return r.text().then(function(html){return{html:html,isFragment:isFragment,layout:newLayout,layoutGroup:newGroup}});
       }).then(function(result){
         if(!result)return;
         if(result.isFragment)result.html='<!--stx-fragment-->'+result.html;
-        if(o.cache){cache[targetPath]=result.html;layoutCache[targetPath]=result.layout}
+        if(o.cache){cache[targetPath]=result.html;layoutCache[targetPath]=result.layout;layoutGroupCache[targetPath]=result.layoutGroup}
         swap(result.html,targetPath,pushState,targetHash);
       }).catch(function(err){
         console.error('[router] fetch error:',err);
@@ -799,8 +254,8 @@ else {
     var isFragment=html.indexOf('<!--stx-fragment-->')===0;
     if(isFragment)html=html.slice('<!--stx-fragment-->'.length);
     var currentContent=getContainer();
-    console.log('[router] swap: isFragment='+isFragment+' container='+!!currentContent+' tag='+(currentContent&&currentContent.tagName)+' selector='+containerSel+' htmlLen='+html.length);
-    if(!currentContent){console.log('[router] no container \u2014 falling back');location.href=url;return}
+    log('[router] swap: isFragment='+isFragment+' container='+!!currentContent+' tag='+(currentContent&&currentContent.tagName)+' selector='+containerSel+' htmlLen='+html.length);
+    if(!currentContent){log('[router] no container \u2014 falling back');location.href=url;return}
 
     // Fragment mode: server returned just the page content (no document wrapper)
     if(isFragment){
@@ -855,10 +310,10 @@ else {
         else if(hash){var el=document.querySelector(hash);if(el)el.scrollIntoView({behavior:'smooth'})}
         window.dispatchEvent(new CustomEvent('stx:navigate',{detail:{url:url}}));
         // Execute page scripts FIRST \u2014 they define setup functions and set _latestSetup
-        console.log('[router] frag scripts:', fragScripts.length);
+        log('[router] frag scripts:', fragScripts.length);
         document.querySelectorAll('script[data-stx-page]').forEach(function(s){s.remove()});
         fragScripts.forEach(function(code){
-          console.log('[router] exec script len:', code.length, 'has __stx_setup:', code.indexOf('__stx_setup')>-1);
+          log('[router] exec script len:', code.length, 'has __stx_setup:', code.indexOf('__stx_setup')>-1);
           // Skip scripts that were already executed (layout-level partials
           // like theme.stx, stores.stx, nav.stx). Their top-level const/let
           // declarations would throw "Identifier has already been declared"
@@ -867,7 +322,7 @@ else {
           var h=hashScript(code);
           var isSetup=code.indexOf('__stx_setup_')!==-1;
           if(!isSetup&&executedScriptHashes[h]){
-            console.log('[router] skipping already-executed script (hash dedup)');
+            log('[router] skipping already-executed script (hash dedup)');
             return;
           }
           executedScriptHashes[h]=1;
@@ -881,7 +336,7 @@ else {
           ns.setAttribute('data-stx-page','');
           document.body.appendChild(ns);
         });
-        console.log('[router] scripts done. _latestSetup:', !!window.stx._latestSetup);
+        log('[router] scripts done. _latestSetup:', !!window.stx._latestSetup);
         // THEN fire stx:load \u2014 now _latestSetup is set and processElement has the right scope
         window.dispatchEvent(new Event('stx:load'));
       }
@@ -953,12 +408,14 @@ else {
       if(newBody){
         var newMeta=doc.querySelector('meta[name="stx-layout"]');
         var curMeta=document.querySelector('meta[name="stx-layout"]');
-        var curGroup=getLayoutGroup(curMeta?curMeta.getAttribute('content'):'');
-        var newGroup=getLayoutGroup(newMeta?newMeta.getAttribute('content'):'');
-        isLayoutChange=curGroup!==newGroup;
+        var curLayout=curMeta?curMeta.getAttribute('content'):'';
+        var newLayout=newMeta?newMeta.getAttribute('content'):'';
+        var curGroup=getCurrentLayoutGroup();
+        var newGroup=getDocLayoutGroup(doc,newLayout);
+        isLayoutChange=curGroup!==newGroup||(curLayout&&newLayout&&curLayout!==newLayout);
       }
       if(isLayoutChange&&newBody){
-        console.log('[router] full body swap for layout change');
+        log('[router] full body swap for layout change');
         // Replace entire body content \u2014 layout chrome and all
         var bodyHTML=newBody.innerHTML.replace(new RegExp('<scr'+'ipt\\\\b[^>]*>[\\\\s\\\\S]*?<\\\\/scr'+'ipt\\\\s*>','gi'),'');
         document.body.innerHTML=bodyHTML;
@@ -969,6 +426,10 @@ else {
         var freshMeta=doc.querySelector('meta[name="stx-layout"]');
         if(oldMeta&&freshMeta)oldMeta.setAttribute('content',freshMeta.getAttribute('content')||'');
         else if(freshMeta){var m=document.createElement('meta');m.name='stx-layout';m.content=freshMeta.getAttribute('content')||'';document.head.appendChild(m)}
+        var oldGroupMeta=document.querySelector('meta[name="stx-layout-group"]');
+        var freshGroupMeta=doc.querySelector('meta[name="stx-layout-group"]');
+        if(oldGroupMeta&&freshGroupMeta)oldGroupMeta.setAttribute('content',freshGroupMeta.getAttribute('content')||'');
+        else if(freshGroupMeta){var gm=document.createElement('meta');gm.name='stx-layout-group';gm.content=freshGroupMeta.getAttribute('content')||'';document.head.appendChild(gm)}
         // Update container reference for script execution below
         currentContent=document.querySelector(containerSel)||document.querySelector('main')||document.body;
       } else {
@@ -999,6 +460,9 @@ else {
       document.querySelectorAll('script[data-stx-page]').forEach(function(s){s.remove()});
 
       var scripts=[];
+      function addScript(text, runAlways){
+        scripts.push({text:text,runAlways:!!runAlways});
+      }
       if(isLayoutChange){
         // Layout change: collect ALL scripts from the new document body
         // (layout scripts, component mounts, setup functions \u2014 everything)
@@ -1011,7 +475,7 @@ else {
             // Skip the signals runtime IIFE \u2014 it's already loaded
             if(text.indexOf("'use strict';var cloakStyle")!==-1)return;
             if(text.indexOf('__stxRouter')!==-1)return;
-            scripts.push(text);
+            addScript(text,true);
           });
         }
         // Also collect setup functions from <head>
@@ -1019,7 +483,7 @@ else {
           var text=s.textContent||'';
           if(s.hasAttribute('src'))return;
           if(!text.trim())return;
-          if(text.indexOf('__stx_setup_')!==-1)scripts.push(text);
+          if(text.indexOf('__stx_setup_')!==-1)addScript(text,true);
         });
       } else {
         // Same layout: collect scripts from the container
@@ -1027,282 +491,885 @@ else {
           var text=s.textContent||'';
           if(s.hasAttribute('src'))return;
           if(!text.trim())return;
-          scripts.push(text);
+          addScript(text,true);
         });
-        // Collect setup scripts from <head> AND <body> (outside container).
+        // Collect page scripts from <head> AND <body> (outside container).
         // SSG builds place the setup function in <body> before <main>, not
         // in <head>. Without this, SPA navigation on static sites never
         // runs the setup and reactive data stays empty.
         var seenSetups={};
-        scripts.forEach(function(t){if(t.indexOf('__stx_setup_')!==-1)seenSetups[t.substring(0,80)]=1});
+        scripts.forEach(function(entry){var t=entry.text;if(t.indexOf('__stx_setup_')!==-1)seenSetups[t.substring(0,80)]=1});
         doc.querySelectorAll('script').forEach(function(s){
           var text=s.textContent||'';
           if(s.hasAttribute('src'))return;
           if(!text.trim())return;
-          if(text.indexOf('__stx_setup_')===-1)return;
           // Skip signals runtime and router (they contain __stx_setup references but aren't setup functions)
           if(text.indexOf("'use strict';var cloakStyle")!==-1)return;
           if(text.indexOf('__stxRouter')!==-1)return;
+          if(newContent.contains(s))return;
+          if(text.indexOf('__stx_setup_')===-1&&!s.hasAttribute('data-stx-scoped')&&!s.hasAttribute('data-stx-page'))return;
           var key=text.substring(0,80);
           if(seenSetups[key])return;
           seenSetups[key]=1;
-          scripts.push(text);
+          addScript(text,true);
+        });
+      }
+
+      // Push history state (before active link updates so location.pathname is current)
+      if(pushState!==false)history.pushState({},'',url+(hash||''));
+
+      // Update active nav links
+      updateNav(url);
+      updateActiveLinks();
+
+      // Scroll
+      if(o.scrollToTop&&!hash)window.scrollTo({top:0,behavior:'instant'});
+      else if(hash){var el=document.querySelector(hash);if(el)el.scrollIntoView({behavior:'smooth'})}
+
+      // Update title
+      var newTitle=doc.querySelector('title');
+      if(newTitle)document.title=newTitle.textContent;
+
+      // Update <html lang> from the destination doc so screen readers,
+      // CSS :lang() selectors, and any i18n picker that mirrors
+      // document.documentElement.lang stay accurate after SPA hops.
+      if(doc.documentElement&&doc.documentElement.lang){
+        document.documentElement.lang=doc.documentElement.lang;
+      }
+
+      window.dispatchEvent(new CustomEvent('stx:navigate',{detail:{url:url}}));
+
+      // Execute page scripts FIRST \u2014 they define setup functions and set _latestSetup
+      function execScripts(){
+        scripts.forEach(function(entry){
+          var text=typeof entry==='string'?entry:entry.text;
+          var runAlways=typeof entry==='string'?false:entry.runAlways;
+          // Skip scripts that were already executed (layout-level partials
+          // like theme.stx). Their top-level const/function declarations
+          // would throw "Identifier has already been declared" on re-execution.
+          // Exception: setup functions (__stx_setup_) must always re-execute
+          // because each page has its own setup, and import statements
+          // need special handling.
+          var h=hashScript(text);
+          var isSetup=text.indexOf('__stx_setup_')!==-1;
+          var hasImport=text.indexOf('import ')!==-1;
+          if(!runAlways&&!isSetup&&executedScriptHashes[h])return;
+          executedScriptHashes[h]=1;
+          // Wrap scripts with import statements as modules (Bug 3 fix)
+          var ns=document.createElement('script');
+          if(hasImport){
+            ns.type='module';
+          }
+          // Wrap in block scope to prevent const/let collisions on re-navigation.
+          // Top-level const/let in <script> tags are global-scoped in browsers
+          // and throw "Identifier has already been declared" on re-execution.
+          var alreadyScoped=text.trimStart().charAt(0)==='('||text.trimStart().charAt(0)===';'||text.indexOf('window.stx.mount')>-1;
+          ns.textContent=alreadyScoped?text:'{'+text+'}';
+          ns.setAttribute('data-stx-page','');
+          document.body.appendChild(ns);
         });
+        // THEN fire stx:load \u2014 now _latestSetup is set and processElement has the right scope
+        window.dispatchEvent(new Event('stx:load'));
+      }
+
+      if(extPromises.length>0){
+        Promise.all(extPromises).then(execScripts).catch(execScripts);
+      }
+else {
+        execScripts();
+      }
+    }
+
+    if(o.viewTransitions&&document.startViewTransition){
+      document.startViewTransition(doSwap);
+    }
+else {
+      // Fallback fade for browsers without View Transitions API
+      currentContent.style.transition='opacity 0.12s ease-out';
+      currentContent.style.opacity='0';
+      setTimeout(function(){
+        doSwap();
+        currentContent.style.opacity='1';
+        setTimeout(function(){currentContent.style.transition=''},150);
+      },120);
+    }
+  }
+
+  // \u2500\u2500 Link interception \u2500\u2500
+  function shouldIntercept(link){
+    if(!link)return false;
+    var href=link.getAttribute('href');
+    if(!href)return false;
+    if(href.startsWith('http')||href.startsWith('#')||href.startsWith('mailto:')||href.startsWith('tel:')||href.startsWith('javascript:'))return false;
+    if(link.target==='_blank')return false;
+    if(link.hasAttribute('data-stx-no-router')||link.hasAttribute('data-no-router')||link.hasAttribute('download'))return false;
+    if(href===location.pathname)return false;
+    if(!getContainer())return false;
+    return true;
+  }
+
+  // SPA click handling. By default only [data-stx-link] elements get
+  // SPA navigation; regular <a href> does native full page reload. Set
+  // interceptAllLinks:true (window.__stxRouterConfig or build-time
+  // config) to intercept any same-origin anchor \u2014 used by static-site
+  // mode where every page is part of the same SPA shell.
+  document.addEventListener('click',function(e){
+    if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button!==0)return;
+    if(!e.target||!e.target.closest)return;
+    var link=e.target.closest('[data-stx-link]');
+    if(!link&&o.interceptAllLinks){
+      var anchor=e.target.closest('a[href]');
+      if(anchor&&shouldIntercept(anchor))link=anchor;
+    }
+    if(!link){return}
+    var href=link.getAttribute('href');
+    log('[router] click intercepted:',href,'container:',!!getContainer(),'defaultPrevented:',e.defaultPrevented);
+    if(!href||href.startsWith('http')||href.startsWith('#')||href.startsWith('mailto:')||href.startsWith('tel:')){log('[router] skipped:',href);return}
+    if(link.target==='_blank'||link.hasAttribute('download'))return;
+    e.preventDefault();
+    e.stopPropagation();
+    log('[router] navigating to:',href);
+    navigate(href);
+  },true);
+
+  // \u2500\u2500 Back/forward \u2500\u2500
+  window.addEventListener('popstate',function(){
+    navigate(location.pathname+location.search+location.hash,false);
+  });
+
+  // \u2500\u2500 Prefetch on hover \u2500\u2500
+  if(o.prefetch){
+    document.addEventListener('mouseover',function(e){
+      if(!e.target||!e.target.closest)return;
+      var link=e.target.closest('[data-stx-link]');
+      if(!link)return;
+      var href=link.getAttribute('href');
+      var key=cacheKey(href);
+      if(cache[key]||prefetching[key])return;
+      prefetching[key]=true;
+      var wantsFragment=shouldUseFragmentResponse();
+      fetch(href,{headers:wantsFragment?{'X-STX-Router':'true','Accept':'text/html'}:{'Accept':'text/html'}}).then(function(r){
+        var isFrag=wantsFragment&&r.headers.get('X-STX-Fragment')==='true';
+        var pLayout=r.headers.get('X-STX-Layout')||'';
+        var pGroup=r.headers.get('X-STX-Layout-Group')||'';
+        return r.text().then(function(html){return{html:isFrag?'<!--stx-fragment-->'+html:html,layout:pLayout,layoutGroup:pGroup}});
+      }).then(function(result){
+        if(o.cache){cache[key]=result.html;layoutCache[key]=result.layout;layoutGroupCache[key]=result.layoutGroup}
+      }).catch(function(){}).finally(function(){delete prefetching[key]});
+    },true);
+  }
+
+  // \u2500\u2500 Active link management \u2500\u2500
+  function updateNav(url){
+    document.querySelectorAll('nav a[href], #mobileNav a[href], [data-stx-nav] a[href]').forEach(function(a){
+      var href=a.getAttribute('href');
+      if(!href||href.startsWith('#')||href.startsWith('http'))return;
+      var isActive=(href===url)||(href==='/'&&url==='/');
+      if(a.hasAttribute('data-stx-link')){
+        var ac=a.getAttribute('data-stx-active-class')||'active';
+        if(isActive)ac.split(' ').forEach(function(cls){if(cls)a.classList.add(cls)});else ac.split(' ').forEach(function(cls){if(cls)a.classList.remove(cls)});
+      }
+    });
+  }
+
+  function updateActiveLinks(){
+    // Update active classes on <stx-link> elements (and legacy data-stx-link)
+    var links=document.querySelectorAll('[data-stx-link]');
+    var cur=location.pathname;
+    links.forEach(function(link){
+      var href=link.getAttribute('to')||link.getAttribute('href')||'';
+      var ac=link.getAttribute('active-class')||link.getAttribute('data-stx-active-class')||'active';
+      var eac=link.getAttribute('exact-active-class')||link.getAttribute('data-stx-exact-active-class')||'exact-active';
+      ac.split(' ').forEach(function(cls){if(cls)link.classList.remove(cls)});
+      eac.split(' ').forEach(function(cls){if(cls)link.classList.remove(cls)});
+      var isExact=cur===href;
+      var isActive=href!=='/'?cur.startsWith(href):cur==='/';
+      if(isExact)eac.split(' ').forEach(function(cls){if(cls)link.classList.add(cls)});
+      if(isActive)ac.split(' ').forEach(function(cls){if(cls)link.classList.add(cls)});
+    });
+  }
+
+  // \u2500\u2500 Progress bar DOM + style \u2500\u2500
+  // Injects a fixed-position element at the top of the viewport plus the
+  // minimal CSS for its transform/opacity transitions. Kept idempotent so
+  // repeated init() calls (e.g. after full-body swaps) don't duplicate.
+  // Also ships the default View Transitions fade+slide CSS when
+  // viewTransitions is enabled and the browser supports it. Apps can
+  // override by defining more specific ::view-transition-* rules later in
+  // the cascade, or opt out entirely with viewTransitions:false.
+  function injectStyles(){
+    if(!document.getElementById('stx-r-css')){
+      var s=document.createElement('style');s.id='stx-r-css';
+      // Strip characters that could escape our CSS block and inject new
+      // declarations: ; { } ( ) " ' \\ < > plus whitespace control chars.
+      // This keeps the value safe to concat into a stylesheet even if a
+      // caller wires the config from an untrusted source.
+      var sanitize=function(v){return String(v).replace(/[;{}()"'\\\\<>\\n\\r\\t]/g,'')};
+      var pc=sanitize(o.progressColor);
+      var ph=sanitize(o.progressHeight);
+      var css='.stx-navigating{cursor:wait}.stx-navigating a,.stx-navigating button{pointer-events:none}#stx-router-progress{position:fixed;top:0;left:0;right:0;height:'+ph+';background:'+pc+';box-shadow:0 0 8px '+pc+',0 0 4px '+pc+';transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out,opacity .26s ease;opacity:0;pointer-events:none;z-index:999999}';
+      if(o.viewTransitions&&'startViewTransition' in document){
+        var dur=(o.viewTransitionDuration||220)+'ms';
+        var ease=o.viewTransitionEasing||'cubic-bezier(0.16, 1, 0.3, 1)';
+        css+='::view-transition-old(root),::view-transition-new(root){animation-duration:'+dur+';animation-timing-function:'+ease+'}';
+        css+='::view-transition-old(root){animation-name:stx-r-fade-out}::view-transition-new(root){animation-name:stx-r-fade-in}';
+        css+='@keyframes stx-r-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}';
+        css+='@keyframes stx-r-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}';
+        css+='@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:0s;animation-name:none}}';
+      }
+      s.textContent=css;
+      document.head.appendChild(s);
+    }
+    if(o.progress&&!document.getElementById('stx-router-progress')){
+      var el=document.createElement('div');
+      el.id='stx-router-progress';
+      el.setAttribute('role','progressbar');
+      el.setAttribute('aria-hidden','true');
+      // Append to <html>, not <body>: when the router swaps the body
+      // (container:'body' for full-page static-site SPAs) the progress
+      // element gets wiped along with it. <html> stays put across
+      // swaps, so the bar survives multi-hop navigation.
+      document.documentElement.appendChild(el);
+      progEl=el;
+    } else if(o.progress){
+      progEl=document.getElementById('stx-router-progress');
+    }
+  }
+
+  function injectViewTransitionCSS(){
+    if(document.getElementById('stx-view-transitions'))return;
+    var s=document.createElement('style');s.id='stx-view-transitions';
+    s.textContent='::view-transition-group(root){animation:none}::view-transition-old(root){animation:none}::view-transition-new(root){animation:none}main,#app-content,[data-stx-content]{view-transition-name:stx-content}::view-transition-old(stx-content){animation:stx-fade-out .15s ease-out both}::view-transition-new(stx-content){animation:stx-fade-in .15s ease-in .1s both}@keyframes stx-fade-out{from{opacity:1}to{opacity:0}}@keyframes stx-fade-in{from{opacity:0}to{opacity:1}}::view-transition{background:transparent}::view-transition-group(stx-content){background:inherit;overflow:hidden}';
+    (document.head||document.documentElement).appendChild(s);
+  }
+
+  // \u2500\u2500 Public API \u2500\u2500
+  var router={
+    navigate:navigate,
+    navigateTo:navigate,
+    prefetch:function(url){
+      var key=cacheKey(url);
+      if(!cache[key]){
+        var wantsFragment=shouldUseFragmentResponse();
+        fetch(url,{headers:wantsFragment?{'X-STX-Router':'true'}:{'Accept':'text/html'}}).then(function(r){var isFrag=wantsFragment&&r.headers.get('X-STX-Fragment')==='true';var pLayout=r.headers.get('X-STX-Layout')||'';var pGroup=r.headers.get('X-STX-Layout-Group')||'';return r.text().then(function(html){return{html:isFrag?'<!--stx-fragment-->'+html:html,layout:pLayout,layoutGroup:pGroup}})}).then(function(result){cache[key]=result.html;layoutCache[key]=result.layout;layoutGroupCache[key]=result.layoutGroup}).catch(function(){});
       }
+    },
+    clearCache:function(){for(var k in cache)delete cache[k];for(var lk in layoutCache)delete layoutCache[lk];for(var gk in layoutGroupCache)delete layoutGroupCache[gk]},
+    cache:cache,
+    swap:swap,
+    updateNav:updateNav
+  };
+
+  window.__stxRouter=router;
+  window.stxRouter=router;
+  if(window.stx)window.stx.router=router;
+
+  // \u2500\u2500 Initialize \u2500\u2500
+  function init(){
+    injectStyles();
+    injectViewTransitionCSS();
+    updateActiveLinks();
+    updateNav(location.pathname);
+  }
 
-      // Push history state (before active link updates so location.pathname is current)
-      if(pushState!==false)history.pushState({},'',url+(hash||''));
+  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();
+})();
+`;
+}
 
-      // Update active nav links
-      updateNav(url);
-      updateActiveLinks();
+// src/codegen.ts
+import fs from "fs";
+import path from "path";
+function generateRouteTypes(routes, outputDir) {
+  const lines = [
+    "// Auto-generated by STX - do not edit",
+    'declare module "stx/routes" {',
+    "  interface RouteMap {"
+  ];
+  for (const route of routes) {
+    const paramEntries = [];
+    for (const p of route.params) {
+      const type = route.pattern.includes(`:${p}*`) ? "string[]" : "string";
+      paramEntries.push(`${p}: ${type}`);
+    }
+    const paramsStr = paramEntries.join("; ");
+    lines.push(`    '${route.pattern}': { ${paramsStr} }`);
+  }
+  lines.push("  }", "}", "");
+  fs.mkdirSync(outputDir, { recursive: true });
+  fs.writeFileSync(path.join(outputDir, "route-types.d.ts"), lines.join(`
+`));
+}
+function generateRouteManifest(routes, outputDir, pagesDir) {
+  const cwd = process.cwd();
+  const relativePages = path.relative(cwd, pagesDir);
+  const excludeDirs = ["components", "layouts", "partials"];
+  const pageRoutes = routes.filter((r) => !excludeDirs.some((dir) => r.pattern.startsWith(`/${dir}/`) || r.pattern === `/${dir}`));
+  const lines = [
+    "// Auto-generated by stx \u2014 do not edit",
+    `// Source: ${relativePages || "pages"}/`,
+    "",
+    "export const routes = ["
+  ];
+  for (const route of pageRoutes) {
+    const relFile = path.relative(cwd, route.filePath).replace(/\\/g, "/");
+    const params = JSON.stringify(route.params);
+    const layoutStr = route.layout ? `, layout: '${path.relative(cwd, route.layout).replace(/\\/g, "/")}'` : "";
+    lines.push(`  { pattern: '${route.pattern}', filePath: '${relFile}', isDynamic: ${route.isDynamic}, params: ${params}${layoutStr} },`);
+  }
+  lines.push("] as const", "");
+  lines.push("export type RouteName = typeof routes[number]['pattern']", "");
+  fs.mkdirSync(outputDir, { recursive: true });
+  fs.writeFileSync(path.join(outputDir, "routes.ts"), lines.join(`
+`));
+}
 
-      // Scroll
-      if(o.scrollToTop&&!hash)window.scrollTo({top:0,behavior:'instant'});
-      else if(hash){var el=document.querySelector(hash);if(el)el.scrollIntoView({behavior:'smooth'})}
+// src/matcher.ts
+import path2 from "path";
+function filePathToPattern(filePath, pagesDir) {
+  const relativePath = path2.relative(pagesDir, filePath);
+  let route = relativePath.replace(/\.(stx|md)$/, "");
+  route = route.split(path2.sep).join("/");
+  if (route === "index") {
+    return "/";
+  }
+  if (route.endsWith("/index")) {
+    route = route.slice(0, -6);
+  }
+  route = route.replace(/\[\[([^\]]+)\]\]/g, ":$1?");
+  route = route.replace(/\[([^\]]+)\]/g, ":$1");
+  route = route.replace(/:\.\.\.([^/]+)/g, ":$1*");
+  return `/${route}`;
+}
+function patternToRegex(pattern) {
+  const params = [];
+  let regexStr = pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&");
+  regexStr = regexStr.replace(/\/:([^/]+)\?/g, (_, name) => {
+    params.push(name);
+    return "(?:/([^/]+))?";
+  });
+  regexStr = regexStr.replace(/:([^/]+)\*/g, (_, name) => {
+    params.push(name);
+    return "(.+)";
+  });
+  regexStr = regexStr.replace(/:([^/]+)/g, (_, name) => {
+    params.push(name);
+    return "([^/]+)";
+  });
+  regexStr = `^${regexStr}$`;
+  return { regex: new RegExp(regexStr), params };
+}
+function matchRoute(pathname, routes) {
+  const normalizedPath = pathname === "" ? "/" : pathname;
+  for (const route of routes) {
+    const match = normalizedPath.match(route.regex);
+    if (match) {
+      const params = {};
+      route.params.forEach((name, index) => {
+        params[name] = match[index + 1];
+      });
+      return { route, params };
+    }
+  }
+  return null;
+}
 
-      // Update title
-      var newTitle=doc.querySelector('title');
-      if(newTitle)document.title=newTitle.textContent;
+// src/nested-layouts.ts
+import fs2 from "fs";
+import path3 from "path";
+function resolveLayoutChain(routeFilePath, pagesDir) {
+  const layouts = [];
+  let dir = path3.dirname(routeFilePath);
+  while (dir.startsWith(pagesDir) || dir === pagesDir) {
+    const layoutFile = path3.join(dir, "_layout.stx");
+    if (fs2.existsSync(layoutFile)) {
+      layouts.unshift(layoutFile);
+    }
+    if (dir === pagesDir)
+      break;
+    dir = path3.dirname(dir);
+  }
+  return layouts;
+}
 
-      // Update <html lang> from the destination doc so screen readers,
-      // CSS :lang() selectors, and any i18n picker that mirrors
-      // document.documentElement.lang stay accurate after SPA hops.
-      if(doc.documentElement&&doc.documentElement.lang){
-        document.documentElement.lang=doc.documentElement.lang;
+// src/file-router.ts
+import fs3 from "fs";
+import path4 from "path";
+function scanDirectory(dir, extensions) {
+  const files = [];
+  if (!fs3.existsSync(dir)) {
+    return files;
+  }
+  const entries = fs3.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path4.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name.startsWith(".")) {
+        continue;
       }
+      files.push(...scanDirectory(fullPath, extensions));
+    } else if (entry.isFile()) {
+      const ext = path4.extname(entry.name);
+      if (extensions.includes(ext)) {
+        if (entry.name.startsWith("_") && entry.name !== "_layout.stx") {
+          continue;
+        }
+        if (entry.name === "_layout.stx") {
+          continue;
+        }
+        files.push(fullPath);
+      }
+    }
+  }
+  return files;
+}
 
-      window.dispatchEvent(new CustomEvent('stx:navigate',{detail:{url:url}}));
-
-      // Execute page scripts FIRST \u2014 they define setup functions and set _latestSetup
-      function execScripts(){
-        scripts.forEach(function(text){
-          // Skip scripts that were already executed (layout-level partials
-          // like theme.stx). Their top-level const/function declarations
-          // would throw "Identifier has already been declared" on re-execution.
-          // Exception: setup functions (__stx_setup_) must always re-execute
-          // because each page has its own setup, and import statements
-          // need special handling.
-          var h=hashScript(text);
-          var isSetup=text.indexOf('__stx_setup_')!==-1;
-          var hasImport=text.indexOf('import ')!==-1;
-          if(!isSetup&&executedScriptHashes[h])return;
-          executedScriptHashes[h]=1;
-          // Wrap scripts with import statements as modules (Bug 3 fix)
-          var ns=document.createElement('script');
-          if(hasImport){
-            ns.type='module';
-          }
-          // Wrap in block scope to prevent const/let collisions on re-navigation.
-          // Top-level const/let in <script> tags are global-scoped in browsers
-          // and throw "Identifier has already been declared" on re-execution.
-          var alreadyScoped=text.trimStart().charAt(0)==='('||text.trimStart().charAt(0)===';'||text.indexOf('window.stx.mount')>-1;
-          ns.textContent=alreadyScoped?text:'{'+text+'}';
-          ns.setAttribute('data-stx-page','');
-          document.body.appendChild(ns);
+class Router {
+  routes;
+  pagesDir;
+  pagesDirs;
+  config;
+  constructor(baseDir, config = {}) {
+    this.config = config;
+    const rawDirs = config.pagesDirs && config.pagesDirs.length > 0 ? config.pagesDirs : [config.pagesDir || "pages"];
+    this.pagesDirs = rawDirs.map((d) => path4.resolve(baseDir, d));
+    this.pagesDir = this.pagesDirs[0];
+    const extensions = config.extensions || [".stx"];
+    const seenPatterns = new Set;
+    this.routes = [];
+    for (const dir of this.pagesDirs) {
+      const files = scanDirectory(dir, extensions);
+      for (const filePath of files) {
+        const pattern = filePathToPattern(filePath, dir);
+        if (seenPatterns.has(pattern))
+          continue;
+        seenPatterns.add(pattern);
+        const { regex, params } = patternToRegex(pattern);
+        const layouts = config.layouts !== false ? resolveLayoutChain(filePath, dir) : [];
+        this.routes.push({
+          pattern,
+          regex,
+          params,
+          filePath,
+          isDynamic: params.length > 0,
+          layout: layouts.length > 0 ? layouts[layouts.length - 1] : undefined
         });
-        // THEN fire stx:load \u2014 now _latestSetup is set and processElement has the right scope
-        window.dispatchEvent(new Event('stx:load'));
       }
-
-      if(extPromises.length>0){
-        Promise.all(extPromises).then(execScripts).catch(execScripts);
+    }
+    this.routes.sort((a, b) => {
+      if (!a.isDynamic && b.isDynamic)
+        return -1;
+      if (a.isDynamic && !b.isDynamic)
+        return 1;
+      const aSegments = a.pattern.split("/").length;
+      const bSegments = b.pattern.split("/").length;
+      if (aSegments !== bSegments)
+        return bSegments - aSegments;
+      return a.pattern.localeCompare(b.pattern);
+    });
+    const stxDir = path4.join(baseDir, ".stx");
+    generateRouteTypes(this.routes, stxDir);
+    generateRouteManifest(this.routes, stxDir, this.pagesDir);
+  }
+  match(pathname) {
+    const normalizedPath = pathname === "" ? "/" : pathname;
+    for (const route of this.routes) {
+      const m = normalizedPath.match(route.regex);
+      if (m) {
+        const params = {};
+        route.params.forEach((name, index) => {
+          params[name] = m[index + 1];
+        });
+        return { route, params };
       }
-else {
-        execScripts();
+    }
+    return null;
+  }
+  resolve(name, params) {
+    const route = this.routes.find((r) => r.pattern === name || r.filePath.includes(name));
+    if (!route)
+      return "#not-found";
+    let resolved = route.pattern;
+    if (params) {
+      for (const [key, value] of Object.entries(params)) {
+        resolved = resolved.replace(`:${key}`, encodeURIComponent(value));
       }
     }
+    return resolved;
+  }
+  addRoute(route) {
+    this.routes.push(route);
+    this.routes.sort((a, b) => {
+      if (!a.isDynamic && b.isDynamic)
+        return -1;
+      if (a.isDynamic && !b.isDynamic)
+        return 1;
+      return a.pattern.localeCompare(b.pattern);
+    });
+  }
+  getLayout(route) {
+    return route.layout ?? null;
+  }
+}
+function createRouter(baseDir, config) {
+  return new Router(baseDir, config);
+}
+function findErrorPage(pagesDir, statusCode) {
+  const candidates = [`${statusCode}.stx`, "error.stx"];
+  for (const candidate of candidates) {
+    const filePath = path4.join(pagesDir, candidate);
+    if (fs3.existsSync(filePath))
+      return filePath;
+  }
+  return null;
+}
+function formatRoutes(routes, baseDir) {
+  return routes.map((route) => {
+    const relativePath = path4.relative(baseDir, route.filePath);
+    const dynamicLabel = route.isDynamic ? " (dynamic)" : "";
+    return `${route.pattern} \u2192 ${relativePath}${dynamicLabel}`;
+  });
+}
 
-    if(o.viewTransitions&&document.startViewTransition){
-      document.startViewTransition(doSwap);
+// src/named-routes.ts
+var routes = {};
+var appUrl = "";
+function setAppUrl(url) {
+  appUrl = url.replace(/\/$/, "");
+}
+function defineRoute(name, routePath, params = {}) {
+  routes[name] = { path: routePath, name, params };
+}
+function defineRoutes(routeDefinitions) {
+  for (const [name, definition] of Object.entries(routeDefinitions)) {
+    if (typeof definition === "string") {
+      routes[name] = { path: definition, name };
+    } else {
+      routes[name] = { ...definition, name };
     }
-else {
-      // Fallback fade for browsers without View Transitions API
-      currentContent.style.transition='opacity 0.12s ease-out';
-      currentContent.style.opacity='0';
-      setTimeout(function(){
-        doSwap();
-        currentContent.style.opacity='1';
-        setTimeout(function(){currentContent.style.transition=''},150);
-      },120);
+  }
+}
+function route(name, params = {}, absolute = false) {
+  const r = routes[name];
+  if (!r) {
+    console.warn(`Route [${name}] not defined.`);
+    return "#undefined-route";
+  }
+  const mergedParams = { ...r.params, ...params };
+  let routePath = r.path;
+  routePath = routePath.replace(/:(\w+)/g, (_, paramName) => {
+    const value = mergedParams[paramName];
+    if (value === undefined) {
+      console.warn(`Missing parameter [${paramName}] for route [${name}].`);
+      return `:${paramName}`;
     }
+    delete mergedParams[paramName];
+    return encodeURIComponent(String(value));
+  });
+  const remainingParams = Object.entries(mergedParams);
+  if (remainingParams.length > 0) {
+    const queryString = remainingParams.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`).join("&");
+    routePath += (routePath.includes("?") ? "&" : "?") + queryString;
   }
-
-  // \u2500\u2500 Link interception \u2500\u2500
-  function shouldIntercept(link){
-    if(!link)return false;
-    var href=link.getAttribute('href');
-    if(!href)return false;
-    if(href.startsWith('http')||href.startsWith('#')||href.startsWith('mailto:')||href.startsWith('tel:')||href.startsWith('javascript:'))return false;
-    if(link.target==='_blank')return false;
-    if(link.hasAttribute('data-stx-no-router')||link.hasAttribute('data-no-router')||link.hasAttribute('download'))return false;
-    if(href===location.pathname)return false;
-    if(!getContainer())return false;
-    return true;
+  return absolute && appUrl ? `${appUrl}${routePath}` : routePath;
+}
+function resetRoutes() {
+  for (const key of Object.keys(routes)) {
+    delete routes[key];
   }
+  appUrl = "";
+}
 
-  // SPA click handling. By default only [data-stx-link] elements get
-  // SPA navigation; regular <a href> does native full page reload. Set
-  // interceptAllLinks:true (window.__stxRouterConfig or build-time
-  // config) to intercept any same-origin anchor \u2014 used by static-site
-  // mode where every page is part of the same SPA shell.
-  document.addEventListener('click',function(e){
-    if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button!==0)return;
-    if(!e.target||!e.target.closest)return;
-    var link=e.target.closest('[data-stx-link]');
-    if(!link&&o.interceptAllLinks){
-      var anchor=e.target.closest('a[href]');
-      if(anchor&&shouldIntercept(anchor))link=anchor;
+// src/middleware.ts
+import fs4 from "fs";
+import path5 from "path";
+function navigateTo(navPath, options = {}) {
+  return {
+    type: "redirect",
+    path: navPath,
+    options: {
+      replace: options.replace ?? false,
+      external: options.external ?? false,
+      redirectCode: options.redirectCode ?? 302
+    }
+  };
+}
+function abortNavigation(error) {
+  const normalizedError = typeof error === "string" ? { statusCode: 500, message: error } : error;
+  return {
+    type: "abort",
+    error: normalizedError
+  };
+}
+function defineMiddleware(handler, options = {}) {
+  return {
+    handler,
+    mode: options.mode ?? "universal"
+  };
+}
+function parseCookies(cookieHeader) {
+  const cookies = {};
+  if (!cookieHeader)
+    return cookies;
+  const pairs = cookieHeader.split(";");
+  for (const pair of pairs) {
+    const [name, ...rest] = pair.split("=");
+    if (name) {
+      const key = name.trim();
+      const value = rest.join("=").trim();
+      if (key) {
+        cookies[key] = decodeURIComponent(value);
+      }
+    }
+  }
+  return cookies;
+}
+function serializeCookie(name, value, options = {}) {
+  let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+  if (options.expires) {
+    const expires = typeof options.expires === "number" ? new Date(Date.now() + options.expires * 1000) : options.expires;
+    cookie += `; Expires=${expires.toUTCString()}`;
+  }
+  if (options.path)
+    cookie += `; Path=${options.path}`;
+  if (options.domain)
+    cookie += `; Domain=${options.domain}`;
+  if (options.secure)
+    cookie += "; Secure";
+  if (options.httpOnly)
+    cookie += "; HttpOnly";
+  if (options.sameSite)
+    cookie += `; SameSite=${options.sameSite}`;
+  return cookie;
+}
+function createServerCookieManager(request, responseHeaders) {
+  const cookieHeader = request.headers.get("cookie") || "";
+  const cookies = parseCookies(cookieHeader);
+  return {
+    get(name) {
+      return cookies[name];
+    },
+    set(name, value, options = {}) {
+      cookies[name] = value;
+      responseHeaders.append("Set-Cookie", serializeCookie(name, value, options));
+    },
+    delete(name) {
+      delete cookies[name];
+      responseHeaders.append("Set-Cookie", serializeCookie(name, "", { expires: new Date(0), path: "/" }));
+    },
+    getAll() {
+      return { ...cookies };
+    }
+  };
+}
+function createClientCookieManager() {
+  return {
+    get(name) {
+      if (typeof document === "undefined")
+        return;
+      const cookies = parseCookies(document.cookie);
+      return cookies[name];
+    },
+    set(name, value, options = {}) {
+      if (typeof document === "undefined")
+        return;
+      document.cookie = serializeCookie(name, value, options);
+    },
+    delete(name) {
+      if (typeof document === "undefined")
+        return;
+      document.cookie = serializeCookie(name, "", { expires: new Date(0), path: "/" });
+    },
+    getAll() {
+      if (typeof document === "undefined")
+        return {};
+      return parseCookies(document.cookie);
+    }
+  };
+}
+function createStorageManager() {
+  const available = typeof window !== "undefined" && typeof window.localStorage !== "undefined";
+  return {
+    get(key) {
+      if (!available)
+        return null;
+      try {
+        return window.localStorage.getItem(key);
+      } catch {
+        return null;
+      }
+    },
+    set(key, value) {
+      if (!available)
+        return;
+      try {
+        window.localStorage.setItem(key, value);
+      } catch {}
+    },
+    remove(key) {
+      if (!available)
+        return;
+      try {
+        window.localStorage.removeItem(key);
+      } catch {}
+    },
+    isAvailable() {
+      return available;
     }
-    if(!link){return}
-    var href=link.getAttribute('href');
-    console.log('[router] click intercepted:',href,'container:',!!getContainer(),'defaultPrevented:',e.defaultPrevented);
-    if(!href||href.startsWith('http')||href.startsWith('#')||href.startsWith('mailto:')||href.startsWith('tel:')){console.log('[router] skipped:',href);return}
-    if(link.target==='_blank'||link.hasAttribute('download'))return;
-    e.preventDefault();
-    e.stopPropagation();
-    console.log('[router] navigating to:',href);
-    navigate(href);
-  },true);
-
-  // \u2500\u2500 Back/forward \u2500\u2500
-  window.addEventListener('popstate',function(){
-    navigate(location.pathname+location.search+location.hash,false);
-  });
-
-  // \u2500\u2500 Prefetch on hover \u2500\u2500
-  if(o.prefetch){
-    document.addEventListener('mouseover',function(e){
-      if(!e.target||!e.target.closest)return;
-      var link=e.target.closest('[data-stx-link]');
-      if(!link)return;
-      var href=link.getAttribute('href');
-      if(cache[href]||prefetching[href])return;
-      prefetching[href]=true;
-      fetch(href,{headers:{'X-STX-Router':'true','Accept':'text/html'}}).then(function(r){
-        var isFrag=r.headers.get('X-STX-Fragment')==='true';
-        var pLayout=r.headers.get('X-STX-Layout')||'';
-        return r.text().then(function(html){return{html:isFrag?'<!--stx-fragment-->'+html:html,layout:pLayout}});
-      }).then(function(result){
-        if(o.cache){cache[href]=result.html;layoutCache[href]=result.layout}
-      }).catch(function(){}).finally(function(){delete prefetching[href]});
-    },true);
+  };
+}
+var middlewareRegistry = new Map;
+function registerMiddleware(name, middleware) {
+  middlewareRegistry.set(name, middleware);
+}
+function getMiddleware(name) {
+  return middlewareRegistry.get(name);
+}
+function hasMiddleware(name) {
+  return middlewareRegistry.has(name);
+}
+function clearMiddleware() {
+  middlewareRegistry.clear();
+}
+function getMiddlewareNames() {
+  return Array.from(middlewareRegistry.keys());
+}
+async function loadMiddlewareFromDirectory(baseDir, middlewareDir = "middleware") {
+  const fullPath = path5.resolve(baseDir, middlewareDir);
+  if (!fs4.existsSync(fullPath)) {
+    return;
   }
-
-  // \u2500\u2500 Active link management \u2500\u2500
-  function updateNav(url){
-    document.querySelectorAll('nav a[href], #mobileNav a[href], [data-stx-nav] a[href]').forEach(function(a){
-      var href=a.getAttribute('href');
-      if(!href||href.startsWith('#')||href.startsWith('http'))return;
-      var isActive=(href===url)||(href==='/'&&url==='/');
-      if(a.hasAttribute('data-stx-link')){
-        var ac=a.getAttribute('data-stx-active-class')||'active';
-        if(isActive)ac.split(' ').forEach(function(cls){if(cls)a.classList.add(cls)});else ac.split(' ').forEach(function(cls){if(cls)a.classList.remove(cls)});
+  const files = fs4.readdirSync(fullPath);
+  for (const file of files) {
+    if (!file.endsWith(".ts") && !file.endsWith(".js"))
+      continue;
+    if (file.includes(".test.") || file.includes(".spec."))
+      continue;
+    const name = file.replace(/\.(ts|js)$/, "");
+    const filePath = path5.join(fullPath, file);
+    try {
+      const mod = await import(filePath);
+      const mw = mod.default;
+      if (mw && typeof mw.handler === "function") {
+        registerMiddleware(name, mw);
+      } else if (typeof mw === "function") {
+        registerMiddleware(name, { handler: mw, mode: "universal" });
       }
-    });
+    } catch (error) {
+      console.warn(`Failed to load middleware '${name}' from ${filePath}:`, error);
+    }
   }
-
-  function updateActiveLinks(){
-    // Update active classes on <stx-link> elements (and legacy data-stx-link)
-    var links=document.querySelectorAll('[data-stx-link]');
-    var cur=location.pathname;
-    links.forEach(function(link){
-      var href=link.getAttribute('to')||link.getAttribute('href')||'';
-      var ac=link.getAttribute('active-class')||link.getAttribute('data-stx-active-class')||'active';
-      var eac=link.getAttribute('exact-active-class')||link.getAttribute('data-stx-exact-active-class')||'exact-active';
-      ac.split(' ').forEach(function(cls){if(cls)link.classList.remove(cls)});
-      eac.split(' ').forEach(function(cls){if(cls)link.classList.remove(cls)});
-      var isExact=cur===href;
-      var isActive=href!=='/'?cur.startsWith(href):cur==='/';
-      if(isExact)eac.split(' ').forEach(function(cls){if(cls)link.classList.add(cls)});
-      if(isActive)ac.split(' ').forEach(function(cls){if(cls)link.classList.add(cls)});
-    });
+}
+function parseQuery(search) {
+  const query = {};
+  if (!search)
+    return query;
+  const params = new URLSearchParams(search);
+  for (const [key, value] of params) {
+    query[key] = value;
   }
-
-  // \u2500\u2500 Progress bar DOM + style \u2500\u2500
-  // Injects a fixed-position element at the top of the viewport plus the
-  // minimal CSS for its transform/opacity transitions. Kept idempotent so
-  // repeated init() calls (e.g. after full-body swaps) don't duplicate.
-  // Also ships the default View Transitions fade+slide CSS when
-  // viewTransitions is enabled and the browser supports it. Apps can
-  // override by defining more specific ::view-transition-* rules later in
-  // the cascade, or opt out entirely with viewTransitions:false.
-  function injectStyles(){
-    if(!document.getElementById('stx-r-css')){
-      var s=document.createElement('style');s.id='stx-r-css';
-      // Strip characters that could escape our CSS block and inject new
-      // declarations: ; { } ( ) " ' \\ < > plus whitespace control chars.
-      // This keeps the value safe to concat into a stylesheet even if a
-      // caller wires the config from an untrusted source.
-      var sanitize=function(v){return String(v).replace(/[;{}()"'\\\\<>\\n\\r\\t]/g,'')};
-      var pc=sanitize(o.progressColor);
-      var ph=sanitize(o.progressHeight);
-      var css='.stx-navigating{cursor:wait}.stx-navigating a,.stx-navigating button{pointer-events:none}#stx-router-progress{position:fixed;top:0;left:0;right:0;height:'+ph+';background:'+pc+';box-shadow:0 0 8px '+pc+',0 0 4px '+pc+';transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out,opacity .26s ease;opacity:0;pointer-events:none;z-index:999999}';
-      if(o.viewTransitions&&'startViewTransition' in document){
-        var dur=(o.viewTransitionDuration||220)+'ms';
-        var ease=o.viewTransitionEasing||'cubic-bezier(0.16, 1, 0.3, 1)';
-        css+='::view-transition-old(root),::view-transition-new(root){animation-duration:'+dur+';animation-timing-function:'+ease+'}';
-        css+='::view-transition-old(root){animation-name:stx-r-fade-out}::view-transition-new(root){animation-name:stx-r-fade-in}';
-        css+='@keyframes stx-r-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}';
-        css+='@keyframes stx-r-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}';
-        css+='@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:0s;animation-name:none}}';
-      }
-      s.textContent=css;
-      document.head.appendChild(s);
+  return query;
+}
+function createRouteLocation(pathname, params, meta, search = "") {
+  return {
+    path: pathname,
+    params,
+    query: parseQuery(search),
+    fullPath: search ? `${pathname}?${search}` : pathname,
+    meta
+  };
+}
+function createMiddlewareContext(to, from, request) {
+  const isServer = typeof window === "undefined";
+  const isClient = !isServer;
+  const responseHeaders = new Headers;
+  return {
+    to,
+    from,
+    isClient,
+    isServer,
+    cookies: isServer && request ? createServerCookieManager(request, responseHeaders) : createClientCookieManager(),
+    storage: createStorageManager(),
+    state: {},
+    request,
+    responseHeaders
+  };
+}
+async function runMiddleware(middlewareNames, context) {
+  const names = Array.isArray(middlewareNames) ? middlewareNames : [middlewareNames];
+  const isServer = context.isServer;
+  for (const name of names) {
+    const middleware = getMiddleware(name);
+    if (!middleware) {
+      console.warn(`Middleware '${name}' not found`);
+      continue;
     }
-    if(o.progress&&!document.getElementById('stx-router-progress')){
-      var el=document.createElement('div');
-      el.id='stx-router-progress';
-      el.setAttribute('role','progressbar');
-      el.setAttribute('aria-hidden','true');
-      // Append to <html>, not <body>: when the router swaps the body
-      // (container:'body' for full-page static-site SPAs) the progress
-      // element gets wiped along with it. <html> stays put across
-      // swaps, so the bar survives multi-hop navigation.
-      document.documentElement.appendChild(el);
-      progEl=el;
-    } else if(o.progress){
-      progEl=document.getElementById('stx-router-progress');
+    if (middleware.mode === "server" && !isServer)
+      continue;
+    if (middleware.mode === "client" && isServer)
+      continue;
+    try {
+      const result = await middleware.handler(context);
+      if (result) {
+        if (result.type === "redirect") {
+          return {
+            passed: false,
+            redirect: result,
+            state: context.state,
+            responseHeaders: context.responseHeaders
+          };
+        }
+        if (result.type === "abort") {
+          return {
+            passed: false,
+            abort: result,
+            state: context.state,
+            responseHeaders: context.responseHeaders
+          };
+        }
+      }
+    } catch (error) {
+      console.error(`Error in middleware '${name}':`, error);
+      return {
+        passed: false,
+        abort: {
+          type: "abort",
+          error: {
+            statusCode: 500,
+            message: error instanceof Error ? error.message : "Middleware error"
+          }
+        },
+        state: context.state,
+        responseHeaders: context.responseHeaders
+      };
     }
   }
-
-  function injectViewTransitionCSS(){
-    if(document.getElementById('stx-view-transitions'))return;
-    var s=document.createElement('style');s.id='stx-view-transitions';
-    s.textContent='::view-transition-group(root){animation:none}::view-transition-old(root){animation:none}::view-transition-new(root){animation:none}main,#app-content,[data-stx-content]{view-transition-name:stx-content}::view-transition-old(stx-content){animation:stx-fade-out .15s ease-out both}::view-transition-new(stx-content){animation:stx-fade-in .15s ease-in .1s both}@keyframes stx-fade-out{from{opacity:1}to{opacity:0}}@keyframes stx-fade-in{from{opacity:0}to{opacity:1}}::view-transition{background:transparent}::view-transition-group(stx-content){background:inherit;overflow:hidden}';
-    (document.head||document.documentElement).appendChild(s);
-  }
-
-  // \u2500\u2500 Public API \u2500\u2500
-  var router={
-    navigate:navigate,
-    navigateTo:navigate,
-    prefetch:function(url){
-      if(!cache[url]){
-        fetch(url,{headers:{'X-STX-Router':'true'}}).then(function(r){var isFrag=r.headers.get('X-STX-Fragment')==='true';return r.text().then(function(html){return isFrag?'<!--stx-fragment-->'+html:html})}).then(function(html){cache[url]=html}).catch(function(){});
-      }
-    },
-    clearCache:function(){for(var k in cache)delete cache[k]},
-    cache:cache,
-    swap:swap,
-    updateNav:updateNav
+  return {
+    passed: true,
+    state: context.state,
+    responseHeaders: context.responseHeaders
   };
+}
 
-  window.__stxRouter=router;
-  window.stxRouter=router;
-  if(window.stx)window.stx.router=router;
-
-  // \u2500\u2500 Initialize \u2500\u2500
-  function init(){
-    injectStyles();
-    injectViewTransitionCSS();
-    updateActiveLinks();
-    updateNav(location.pathname);
-  }
-
-  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();
-})();
-`;
+// src/layout-metadata.ts
+function deriveLayoutGroup(layoutPath) {
+  const normalized = layoutPath.replace(/\\/g, "/");
+  const segments = normalized.split("/").filter(Boolean);
+  const layoutsIndex = segments.lastIndexOf("layouts");
+  const layoutSegment = layoutsIndex >= 0 ? segments[layoutsIndex + 1] : segments.at(-1);
+  if (!layoutSegment)
+    return "app";
+  return layoutSegment.replace(/\.stx$/i, "") || "app";
+}
+function extractLayoutMetadata(html) {
+  const layoutMeta = html.match(/<meta\b[^>]*name=["']stx-layout["'][^>]*content=["']([^"']+)["'][^>]*>/i);
+  const groupMeta = html.match(/<meta\b[^>]*name=["']stx-layout-group["'][^>]*content=["']([^"']+)["'][^>]*>/i);
+  const layoutComment = html.match(/<!--\s*stx-layout:\s*([^ ]+)\s*-->/i);
+  const layout = layoutMeta?.[1] || layoutComment?.[1] || "";
+  return {
+    layout,
+    group: groupMeta?.[1] || deriveLayoutGroup(layout)
+  };
 }
 export {
   setAppUrl,
@@ -1324,6 +1391,8 @@ export {
   formatRoutes,
   findErrorPage,
   filePathToPattern,
+  extractLayoutMetadata,
+  deriveLayoutGroup,
   defineRoutes,
   defineRoute,
   defineMiddleware,
@@ -1338,4 +1407,4 @@ export {
   Router
 };
 
-//# debugId=E741941A15B6252664756E2164756E21
+//# debugId=A9CA11D7A722A40F64756E2164756E21