@kudzujs/core 0.8.52 → 0.8.53

package/MIGRATION_ROADMAP.md

@@ -2,7 +2,7 @@
 
 This document is the source of truth for Kudzu's product direction, architecture invariants, and future development order. Read it before extending React-shaped syntax or browser capabilities.
 
-The executable post-`0.8.52` compiler and large-application sequence is maintained in [`docs/next-architecture/large-application-ai-native-roadmap.md`](./docs/next-architecture/large-application-ai-native-roadmap.md). Follow its PR dependencies for implementation work; this document remains authoritative when selecting or accepting a migration capability.
+The executable post-`0.8.53` compiler and large-application sequence is maintained in [`docs/next-architecture/large-application-ai-native-roadmap.md`](./docs/next-architecture/large-application-ai-native-roadmap.md). Follow its PR dependencies for implementation work; this document remains authoritative when selecting or accepting a migration capability.
 
 [`GOAL_A.md`](./GOAL_A.md) and [`GOAL_B.md`](./GOAL_B.md) are completed capability-validation records. Their commerce and realtime dashboard fixtures prove general lifecycle, navigation, async-workflow, and Worker capabilities; they are not separate product verticals or future priority lists.
 
@@ -59,6 +59,7 @@ Do not add `getStaticProps`, request-time SSR, an SPA router, a stream runtime,
 The following are available building blocks, not future vertical roadmaps:
 
 - Async build-time components, `getStaticPaths()`, runtime path parameters, metadata, base paths, public assets, CSS, CSS Modules, and post-build hooks.
+- Relative source CSS imports close over each page's reachable TypeScript import/re-export graph; configured styles remain explicitly global. Enhanced navigation loads destination CSS before route DOM replacement, reuses shared layout links, and removes outgoing route links.
 - React import normalization for supported named/aliased hooks, direct `React.*` members, fragments, same-file `memo`, inline `useCallback`, direct intrinsic `forwardRef`, top-level `useId`, and analyzable `useMemo` expressions and collections.
 - Function components, props, children, context, direct bindings, conditions, controlled form properties, refs, and synchronous or async handlers.
 - `useState`, independent repeated non-keyed child state with conditional mount ownership, reduced relative-imported `useReducer`, direct dispatch specialization, and reduced Zustand-shaped shared state lowered through package-neutral shared-state/action IR and proven by migration fixtures.

package/PERFORMANCE.md

@@ -6,7 +6,11 @@ Reproducibility classes: `npm run benchmark`, `npm run benchmark:keyed`, `npm ru
 
 The maintained 2026-08-13 comparison used Node 24.14.0 and an Intel Core i5-9500 Linux x64 host, one warm-up, and seven alternating fresh-process samples against clean `v0.8.44`. A narrow fast path skips Kudzu semantic transformation for 450 plain `.ts` modules whose runtime edges are exclusively resolvable relative TypeScript imports or exports; all other modules retain the existing transformer. Compile median fell from 2,323.9 ms to 1,413.2 ms (39.2%) and clean-build median from 3,325.3 ms to 2,382.4 ms (28.4%); every paired sample improved. Compile peak-RSS median fell from 571.2 MiB to 552.6 MiB, while build peak RSS was 570.9 MiB versus 568.8 MiB. Compiler scratch fell from 7,328,390 to 1,971,061 bytes. Both targets emitted the same 50 static HTML files, 10,980 bytes, and deploy SHA-256 `e107d78a7f55bc8a1af0ea6e53efeffa19b3d44d21c892484d103fa346e7ba7b`. This is a source-scale compiler comparison, not a cross-framework result.
 
-## Current 0.8.52 Release Snapshot
+## Current 0.8.53 Release Snapshot
+
+Kudzu 0.8.53 removes unrelated source stylesheet links from route HTML and reuses shared layout links during enhanced navigation. Static routes add no JavaScript, and no new performance claim is made.
+
+## Maintained 0.8.52 Release Snapshot
 
 Kudzu 0.8.52 moves proven effect-private mutable refs from component scope into existing setup-invocation closures. The refs add no serialized route scope, shared runtime, or static-sibling JavaScript; no new performance claim is made.
 

package/README.md

@@ -14,7 +14,7 @@ Kudzu compiles ordinary React-shaped TypeScript and TSX into complete static HTM
 
 > Experimental `0.8.x`: the compiler API and supported TSX surface may change.
 
-**Latest release: 0.8.52 - Effect-private mutable refs.** Top-level `useRef(null)` and `useRef(0)` values used exclusively by one inline effect graph lower to invocation-private closure objects. Browser SDK handles, WebSockets, generation tokens, animation frames, replacement, and cleanup retain ordinary React-shaped source without ResourceIR or a runtime. Read the [release notes](./RELEASES.md#0852---effect-private-mutable-refs), open the [release page](https://github.com/kudzujs/kudzu/releases/tag/v0.8.52), or follow the [architecture packet](./docs/next-architecture/README.md).
+**Latest release: 0.8.53 - Route-aware CSS closure.** Relative source CSS follows each page's reachable TypeScript import and re-export graph, while configured styles remain explicitly global. Enhanced navigation loads destination styles before route replacement, retains shared layout links, removes outgoing styles, and rolls back cancelled loads. Read the [release notes](./RELEASES.md#0853---route-aware-css-closure), open the [release page](https://github.com/kudzujs/kudzu/releases/tag/v0.8.53), or follow the [architecture packet](./docs/next-architecture/README.md).
 
 - [Documentation](https://kudzujs.cloud/docs)
 - [Installation guide](https://kudzujs.cloud/docs#install)

package/RELEASES.md

@@ -1,5 +1,50 @@
 # Kudzu Releases
 
+## 0.8.53 - Route-aware CSS closure
+
+Kudzu 0.8.53 links source styles only from routes whose reachable TypeScript graph imports them.
+
+### Changed in 0.8.53
+
+- Relative CSS imports follow each page's runtime import and re-export graph in deterministic source order.
+- RouteBuildRecord receives each route's exact source stylesheet URLs instead of one site-wide CSS list.
+- `kudzu.config styles` remains explicitly global, deduplicated, and excluded from route-managed ownership.
+- CSS `?url` imports emit downloadable assets without creating stylesheet links.
+- Unimported source CSS is no longer implicitly linked; applications import route/layout styles or configure true globals.
+
+### Enhanced navigation
+
+- Navigable documents mark route-managed source styles separately from configured global links.
+- Destination styles load before route cleanup and DOM replacement.
+- Shared layout stylesheet links retain URL, DOM identity, and cascade order across navigation.
+- Outgoing route styles are removed after successful preparation.
+- Overlapping navigation cancels and rolls back provisional stylesheet transactions without disturbing the newer route.
+- Invalid, duplicate, cross-origin, or failed managed stylesheets fall back to native document navigation.
+
+### Migration evidence
+
+- The React/Vite static sibling excludes the interactive app stylesheet while retaining zero JavaScript.
+- Independent navigation groups exclude one another's layout and route styles.
+- A delayed stylesheet browser test verifies cancellation rollback, shared-link identity, destination activation, and outgoing-link removal.
+- Global style fixtures prove configured source/URL deduplication, while dynamic routes now import their intended CSS explicitly.
+- The starter imports shared CSS through its common header so both generated routes reach the style intentionally.
+
+### Output and performance
+
+- Route HTML omits unrelated feature CSS and its cascade effects.
+- Static pages remain JavaScript-free; only configured enhanced-navigation routes receive managed-style reconciliation.
+- No CSS bundler, style runtime, SPA router, or new performance claim is added.
+
+### Validation
+
+- `npm run check`, `npm test`, and `npm run test:package` pass with all 219 tests and 168 generated pages.
+
+### Upgrade
+
+```bash
+npm install @kudzujs/core@^0.8.53
+```
+
 ## 0.8.52 - Effect-private mutable refs
 
 Kudzu 0.8.52 compiles component-authored mutable refs when one inline effect exclusively owns their complete lifecycle.

package/docs/next-architecture/README.md

@@ -11,7 +11,7 @@ The top-level [`GOAL_A.md`](../../GOAL_A.md) and [`GOAL_B.md`](../../GOAL_B.md)
 | C: state/resource model | Research only | Reduced fixtures expose a limitation |
 | D: routing compatibility | Current behavior preserved | Revisit only with migration evidence and invariant review |
 
-The active post-`0.8.52` implementation sequence is [`large-application-ai-native-roadmap.md`](./large-application-ai-native-roadmap.md). P0.12 validation, property-level object-state dependencies, direct three-boundary callback/ref ownership, direct primitive prop state initialization, repeated direct leaf-handler callback use, direct child callback fan-out, collision-free and private Context action setters, package-neutral shared-state/action IR, browser-only package imports and private mutable refs in owned effects, measured route-entry output optimization, and the plain TypeScript source-scale fast path are complete. ResourceIR remains research for cross-owner transports and subscriptions. The plan orders compiler semantic generalization, large-application foundations, compatibility boundaries, AI tooling, and production validation without changing the invariants below.
+The active post-`0.8.53` implementation sequence is [`large-application-ai-native-roadmap.md`](./large-application-ai-native-roadmap.md). P0.12 validation, property-level object-state dependencies, direct three-boundary callback/ref ownership, direct primitive prop state initialization, repeated direct leaf-handler callback use, direct child callback fan-out, collision-free and private Context action setters, package-neutral shared-state/action IR, browser-only package imports and private mutable refs in owned effects, route/layout CSS closure, measured route-entry output optimization, and the plain TypeScript source-scale fast path are complete. Route capability signatures and emitted shared-chunk reporting are next; ResourceIR remains research for cross-owner transports and subscriptions. The plan orders compiler semantic generalization, large-application foundations, compatibility boundaries, AI tooling, and production validation without changing the invariants below.
 
 ## Required Invariants
 

package/docs/next-architecture/compiler-current-architecture.md

@@ -1,6 +1,6 @@
 # Current Compiler Architecture
 
-This maps the current `0.8.52` architecture, built on the completed `0.8.23` Goal A compiler foundation. File and function names are the stable references; line numbers are intentionally omitted because later work may still move code.
+This maps the current `0.8.53` architecture, built on the completed `0.8.23` Goal A compiler foundation. File and function names are the stable references; line numbers are intentionally omitted because later work may still move code.
 
 ## Responsibility Map
 

package/docs/next-architecture/large-application-ai-native-roadmap.md

@@ -42,7 +42,7 @@ The current limiting architecture is observable in these files:
 | Lists/ranges | `source-compiler.mjs`, `list-runtime.js` | Strong keyed ownership, but syntax recognition and runtime branches are list-specific and not a general range/window primitive |
 | ModuleIR | `compiler/ir/module-ir.mjs` | Numeric slots, names, export strings, and formatted owner strings coexist; several sections are descriptive rather than authoritative inputs |
 | RouteIR/CapabilityIR | `route-capability-planner.mjs` | Validation is shallow and capability selection is site-wide across interactive routes |
-| Build/codegen | `framework/build.mjs`, runtime generators | Full destructive builds, serialized-string handler reachability, source-text runtime surgery, no route chunk/CSS closure report |
+| Build/codegen | `framework/build.mjs`, runtime generators | Full destructive builds, source-text runtime surgery, and no route capability/chunk closure report; route CSS closure is structural |
 | Browser lifetime | `native-runtime.js`, `effect-runtime.js`, `navigation-runtime.js` | Effects and native handlers invalidate stale writes at their existing effect or DOM ownership boundary |
 | Compatibility | React/Router/Zustand passes plus core branches | Package-specific knowledge is not contained behind one adapter boundary |
 | AI interface | CLI and string diagnostics | No stable diagnostic codes, semantic index, explain, fix, or migration analysis output |
@@ -383,7 +383,7 @@ After the relevant P0 foundations, investigate capabilities in this order:
 3. Package-neutral shared state/actions and migration of current Zustand internals. **Completed in `0.8.50`:** Zustand source normalization produces one generic shared-state adapter descriptor; selectors and handlers register JSON-safe SharedStateIR/SharedActionIR records, handler lowering consumes package-neutral actions, and existing RouteIR, layout ownership, same-turn updates, navigation persistence, and browser output remain unchanged. Redux/RTK and public adapter APIs remain unsupported.
 4. Browser-only package imports in owned effect/resource modules. **Completed in `0.8.51` for effects:** direct package references in inline effect setup/cleanup callbacks use existing package import records and route-owned effect ESM bundling; build-time component modules and static siblings omit the package. Helper-indirect, render-time, dynamic-import, and ResourceIR package graphs remain unsupported.
 5. ResourceIR from at least two independent WebSocket/SSE/SDK fixtures with the same semantics. **Completed in `0.8.52` without ResourceIR for private ownership:** the E2B terminal and route-owned WebSocket fixtures lower refs used exclusively by one inline effect to invocation-private closure objects, while existing effect ownership supplies replacement, cleanup, stale setter invalidation, navigation, and BFCache disposal. ResourceIR remains unapproved and now requires independent cross-owner transport/subscription fixtures that cannot fit this narrower model.
-6. Route/layout capability and CSS chunk closure.
+6. Route/layout capability and CSS chunk closure. **Route/layout CSS closure completed in `0.8.53`:** each page's reachable TypeScript import/re-export graph supplies exact source stylesheet edges to RouteBuildRecord, configured styles remain global, static siblings exclude unrelated feature CSS, and enhanced navigation loads incoming links before DOM replacement while retaining shared layout link identity and removing outgoing links. Route capability signatures and bundled shared-chunk reporting remain.
 7. Incremental source and affected-route builds.
 8. Range ownership and virtualization only after a real data-heavy fixture establishes direct DOM limits.
 9. Optimistic shared transactions only after independent mutation fixtures establish commit/rollback semantics.
@@ -481,4 +481,4 @@ The first comparison is Kudzu versus React + Vite using the same agent, model, t
 
 ## Immediate Decision
 
-PR 1 through PR 12, the `0.8.40` property-dependency slice, the `0.8.41` and `0.8.43` direct multi-boundary callback/ref slices, the `0.8.44` Context alias slice, the `0.8.46` action-only Provider setter slice, the `0.8.47` direct primitive prop initializer slice, the `0.8.48` repeated direct leaf-handler callback slice, the `0.8.49` direct child callback fan-out slice, the `0.8.50` package-neutral shared-state/action slice, the `0.8.51` owned-effect package import slice, the `0.8.52` effect-private mutable-ref slice, and the `0.8.42` measured route-output optimization are complete. Continue ResourceIR research only from cross-owner transport/subscription fixtures that cannot use effect-private closure ownership; do not skip directly to a public adapter/store API, router, virtualization, or unsupported ecosystem package feature.
+PR 1 through PR 12, the `0.8.40` property-dependency slice, the `0.8.41` and `0.8.43` direct multi-boundary callback/ref slices, the `0.8.44` Context alias slice, the `0.8.46` action-only Provider setter slice, the `0.8.47` direct primitive prop initializer slice, the `0.8.48` repeated direct leaf-handler callback slice, the `0.8.49` direct child callback fan-out slice, the `0.8.50` package-neutral shared-state/action slice, the `0.8.51` owned-effect package import slice, the `0.8.52` effect-private mutable-ref slice, the `0.8.53` route/layout CSS closure slice, and the `0.8.42` measured route-output optimization are complete. Continue item 6 with route capability signatures and emitted shared-chunk reporting; keep ResourceIR limited to cross-owner fixtures and do not skip directly to a public adapter/store API, router, virtualization, or unsupported ecosystem package feature.

package/docs/next-architecture/versioning.md

@@ -1,6 +1,6 @@
 # Planned Version Sequence
 
-This is an execution sequence, not release history. `0.8.16` through `0.8.52` are completed scopes represented by package/release records.
+This is an execution sequence, not release history. `0.8.16` through `0.8.53` are completed scopes represented by package/release records.
 
 Keep each patch behavior-preserving and independently reviewable. If a boundary proves inseparable, revise this plan before combining releases; do not silently broaden a patch.
 
@@ -43,6 +43,7 @@ Keep each patch behavior-preserving and independently reviewable. If a boundary
 | `0.8.50` | Isolate reduced Zustand migration behind package-neutral shared-state and action IR. | Validated shared identities/actions preserve RouteIR, layout lifetime, same-turn updates, diagnostics, browser behavior, and zero store runtime. |
 | `0.8.51` | Bundle direct browser-only package references from inline owned effect setup/cleanup callbacks. | Package code stays in referenced route effect ESM; build scratch and static siblings omit it while indirect/render-time uses fail. |
 | `0.8.52` | Lower effect-exclusive mutable refs into setup-invocation closures. | E2B and WebSocket fixtures preserve generation, replacement, BFCache, and cleanup without captures, ResourceIR, or static-sibling JavaScript. |
+| `0.8.53` | Close source CSS over each route's reachable TypeScript graph and reconcile managed styles during navigation. | Routes exclude unrelated CSS; destination styles load before replacement, shared layout links retain identity, and cancelled loads roll back safely. |
 
 ## Sequence Rules
 

package/framework/README.md

@@ -76,7 +76,7 @@ Static routes receive no browser runtime. Command routes receive `runtime.js`; d
 
 Exact relative `.worker.ts` constructors in inline effects are validated and bundled in a separate content-hashed ESM graph under `dist/assets/workers/`. Those files are referenced only by rendered effect handlers and never become document capability scripts, preloads, or window imports; unreachable source effects do not emit their Worker roots. Worker graphs allow relative TypeScript ESM runtime imports only and reject JSX, package runtime imports, import-equals declarations, dynamic imports, `require()`, and paths outside `src`. Ordinary runtime imports or re-exports of `.worker.ts` and Worker construction in imported keyed-row effects are rejected.
 
-Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime. Source CSS and global `kudzu.config` styles are emitted in document heads before `afterBuild()` runs; static stylesheet links in component JSX fail compilation instead of loading from the body.
+Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime. Relative source CSS imports follow each page's reachable TypeScript graph and link only from those routes; `kudzu.config` styles remain explicitly global. Enhanced navigation loads incoming managed styles before route replacement, reuses shared links, and removes outgoing links. All styles are emitted before `afterBuild()` runs; static stylesheet links in component JSX fail compilation instead of loading from the body.
 
 Inline SVG rendering normalizes an explicit set of common React presentation aliases before static serialization and binding descriptor creation. Reactive aliases use the existing generic `setAttribute` path. Reactive conditionals and flat intrinsic keyed lists store inert branch or row markup on SVG markers and parse it in the actual parent namespace only when replacement nodes are needed; existing condition/list ownership then handles insertion, identity, updates, and removal. Focus, keyboard, and click handlers on keyed SVG points may update parent state for an external accessible HTML tooltip, and retained handlers read the latest item after list updates. Builds without structural SVG compile out that fragment path, and static SVG adds no JavaScript. Keyed-item conditions, nested SVG lists, MathML structures, and namespaced attributes remain unsupported.
 

package/framework/build.mjs

@@ -62,6 +62,8 @@ async function buildInto(project, outputDirectory, { minify }) {
   const config = await loadConfig(root)
   const base = normalizeBase(config.base)
   const configuredStyles = normalizeStyles(config.styles, base, project)
+  const globalStyleUrls = [...new Set(configuredStyles.urls)]
+  const globalStyleUrlSet = new Set(globalStyleUrls)
   const publicDirectory = normalizePublicDirectory(config.publicDir, project)
   const navigationGroups = normalizeNavigation(config.navigation)
   const navigationRoutes = navigationGroups.flatMap(group => group.routes)
@@ -82,7 +84,6 @@ async function buildInto(project, outputDirectory, { minify }) {
   const projectFiles = await walk(sourceDirectory)
   const allSourceFiles = projectFiles.filter(file => /\.(?:ts|tsx)$/.test(file) && !file.endsWith(".d.ts")).sort()
   const configuredStyleSources = new Set(configuredStyles.sources.map(style => style.source))
-  const discoveredCssFiles = projectFiles.filter(file => file.toLowerCase().endsWith(".css") && !configuredStyleSources.has(file)).sort()
   if (!allSourceFiles.length) throw new Error("No TypeScript files found in src/")
   const allSourceFileSet = new Set(allSourceFiles)
   const sourceIndex = project.sourceIndex
@@ -93,7 +94,8 @@ async function buildInto(project, outputDirectory, { minify }) {
   const sourceFileSet = project.sourceFiles
   for (const file of sourceFiles) sourceFileSet.add(file)
   const staticFiles = await safeStaticFiles(projectFiles)
-  const cssFiles = orderSourceStyles(discoveredCssFiles, sourceFiles, sourceIndex, staticFiles)
+  const stylesByPage = new Map(pageFiles.map(file => [file, orderSourceStyles([file], sourceFiles, sourceIndex, staticFiles).filter(style => !configuredStyleSources.has(style))]))
+  const cssFiles = [...new Set([...stylesByPage.values()].flat())]
   const importedAssets = new Set()
   const { cssModules, cssOutputs } = await prepareSourceStyles(cssFiles, staticFiles, importedAssets, base, project)
 
@@ -122,13 +124,11 @@ async function buildInto(project, outputDirectory, { minify }) {
   const emittedRoutes = new Set()
   const emittedApplicationRoutes = new Set()
   const emittedNavigationRecords = []
-  const styleUrls = [...new Set([
-    ...cssFiles.map(file => assetPath(base, `assets/${relative(sourceDirectory, file).replaceAll(sep, "/")}`)),
-    ...configuredStyles.urls
-  ])]
   const runtimePlaceholder = `/__kudzu_runtime_${randomUUID()}.js`
 
   for (const pageFile of pageFiles) {
+    const sourceStyleUrls = stylesByPage.get(pageFile).map(file => assetPath(base, `assets/${relative(sourceDirectory, file).replaceAll(sep, "/")}`)).filter(url => !globalStyleUrlSet.has(url))
+    const styleUrls = [...sourceStyleUrls, ...globalStyleUrls]
     const compiledFile = compiledPath(pageFile)
     const module = await import(`${pathToFileURL(compiledFile).href}?v=${Date.now()}`)
     if (typeof module.default !== "function") throw new Error(`${relative(root, pageFile)} must export a default component`)
@@ -179,6 +179,7 @@ async function buildInto(project, outputDirectory, { minify }) {
         ...configuredMetadata,
         ...pageMetadata,
         styles: styleUrls.length ? styleUrls : false,
+        managedStyles: navigable ? sourceStyleUrls : [],
         base,
         runtimeAsset: runtimePlaceholder,
         effectAsset: assetPath(base, `assets/${effectPath}`),
@@ -352,16 +353,19 @@ async function buildInto(project, outputDirectory, { minify }) {
   }
   const sortedRewrites = rewrites.sort((left, right) => runtimeSpecificity(right) - runtimeSpecificity(left) || left.pattern.localeCompare(right.pattern))
   await writeFile(join(workDirectory, "kudzu-plan.json"), JSON.stringify({ routes: plans, rewrites: sortedRewrites }, null, 2))
+  const emittedCssFiles = new Set()
   for (const file of cssFiles.filter(file => renderedStyleUrls.has(assetPath(base, `assets/${relative(sourceDirectory, file).replaceAll(sep, "/")}`)))) {
     const output = join(assetsDirectory, relative(sourceDirectory, file))
     await mkdir(dirname(output), { recursive: true })
     await writeFile(output, cssOutputs.get(file))
+    emittedCssFiles.add(file)
   }
   for (const file of [...importedAssets].sort()) {
-    if (cssOutputs.has(file)) continue
     const output = join(assetsDirectory, relative(sourceDirectory, file))
     await mkdir(dirname(output), { recursive: true })
-    await writeFile(output, await readFile(file))
+    if (cssOutputs.has(file)) {
+      if (!emittedCssFiles.has(file)) await writeFile(output, cssOutputs.get(file))
+    } else await writeFile(output, await readFile(file))
   }
   for (const style of configuredStyles.sources.filter(style => renderedStyleUrls.has(withBase(base, style.output)))) {
     let css = await readFile(style.source, "utf8")

package/framework/compiler/runtime-codegen.mjs

@@ -113,7 +113,7 @@ async function mountInitial() {
 `, "", "initial effect mount"],
     ["  await ready\n", "", "initial effect readiness"],
     ["    const { incoming, parsed, capabilities } = documentResult\n", "    const { incoming, parsed } = documentResult\n", "navigation capability result"],
-    ["    await routeDispose()\n    if (current !== revision) return\n", "", "route effect disposal"],
+    ["    await routeDispose()\n    if (current !== revision) {\n      styleUpdate.rollback()\n      return\n    }\n", "", "route effect disposal"],
     ["    commit(incoming, parsed.nodes, capabilities.params, url.pathname, url.search)\n", "    commit(incoming, parsed.nodes)\n", "navigation capability commit"],
     ["    routeDispose = await capabilities.effects?.mountRouteEffects?.() ?? noDispose\n", "", "route effect mount"],
     ["  return { incoming, parsed, capabilities: await loadCapabilities(parsed), record }\n", "  await Promise.all(parsed.assets.filter(path => path !== navigationAsset).map(path => import(path)))\n  return { incoming, parsed, record }\n", "navigation capability load"],

package/framework/compiler/source-compiler.mjs

@@ -3059,7 +3059,7 @@ async function safeStaticFiles(files) {
   return new Set(entries.filter(Boolean))
 }
 
-function orderSourceStyles(cssFiles, sourceFiles, sourceIndex, staticFiles) {
+function orderSourceStyles(entryFiles, sourceFiles, sourceIndex, staticFiles) {
   const ordered = []
   const seenStyles = new Set()
   const seenSources = new Set()
@@ -3069,11 +3069,13 @@ function orderSourceStyles(cssFiles, sourceFiles, sourceIndex, staticFiles) {
     seenSources.add(file)
     const sourceFile = parseSourceFile(file, sourceIndex.get(file))
     for (const statement of sourceFile.statements) {
-      if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier) || !statement.moduleSpecifier.text.startsWith(".")) continue
+      if ((!ts.isImportDeclaration(statement) && !ts.isExportDeclaration(statement)) || !runtimeModuleReference(statement) || !statement.moduleSpecifier || !ts.isStringLiteral(statement.moduleSpecifier) || !statement.moduleSpecifier.text.startsWith(".")) continue
       const specifier = statement.moduleSpecifier.text
-      if (staticImportExtension(specifier) === ".css") {
-        let target
-        try { target = resolveStaticImport(file, specifier, staticFiles) } catch { continue }
+      const queryIndex = specifier.indexOf("?")
+      const query = queryIndex === -1 ? "" : specifier.slice(queryIndex + 1)
+      if (ts.isImportDeclaration(statement) && staticImportExtension(specifier) === ".css") {
+        if (query) continue
+        const target = resolveStaticImport(file, specifier, staticFiles)
         if (!seenStyles.has(target)) {
           seenStyles.add(target)
           ordered.push(target)
@@ -3081,12 +3083,11 @@ function orderSourceStyles(cssFiles, sourceFiles, sourceIndex, staticFiles) {
         continue
       }
       if (isStaticImport(specifier)) continue
-      try { visit(resolveSourceImport(file, specifier, sourceSet)) } catch {}
+      visit(resolveSourceImport(file, specifier, sourceSet))
     }
   }
-  for (const file of sourceFiles.filter(file => file.startsWith(`${pagesDirectory}${sep}`) && file.endsWith(".tsx"))) visit(file)
-  for (const file of sourceFiles) visit(file)
-  return [...ordered, ...cssFiles.filter(file => !seenStyles.has(file))]
+  for (const file of entryFiles) visit(file)
+  return ordered
 }
 
 function staticImportEntry(node, sourceFile, file, staticFiles, importedAssets, cssModules, base, factory) {
@@ -3105,7 +3106,7 @@ function staticImportEntry(node, sourceFile, file, staticFiles, importedAssets,
   const extension = staticImportExtension(specifier)
   if (query === "url") {
     if (!node.importClause?.name || node.importClause.isTypeOnly || node.importClause.namedBindings) throw sourceNodeError(node, sourceFile, "Static assets require one default import")
-    if (extension !== ".css") importedAssets.add(target)
+    importedAssets.add(target)
     const value = factory.createStringLiteral(assetPath(base, `assets/${relative(sourceDirectory, target).replaceAll(sep, "/")}`))
     return staticImportReplacement(node.importClause.name.text, value, factory)
   }

package/framework/core.mjs

@@ -486,9 +486,11 @@ export async function renderPage(component, metadata = {}, props = {}, layout) {
     const title = escapeHtml(metadata.title ?? "Kudzu")
     const head = renderMetadata(metadata)
     const capability = metadata.navigationAsset ? " data-k-capability" : ""
+    const managedStyles = new Set(metadata.managedStyles ?? [])
+    const styleAnchor = metadata.navigationAsset ? "<meta data-k-style-anchor>" : ""
     const styles = metadata.styles === false
       ? ""
-      : (Array.isArray(metadata.styles) ? metadata.styles : [assetPath(metadata.base, "assets/style.css")]).map(href => `<link rel="stylesheet" href="${escapeAttribute(href)}">`).join("")
+      : (Array.isArray(metadata.styles) ? metadata.styles : [assetPath(metadata.base, "assets/style.css")]).map(href => `<link rel="stylesheet" href="${escapeAttribute(href)}"${managedStyles.has(href) ? " data-k-route-style" : ""}>`).join("")
     const runtime = renderContext.hasBehaviors
       ? `<script type="module"${capability} src="${escapeAttribute(metadata.runtimeAsset ?? assetPath(metadata.base, "assets/kudzu.js"))}"></script>`
       : ""
@@ -526,7 +528,7 @@ export async function renderPage(component, metadata = {}, props = {}, layout) {
       : ""
 
     return {
-      html: `<!doctype html><html lang="${escapeAttribute(metadata.lang ?? "en")}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title>${head}${styles}${runtime}${paramRuntime}${bindingRuntime}${listRuntime}${nativeRuntime}${effectRuntime}${navigationRuntime}</head><body${state}${textBindings}${metadata.applicationId ? ` data-k-application="${escapeAttribute(metadata.applicationId)}" data-k-layout="${escapeAttribute(metadata.layoutId)}" data-k-route="${escapeAttribute(metadata.routeId)}"` : ""}>${body}</body></html>`,
+      html: `<!doctype html><html lang="${escapeAttribute(metadata.lang ?? "en")}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title>${head}${styleAnchor}${styles}${runtime}${paramRuntime}${bindingRuntime}${listRuntime}${nativeRuntime}${effectRuntime}${navigationRuntime}</head><body${state}${textBindings}${metadata.applicationId ? ` data-k-application="${escapeAttribute(metadata.applicationId)}" data-k-layout="${escapeAttribute(metadata.layoutId)}" data-k-route="${escapeAttribute(metadata.routeId)}"` : ""}>${body}</body></html>`,
       hasBehaviors: renderContext.hasBehaviors,
       hasEffects: renderContext.hasEffects,
       hasParams: renderContext.hasParams,

package/framework/navigation-runtime.js

@@ -12,6 +12,7 @@ status.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;padding
 document.body.append(status)
 
 let request
+let pendingStyleUpdate
 let revision = 0
 const documents = new Map()
 let observer
@@ -115,9 +116,12 @@ async function navigate(url, push) {
   const record = matchRoute(url.pathname)
   if (!record) return fallback(url, push)
   const current = ++revision
+  pendingStyleUpdate?.rollback()
+  pendingStyleUpdate = undefined
   request?.abort()
   request = new AbortController()
   let committed = false
+  let styleUpdate
   try {
     let documentResult
     const cached = documents.get(url.href)
@@ -128,8 +132,20 @@ async function navigate(url, push) {
     documents.set(url.href, Promise.resolve(documentResult))
     const { incoming, parsed, capabilities } = documentResult
     if (current !== revision) return
+    styleUpdate = prepareStyles(parsed.styles)
+    pendingStyleUpdate = styleUpdate
+    await styleUpdate.ready
+    if (current !== revision) {
+      styleUpdate.rollback()
+      return
+    }
     await routeDispose()
-    if (current !== revision) return
+    if (current !== revision) {
+      styleUpdate.rollback()
+      return
+    }
+    styleUpdate.commit()
+    if (pendingStyleUpdate === styleUpdate) pendingStyleUpdate = undefined
     commit(incoming, parsed.nodes, capabilities.params, url.pathname, url.search)
     committed = true
     routeDispose = await capabilities.effects?.mountRouteEffects?.() ?? noDispose
@@ -139,6 +155,8 @@ async function navigate(url, push) {
     status.textContent = `Navigated to ${document.title}`
     discover()
   } catch (error) {
+    styleUpdate?.rollback()
+    if (pendingStyleUpdate === styleUpdate) pendingStyleUpdate = undefined
     if (current !== revision || error.name === "AbortError") return
     fallback(url, push)
     if (committed) return
@@ -173,7 +191,73 @@ function validate(incoming, record) {
     return url.pathname
   })
   if (!assets.includes(navigationAsset)) throw new Error("Navigation capability asset is missing")
-  return { nodes, assets: [...new Set(assets)] }
+  const styles = [...incoming.head.querySelectorAll('link[data-k-route-style][rel="stylesheet"][href]')]
+  const styleUrls = styles.map(link => {
+    const url = new URL(link.href)
+    if (url.origin !== location.origin) throw new Error("Navigation stylesheet must be same-origin")
+    return url.href
+  })
+  if (new Set(styleUrls).size !== styleUrls.length) throw new Error("Navigation document has duplicate route stylesheets")
+  return { nodes, assets: [...new Set(assets)], styles }
+}
+
+function prepareStyles(incoming) {
+  const anchor = document.head.querySelector("meta[data-k-style-anchor]")
+  if (!anchor || document.head.querySelectorAll("meta[data-k-style-anchor]").length !== 1) throw new Error("Current navigation style anchor is invalid")
+  const current = [...document.head.querySelectorAll('link[data-k-route-style][rel="stylesheet"][href]')]
+  const place = links => {
+    let previous = anchor
+    for (const link of links) {
+      if (link.previousSibling !== previous) previous.after(link)
+      previous = link
+    }
+  }
+  const byUrl = new Map(current.map(link => [new URL(link.href).href, link]))
+  const next = []
+  const created = []
+  const loads = []
+  for (const source of incoming) {
+    const href = new URL(source.href).href
+    let link = byUrl.get(href)
+    if (link) byUrl.delete(href)
+    else {
+      link = document.importNode(source, true)
+      created.push(link)
+      loads.push(new Promise((resolve, reject) => {
+        link.addEventListener("load", resolve, { once: true })
+        link.addEventListener("error", () => reject(new Error("Navigation stylesheet failed to load")), { once: true })
+      }))
+    }
+    next.push(link)
+  }
+  let settled = false
+  let cancel
+  const update = {
+    ready: Promise.race([
+      Promise.all(loads),
+      new Promise((resolve, reject) => {
+        cancel = () => {
+          const error = new Error("Navigation stylesheet load was cancelled")
+          error.name = "AbortError"
+          reject(error)
+        }
+      })
+    ]),
+    commit() {
+      if (settled) return
+      settled = true
+      for (const link of byUrl.values()) link.remove()
+    },
+    rollback() {
+      if (settled) return
+      settled = true
+      place(current)
+      for (const link of created) link.remove()
+      cancel()
+    }
+  }
+  place(next)
+  return update
 }
 
 function commit(incoming, incomingNodes, initializeParams, pathname, search) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudzujs/core",
-  "version": "0.8.52",
+  "version": "0.8.53",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",