@kudzujs/core 0.4.13 → 0.5.0

package/README.md

@@ -79,6 +79,43 @@ npm run dev
 
 Pages live in `src/pages`; `index.tsx` maps to `/`. `npm run dev` serves locally on `127.0.0.1`, reloads the browser after successful rebuilds, and shows build failures in an error overlay. Across that full-page reload, compatible Kudzu logical state is briefly preserved by route-unique state variable name for the current pathname, query, and hash, including controlled properties, conditions, and keyed-list arrays. Renamed, removed, and duplicate-named state is skipped. Uncontrolled DOM state, focus, selection, and imperative DOM mutations are not preserved. Set `PORT` to change the default port of `3000`. The development client and state snapshot are dev-only; production output in `dist/` is unaffected.
 
+Dynamic static pages use bracket parameters and `getStaticPaths()`:
+
+```tsx
+// src/pages/posts/[slug].tsx
+export async function getStaticPaths() {
+  return [
+    { params: { slug: "oak" }, props: { title: "Oak" } },
+    { params: { slug: "pine" }, props: { title: "Pine" } }
+  ]
+}
+
+export default function Post({ title }: { title: string }) {
+  return <h1>{title}</h1>
+}
+```
+
+This emits `/posts/oak` and `/posts/pine`. Parameter values must be safe single path segments; missing, unsafe, and duplicate routes fail the build.
+
+Static trusted HTML can be rendered without a transform layer:
+
+```tsx
+<article dangerouslySetInnerHTML={{ __html: renderedNotionHtml }} />
+```
+
+The HTML is intentionally not sanitized. Use only trusted or previously sanitized build-time content. Reactive raw HTML, children on the same element, void elements, and keyed-list raw HTML are rejected.
+
+Every CSS file under `src` is copied to the same relative path under `dist/assets` and linked in deterministic order. Project-page deployments and post-build artifacts use `kudzu.config.mjs`:
+
+```js
+export default {
+  base: "/newsletter",
+  async afterBuild({ outDir, routes, plans, base }) {
+    // Write RSS, sitemap, search indexes, or other static artifacts.
+  }
+}
+```
+
 ## State Semantics
 
 Kudzu intentionally differs from React's state snapshot behavior:
@@ -106,6 +143,8 @@ const [weather, setWeather] = useState({ temperature: 28, label: "Warm" })
 return <p>{weather.temperature}° {weather.label}</p>
 ```
 
+Derived text uses comment-bounded text nodes rather than wrapper elements, so table cells, options, SVG text, layout, and element selectors keep their authored structure.
+
 ## Reactive Attributes
 
 `className`, `disabled`, controlled `value`, and controlled `checked` accept normal state-dependent TSX expressions. The same `value` binding works for inputs and selects:
@@ -247,7 +286,18 @@ async function load() {
 }
 ```
 
-Primitive values, arrays, plain objects, and destructured props can be captured by client handlers. Functions, symbols, bigints, cycles, class instances, and imported helper functions are not yet supported as captures.
+Native handlers may call default, named, or namespace helpers imported from relative TypeScript modules. Kudzu bundles the reachable helper graph into handler ESM and shared chunks; helper runtime imports must remain relative, and dynamic imports or JSX helpers are rejected. Imported functions cannot be used directly as JSX event callbacks.
+
+```tsx
+import { normalizeStatus } from "../lib/status"
+
+async function load() {
+  const response = await fetch("/api/status")
+  setStatus(normalizeStatus(await response.json()))
+}
+```
+
+Primitive values, arrays, plain objects, and destructured props can be captured by client handlers. Functions, symbols, bigints, cycles, and class instances are not supported as captures.
 
 Native handlers use direct DOM listeners with normal `currentTarget`, bubbling, default-action, and propagation semantics. Handler modules load before listener registration, so `preventDefault`, `stopPropagation`, and `stopImmediatePropagation` work synchronously as expected.
 
@@ -283,8 +333,12 @@ Supported:
 - Function components, props, children, fragments, and TSX
 - File-based static routes
 - Build-time async components
+- Dynamic static routes with build-time props
+- Static trusted `dangerouslySetInnerHTML`
+- Base-path deployments, multiple CSS files, and `afterBuild`
 - Primitive `useState` bindings
 - Synchronous and async event handlers
+- Relative imported helpers in native handlers
 - Serializable component-local captures
 - Direct text DOM patches
 - Reactive standard, `aria-*`, and `data-*` attributes
@@ -300,7 +354,7 @@ Not implemented yet:
 
 - Block-scoped JSX locals and reusable keyed-list aliases
 - Server actions and request-time SSR
-- Imported client helpers and React package islands
+- React package islands
 - HMR and framework DevTools
 
 ## Benchmarks
@@ -323,6 +377,39 @@ Same counter with initial value `7` and increment/decrement buttons:
 
 Astro produces the smallest hand-authored counter. Kudzu's advantage in this fixture is React-shaped state code with a sub-1 KB runtime, not the smallest possible JavaScript.
 
+#### Imported Helper Cost
+
+The same native counter calculation was measured inline and through one relative TypeScript helper. Click medians are per state update from five 20,000-click batches in each of seven fresh Chrome sessions.
+
+| Kudzu variant | Files | Initial JS gzip | Total output | Clean build | Click |
+|---|---:|---:|---:|---:|---:|
+| Inline native handler | 5 | 1,827 B | 3,923 B | **426 ms** | **3.78 µs** |
+| Imported helper | 5 | 1,845 B | 3,949 B | 446 ms | 4.47 µs |
+
+Bundling removes the helper file boundary, leaving 26 raw bytes and 18 gzip bytes for the function definition and calls. The measured call adds 0.69 µs per state update. The smaller 393 B command-only counter above uses a different optimized runtime path and is not the helper overhead baseline.
+
+#### Wrapper-Free Derived Text
+
+The same object-state counter was built with the v0.4.14 span target and the comment-bounded text range. Browser medians use five 20,000-update batches in each of seven fresh Chrome sessions.
+
+| Text target | Files | JS gzip | Total output | Clean build | Update |
+|---|---:|---:|---:|---:|---:|
+| Span v0.4.14 | 7 | **4,453 B** | **10,065 B** | **404 ms** | **4.83 µs** |
+| Comment range | 7 | 4,763 B | 10,922 B | 426 ms | 5.03 µs |
+
+The range costs 310 B gzip only on pages using derived reactive text. It removes wrapper elements and preserves authored structure across table cells, options, SVG text, selectors, and conditional remounts; ordinary attribute and condition pages tree-shake the range code entirely.
+
+### 123-Page Newsletter Build
+
+The migration fixture emits the same 123 static detail pages, two stylesheets, base-prefixed URLs, and post-build feed with no browser JavaScript. Seven clean builds compare generated page files with one dynamic page module.
+
+| Build model | TSX source files | Pages | JS gzip | Total output | Clean build |
+|---|---:|---:|---:|---:|---:|
+| Generated TSX workaround | 123 | 123 | 0 B | 52.0 KB | 882 ms |
+| `getStaticPaths` | **1** | 123 | 0 B | 52.0 KB | **454 ms** |
+
+`getStaticPaths` removes 122 generated source files and cuts clean build time by 48.5% without changing deploy output or runtime cost.
+
 ### Static Journal Page
 
 Same content and CSS across every fixture:
@@ -343,15 +430,15 @@ The list starts with 1,000 keyed items, then updates every label, reverses the o
 
 | Framework | Initial content | Initial JS gzip | Total output | Build | Update | Reverse | Remove | Add | Operations total |
 |---|---:|---:|---:|---:|---:|---:|---:|---:|---:|
-| Astro | Yes | **324 B** | **43.6 KB** | 826 ms | **4.1 ms** | **3.7 ms** | **1.4 ms** | **3.3 ms** | **12.5 ms** |
-| Kudzu | Yes | 5.4 KB | 61.6 KB | **448 ms** | 8.6 ms | 8.3 ms | 2.4 ms | 8.6 ms | 27.9 ms |
-| Next.js | Yes | 182.2 KB | 695.2 KB | 3002 ms | 7.5 ms | 12.3 ms | 4.1 ms | 7.8 ms | 31.7 ms |
-| Vue CSR | No | 24.3 KB | 61.3 KB | 765 ms | 11.4 ms | 9.8 ms | 4.4 ms | 7.0 ms | 32.6 ms |
-| React CSR | No | 59.3 KB | 189.4 KB | 1039 ms | 9.9 ms | 13.4 ms | 4.7 ms | 6.1 ms | 34.1 ms |
-| Svelte CSR | No | 12.9 KB | 33.1 KB | 845 ms | 6.2 ms | 42.9 ms | 4.6 ms | 6.2 ms | 59.9 ms |
-| Qwik CSR | No | 22.2 KB | 64.1 KB | 630 ms | 10.7 ms | 27.5 ms | 39.2 ms | 22.2 ms | 99.6 ms |
-
-Astro is the hand-authored native DOM baseline in the interactive fixtures. React, Vue, Svelte, and Qwik used client-rendered fixtures, while Kudzu and Astro emitted initial HTML; Qwik therefore did not exercise its SSR resumability advantage. Kudzu's keyed-list operations total 27.9 ms, 15.4 ms behind the hand-authored Astro baseline and 6.2 ms ahead of React across all four operations.
+| Astro | Yes | **324 B** | **43.6 KB** | 834 ms | **4.3 ms** | **3.8 ms** | **1.3 ms** | **3.1 ms** | **12.5 ms** |
+| Kudzu | Yes | 5.1 KB | 60.3 KB | **438 ms** | 7.5 ms | 7.0 ms | 1.8 ms | 6.9 ms | 23.2 ms |
+| Next.js | Yes | 182.2 KB | 695.2 KB | 2983 ms | 7.0 ms | 12.0 ms | 3.9 ms | 6.7 ms | 29.6 ms |
+| React CSR | No | 59.3 KB | 189.4 KB | 1020 ms | 9.5 ms | 11.7 ms | 3.8 ms | 5.3 ms | 30.3 ms |
+| Vue CSR | No | 24.3 KB | 61.3 KB | 773 ms | 11.4 ms | 9.5 ms | 4.1 ms | 6.6 ms | 31.6 ms |
+| Svelte CSR | No | 12.9 KB | 33.1 KB | 828 ms | 5.8 ms | 38.9 ms | 4.0 ms | 5.9 ms | 54.6 ms |
+| Qwik CSR | No | 22.2 KB | 64.1 KB | 594 ms | 9.1 ms | 22.2 ms | 30.8 ms | 19.0 ms | 81.1 ms |
+
+Astro is the hand-authored native DOM baseline in the interactive fixtures. React, Vue, Svelte, and Qwik used client-rendered fixtures, while Kudzu and Astro emitted initial HTML; Qwik therefore did not exercise its SSR resumability advantage. Kudzu's keyed-list operations total 23.2 ms, 10.7 ms behind the hand-authored Astro baseline and 7.1 ms ahead of React across all four operations.
 
 Benchmark snapshot collected on July 22, 2026 with Node 24.14.0 on an Intel i5-9500. These results compare the selected one-page fixtures, not ecosystem maturity, browser interaction speed beyond the listed operations, or each framework's full rendering options. Build times vary with machine load and filesystem cache.
 

package/framework/README.md

@@ -1,17 +1,17 @@
 # Framework Internals
 
-- `build.mjs`: TSX compilation, file routes, behavior extraction, static HTML output, and the development server.
+- `build.mjs`: TSX compilation, static and `getStaticPaths` routes, base paths, CSS collection, post-build hooks, behavior extraction, static HTML output, and the development server.
 - `core.mjs`: server-side JSX rendering, state slots, context providers, behavior metadata, and serializable capture validation.
 - `jsx-runtime.mjs`: automatic JSX runtime used by TypeScript.
 - `runtime.js`: command-only runtime for direct state-to-text patches.
 - `shared-runtime.js`: command runtime with capability commit and DOM lifecycle hooks, emitted only when needed.
-- `binding-runtime.js`: optional generic attributes, form properties, and conditional range patches.
+- `binding-runtime.js`: optional generic attributes, form properties, comment-bounded text patches, and conditional range patches.
 - `list-runtime.js`: optional keyed list validation, external item-expression evaluation, item-local conditional ranges, dynamic styles and item-handler scopes, moves, and cleanup.
 - `serialization.js`: capture deserialization shared by binding and native handlers.
 - `native-runtime.js`: optional runtime for normal synchronous and asynchronous ESM handlers.
 - `dev-state.js`: dev-only, short-lived logical-state snapshot validation and restoration.
 - `*.d.ts`: public TypeScript and JSX declarations.
 
-Static routes receive no browser runtime. Command routes receive `runtime.js`; reactive attributes and conditions add `binding-runtime.js`; keyed lists add `list-runtime.js`; native handlers add `native-runtime.js`. Capability runtimes share state and lifecycle hooks through `shared-runtime.js`. Generated evaluators live under `dist/assets/handlers/`. The dev server derives stable state identities from route-unique variable names in each route plan; every state sharing a duplicate name is omitted. It then injects its SSE reload, short-lived full-URL-scoped logical-state snapshot, and build-error client into responses only, never into `dist/`. Snapshots are consumed even when the next page is static or broken. Reload restoration covers compatible framework state, not uncontrolled DOM state, focus, selection, or imperative mutations.
+Static routes receive no browser runtime. Command routes receive `runtime.js`; reactive attributes and conditions add `binding-runtime.js`; keyed lists add `list-runtime.js`; native handlers add `native-runtime.js`. Capability runtimes share state and lifecycle hooks through `shared-runtime.js`. Generated evaluators and their bundled relative TypeScript helpers live under `dist/assets/handlers/`; shared helper chunks are emitted only when multiple handler entries need them. The dev server derives stable state identities from route-unique state variable names in each route plan; every state sharing a duplicate name is omitted. It then injects its SSE reload, short-lived full-URL-scoped logical-state snapshot, and build-error client into responses only, never into `dist/`. Snapshots are consumed even when the next page is static or broken. Reload restoration covers compatible framework state, not uncontrolled DOM state, focus, selection, or imperative mutations.
 
 Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime.

package/framework/binding-runtime.js

@@ -9,13 +9,13 @@ const mountedBindings = new WeakSet()
 const mountedConditions = new WeakSet()
 const bindingRegistrations = new WeakMap()
 const conditionRegistrations = new WeakMap()
-const bindingTypes = ["text", "class", "disabled", "value", "checked", "style"]
+const textDescriptors = globalThis.__KUDZU_TEXT_BINDINGS__ && typeof document !== "undefined" ? JSON.parse(document.body.dataset.kTextBindings ?? "[]") : []
+const bindingTypes = ["class", "disabled", "value", "checked", "style"]
 const bindingSelector = [...bindingTypes.map(target => `[data-k-bind-${target}]`), "[data-k-bind-attrs]"].join(",")
 
 export function patchBinding(node, target, value) {
-  if (target === "text") {
-    const next = value == null ? "" : String(value)
-    if (node.textContent !== next) node.textContent = next
+  if (globalThis.__KUDZU_TEXT_BINDINGS__ && target === "text") {
+    patchText(node, value)
   } else if (target === "disabled") {
     node.toggleAttribute("disabled", Boolean(value))
   } else if (target === "checked") {
@@ -94,6 +94,25 @@ function mountBindings(root) {
       }).catch(error => console.error(error))
     }
   }
+  if (globalThis.__KUDZU_TEXT_BINDINGS__) {
+    for (const node of textBindingStarts(root)) {
+      if (mountedBindings.has(node)) continue
+      const descriptor = textDescriptors[Number(node.data.slice("k-text:".length))]
+      if (!descriptor) continue
+      mountedBindings.add(node)
+      const registrations = []
+      bindingRegistrations.set(node, registrations)
+      loadEvaluator(descriptor).then(evaluator => {
+        if (!node.isConnected) return
+        const binding = { node, target: "text", read: evaluator.read }
+        for (const id of evaluator.stateIds) {
+          register(bindingTargets, id, binding)
+          registrations.push([id, binding])
+        }
+        patchBinding(node, "text", binding.read())
+      }).catch(error => console.error(error))
+    }
+  }
 }
 
 function mountConditions(root) {
@@ -146,6 +165,13 @@ function unmountBindings(root) {
     bindingRegistrations.delete(node)
     mountedBindings.delete(node)
   }
+  if (globalThis.__KUDZU_TEXT_BINDINGS__) {
+    for (const node of textBindingStarts(root)) {
+      for (const [id, binding] of bindingRegistrations.get(node) ?? []) bindingTargets.get(id)?.delete(binding)
+      bindingRegistrations.delete(node)
+      mountedBindings.delete(node)
+    }
+  }
 }
 
 function unmountConditions(root) {
@@ -227,6 +253,28 @@ function matching(root, selector) {
   return [...(root.matches?.(selector) ? [root] : []), ...(root.querySelectorAll?.(selector) ?? [])]
 }
 
+function textBindingStarts(root) {
+  const nodes = root.nodeType === 8 && root.data.startsWith("k-text:") ? [root] : []
+  const walker = (root.ownerDocument ?? root).createTreeWalker?.(root, 128)
+  while (walker?.nextNode()) if (walker.currentNode.data.startsWith("k-text:")) nodes.push(walker.currentNode)
+  return nodes
+}
+
+function patchText(start, value) {
+  const next = value == null ? "" : String(value)
+  const current = start.nextSibling
+  const text = current?.nodeType === 3 ? current : undefined
+  const end = text ? text.nextSibling : current
+  if (end?.nodeType !== 8 || end.data !== "k-text-end") throw new Error("Reactive text marker has no end")
+  if (text) {
+    if (next) {
+      if (text.data !== next) text.data = next
+    } else text.remove()
+    return
+  }
+  if (next) end.before(start.ownerDocument.createTextNode(next))
+}
+
 function capitalize(value) {
   return value[0].toUpperCase() + value.slice(1)
 }

package/framework/build.mjs

@@ -1,9 +1,9 @@
 import { createServer } from "node:http"
 import { randomUUID } from "node:crypto"
 import { cp, mkdir, readFile, readdir, rm, stat, watch, writeFile } from "node:fs/promises"
-import { extname, join, relative, resolve, sep } from "node:path"
+import { dirname, extname, join, relative, resolve, sep } from "node:path"
 import { pathToFileURL } from "node:url"
-import { transform } from "esbuild"
+import { build as bundle, transform } from "esbuild"
 import ts from "typescript"
 import { renderPage } from "./core.mjs"
 import { stateSchema } from "./dev-state.js"
@@ -17,17 +17,22 @@ const outputDirectory = join(root, "dist")
 const devClient = (session, revision, schema) => `<script>(()=>{const show=event=>{let box=document.getElementById("__kudzu_error");if(!box){box=document.createElement("div");box.id="__kudzu_error";box.setAttribute("role","alert");box.setAttribute("aria-live","assertive");box.style.cssText="position:fixed;inset:0;z-index:2147483647;overflow:auto;padding:2rem;background:#200;color:#fff;font:16px/1.5 ui-monospace,monospace";const title=document.createElement("strong"),text=document.createElement("pre");title.textContent="Kudzu build error";text.style.whiteSpace="pre-wrap";box.append(title,text);document.body.append(box)}box.querySelector("pre").textContent=event.data};const schema=${inlineJson(schema)},route=location.pathname+location.search+location.hash,urls=[...document.querySelectorAll('script[type="module"][src]')].map(node=>node.src).filter(url=>/\\/assets\\/kudzu(?:-(?:binding|list|native))?\\.js$/.test(new URL(url).pathname));const devImport=import("/__kudzu_dev.js"),runtimeImports=Promise.allSettled(urls.map(url=>import(url)));const ready=(async()=>{const dev=await devImport,modules=await runtimeImports,runtime=modules.find(result=>result.status==="fulfilled"&&result.value.browserState instanceof Map&&typeof result.value.commitDom==="function")?.value;try{dev.restoreState(sessionStorage,route,runtime?.browserState,schema,runtime?.commitDom)}catch{}return{dev,runtime}})().catch(()=>({}));const events=new EventSource("/__kudzu_reload?session=${session}&revision=${revision}");let reloading=false;events.addEventListener("reload",async()=>{if(reloading)return;reloading=true;try{const{dev,runtime}=await ready;dev?.snapshotState(sessionStorage,route,runtime?.browserState,schema)}catch{}location.reload()});events.addEventListener("build-error",show)})()</script>`
 
 export async function build({ quiet = false, minify = true } = {}) {
+  const config = await loadConfig()
+  const base = normalizeBase(config.base)
   await rm(workDirectory, { recursive: true, force: true })
   await rm(outputDirectory, { recursive: true, force: true })
   await mkdir(workDirectory, { recursive: true })
   await mkdir(outputDirectory, { recursive: true })
 
-  const sourceFiles = (await walk(sourceDirectory)).filter(file => /\.(?:ts|tsx)$/.test(file)).sort()
+  const projectFiles = await walk(sourceDirectory)
+  const sourceFiles = projectFiles.filter(file => /\.(?:ts|tsx)$/.test(file)).sort()
+  const cssFiles = projectFiles.filter(file => file.endsWith(".css")).sort()
   if (!sourceFiles.length) throw new Error("No TypeScript files found in src/")
+  const sourceFileSet = new Set(sourceFiles)
 
   const handlerModules = []
   for (const file of sourceFiles) {
-    const handlerModule = await compile(file)
+    const handlerModule = await compile(file, sourceFileSet, base)
     if (handlerModule) handlerModules.push(handlerModule)
   }
 
@@ -40,34 +45,44 @@ export async function build({ quiet = false, minify = true } = {}) {
   let listStyleCount = 0
   let stateSeedCount = 0
   const plans = []
-  const hasStyles = await exists(join(sourceDirectory, "style.css"))
+  const emittedRoutes = new Set()
+  const styleUrls = cssFiles.map(file => assetPath(base, `assets/${relative(sourceDirectory, file).replaceAll(sep, "/")}`))
 
   for (const pageFile of pageFiles) {
     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`)
 
-    const result = await renderPage(module.default, {
-      ...(module.metadata ?? {}),
-      styles: hasStyles
-    })
-    const route = routeFromPage(pageFile)
-    const routeDirectory = join(outputDirectory, route)
-    await mkdir(routeDirectory, { recursive: true })
-    await writeFile(join(routeDirectory, "index.html"), result.html)
-    plans.push({ route: `/${route}`, ...result.plan })
-    if (result.hasBehaviors) behaviorCount++
-    if (result.hasBindings) bindingCount++
-    if (result.hasLists) listCount++
-    if (result.hasListStyles) listStyleCount++
-    if (result.hasStateSeed) stateSeedCount++
+    const entries = await staticPathEntries(module, pageFile)
+    for (const { params, props } of entries) {
+      const route = routeFromPage(pageFile, params)
+      const routePath = withBase(base, `/${route}`)
+      if (emittedRoutes.has(routePath)) throw new Error(`Duplicate route: ${routePath}`)
+      emittedRoutes.add(routePath)
+      const result = await renderPage(module.default, {
+        ...(module.metadata ?? {}),
+        styles: styleUrls.length ? styleUrls : false,
+        base
+      }, props)
+      const routeDirectory = join(outputDirectory, route)
+      await mkdir(routeDirectory, { recursive: true })
+      await writeFile(join(routeDirectory, "index.html"), result.html)
+      plans.push({ route: routePath, ...result.plan })
+      if (result.hasBehaviors) behaviorCount++
+      if (result.hasBindings) bindingCount++
+      if (result.hasLists) listCount++
+      if (result.hasListStyles) listStyleCount++
+      if (result.hasStateSeed) stateSeedCount++
+    }
   }
 
   const assetsDirectory = join(outputDirectory, "assets")
   await mkdir(assetsDirectory, { recursive: true })
   const commandEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.commands).map(event => event.event)))].sort()
   const nativeEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.native).map(event => event.event)))].sort()
-  const nativeModules = handlerModules.filter(module => module.hasNativeHandlers).map(module => `/assets/${module.path}`)
+  const hasTextBindings = plans.some(plan => plan.bindings.some(binding => binding.target === "text"))
+  const hasListConditions = plans.some(plan => plan.lists.some(list => list.conditions))
+  const nativeModules = handlerModules.filter(module => module.hasNativeHandlers).map(module => assetPath(base, `assets/${module.path}`))
   const hasNativeHandlers = nativeModules.length > 0
   if (behaviorCount) {
     const runtimeFile = bindingCount || listCount || hasNativeHandlers ? "./shared-runtime.js" : "./runtime.js"
@@ -81,7 +96,7 @@ export async function build({ quiet = false, minify = true } = {}) {
       .replace('"./shared-runtime.js"', '"./kudzu.js"')
       .replace('"./serialization.js"', '"./kudzu-serialization.js"')
       .replace('"./style.js"', '"./kudzu-style.js"')
-    await writeJavaScript(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime, minify)
+    await writeBundledJavaScript(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime, minify, { "globalThis.__KUDZU_TEXT_BINDINGS__": String(hasTextBindings) })
   }
   if (listCount) {
     let listRuntime = (await readFile(new URL("./list-runtime.js", import.meta.url), "utf8"))
@@ -94,7 +109,7 @@ export async function build({ quiet = false, minify = true } = {}) {
   }`
     listRuntime = listRuntime.replace("  /* list-style */", listStyleCount ? stylePatch : "")
     if (listStyleCount) listRuntime = `import { serializeStyle } from "./kudzu-style.js"\n${listRuntime}`
-    await writeJavaScript(join(assetsDirectory, "kudzu-list.js"), listRuntime, minify)
+    await writeBundledJavaScript(join(assetsDirectory, "kudzu-list.js"), listRuntime, minify, { __KUDZU_LIST_CONDITIONS__: String(hasListConditions) })
   }
   if (hasNativeHandlers) {
     const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
@@ -107,11 +122,43 @@ export async function build({ quiet = false, minify = true } = {}) {
     await mkdir(resolve(output, ".."), { recursive: true })
     await writeJavaScript(output, handlerModule.code, minify)
   }
+  const clientModules = await collectClientModules(handlerModules.flatMap(module => module.clientImports), sourceFileSet)
+  for (const file of clientModules) {
+    const output = join(assetsDirectory, clientModulePath(file))
+    await mkdir(resolve(output, ".."), { recursive: true })
+    await writeJavaScript(output, await compileClientModule(file, sourceFileSet), minify)
+  }
+  if (clientModules.length) {
+    await bundle({
+      entryPoints: handlerModules.map(module => join(assetsDirectory, module.path)),
+      outbase: join(assetsDirectory, "handlers"),
+      outdir: join(assetsDirectory, "handlers"),
+      entryNames: "[dir]/[name]",
+      chunkNames: "chunks/[name]-[hash]",
+      allowOverwrite: true,
+      bundle: true,
+      splitting: true,
+      format: "esm",
+      target: "es2022",
+      minify,
+      legalComments: "none",
+      logLevel: "silent"
+    })
+    await rm(join(assetsDirectory, "modules"), { recursive: true, force: true })
+  }
   await writeFile(join(workDirectory, "kudzu-plan.json"), JSON.stringify({ routes: plans }, null, 2))
-  if (hasStyles) await cp(join(sourceDirectory, "style.css"), join(assetsDirectory, "style.css"))
+  for (const file of cssFiles) {
+    const output = join(assetsDirectory, relative(sourceDirectory, file))
+    await mkdir(dirname(output), { recursive: true })
+    await cp(file, output)
+  }
   if (await exists(join(root, "public"))) await cp(join(root, "public"), outputDirectory, { recursive: true })
+  if (config.afterBuild !== undefined) {
+    if (typeof config.afterBuild !== "function") throw new Error("kudzu.config afterBuild must be a function")
+    await config.afterBuild({ root, outDir: outputDirectory, sourceDir: sourceDirectory, base, routes: plans.map(plan => plan.route), plans })
+  }
 
-  if (!quiet) console.log(`Built ${pageFiles.length} page(s), ${behaviorCount} interactive page(s) into dist/`)
+  if (!quiet) console.log(`Built ${plans.length} page(s), ${behaviorCount} interactive page(s) into dist/`)
 }
 
 function specializeEvents(source, events) {
@@ -137,6 +184,22 @@ async function writeJavaScript(file, source, minify) {
   await writeFile(file, code)
 }
 
+async function writeBundledJavaScript(file, source, minify, define) {
+  const result = await bundle({
+    stdin: { contents: source, resolveDir: dirname(file), sourcefile: file },
+    bundle: true,
+    write: false,
+    external: ["./kudzu.js", "./kudzu-serialization.js", "./kudzu-style.js"],
+    define,
+    format: "esm",
+    target: "es2022",
+    minify,
+    legalComments: "none",
+    logLevel: "silent"
+  })
+  await writeFile(file, result.outputFiles[0].contents)
+}
+
 export function parseDevPort(value) {
   if (value === undefined || value.trim() === "") return 3000
   if (!/^\d+$/.test(value)) throw new Error(`Invalid dev server port: ${value}`)
@@ -147,6 +210,7 @@ export function parseDevPort(value) {
 
 export async function dev({ port = parseDevPort(process.env.PORT) } = {}) {
   if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error(`Invalid dev server port: ${port}`)
+  const base = normalizeBase((await loadConfig()).base)
 
   let buildError
   let revision = 0
@@ -184,7 +248,7 @@ export async function dev({ port = parseDevPort(process.env.PORT) } = {}) {
         return
       }
 
-      const relativePath = pathname.replace(/^\/+/, "")
+      const relativePath = stripBase(pathname, base).replace(/^\/+/, "")
       let file = resolve(outputDirectory, relativePath)
       if (!file.startsWith(`${outputDirectory}${sep}`) && file !== outputDirectory) throw new Error("Invalid path")
 
@@ -245,6 +309,12 @@ function injectDevClient(html, session, revision, schema) {
   return `${html}${devClient(session, revision, schema)}`
 }
 
+function stripBase(path, base) {
+  if (!base) return path
+  if (path === base) return "/"
+  return path.startsWith(`${base}/`) ? path.slice(base.length) : path
+}
+
 async function devSchema(pathname) {
   try {
     const plan = JSON.parse(await readFile(join(workDirectory, "kudzu-plan.json"), "utf8"))
@@ -275,11 +345,12 @@ function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
 }
 
-async function compile(file) {
+async function compile(file, sourceFiles, base) {
   const source = await readFile(file, "utf8")
   const nativeHandlers = []
   const reactiveBindings = []
   const listExpressions = []
+  const clientImports = new Set()
   const handlerPath = `handlers/${relative(sourceDirectory, file).replaceAll(sep, "/").replace(/\.(?:ts|tsx)$/, ".js")}`
   const result = ts.transpileModule(source, {
     fileName: file,
@@ -289,7 +360,7 @@ async function compile(file) {
       jsx: ts.JsxEmit.ReactJSX,
       jsxImportSource: "@kudzujs/core"
     },
-    transformers: { before: [createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, `/assets/${handlerPath}`)] },
+    transformers: { before: [createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, assetPath(base, `assets/${handlerPath}`), file, sourceFiles, clientImports)] },
     reportDiagnostics: true
   })
 
@@ -304,6 +375,7 @@ async function compile(file) {
 
   if (!nativeHandlers.length && !reactiveBindings.length && !listExpressions.length) return undefined
   const moduleSource = [
+    printClientImports(nativeHandlers.flatMap(handler => handler.imports), handlerPath),
     ...nativeHandlers.map(handler => printNativeHandler(handler)),
     ...reactiveBindings.map(entry => printReactiveBinding(entry)),
     ...listExpressions.map(entry => printListExpression(entry))
@@ -314,12 +386,13 @@ async function compile(file) {
   })
   const moduleErrors = moduleResult.diagnostics?.filter(diagnostic => diagnostic.category === ts.DiagnosticCategory.Error) ?? []
   if (moduleErrors.length) throw new Error(moduleErrors.map(error => ts.flattenDiagnosticMessageText(error.messageText, "\n")).join("\n"))
-  return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0 }
+  return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0, clientImports: [...clientImports] }
 }
 
-function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl) {
+function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl, file, sourceFiles, clientImports) {
   return context => sourceFile => {
     const factory = context.factory
+    const importBindings = clientImportBindings(sourceFile, file, sourceFiles)
     const settersByFunction = new Map()
     const functions = new Map()
     const jsxLocalDeclarations = new Map()
@@ -501,7 +574,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
 
       if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && /^on[A-Z]/.test(node.name.getText())) {
         const setters = settersForNode(node, settersByFunction)
-        const event = compileEvent(node.initializer.expression, setters, functions, factory, nativeHandlers, handlerUrl, listEventItems.get(node))
+        const event = compileEvent(node.initializer.expression, setters, functions, factory, nativeHandlers, handlerUrl, listEventItems.get(node), importBindings, clientImports)
         if (event) {
           usesBehavior = true
           return factory.updateJsxAttribute(node, node.name, factory.createJsxExpression(undefined, event))
@@ -810,17 +883,20 @@ function factoryNull() {
   return ts.factory.createNull()
 }
 
-function compileEvent(expression, setters, functions, factory, nativeHandlers, handlerUrl, listItem) {
+function compileEvent(expression, setters, functions, factory, nativeHandlers, handlerUrl, listItem, importBindings, clientImports) {
   if (ts.isIdentifier(expression)) expression = functions.get(expression.text)
   if (!expression || (!ts.isArrowFunction(expression) && !ts.isFunctionExpression(expression) && !ts.isFunctionDeclaration(expression))) return undefined
 
   const optimized = compileOptimizedEvent(expression, setters, factory)
   if (optimized) return optimized
 
-  const captures = nativeCaptureNames(expression, setters)
+  const allCaptures = nativeCaptureNames(expression, setters)
+  const imports = [...referencedImportedBindings(expression, importBindings)].map(name => importBindings.get(name))
+  const captures = new Set([...allCaptures].filter(name => !importBindings.has(name)))
+  for (const entry of imports) clientImports.add(entry.target)
   const usedStates = nativeStateNames(expression, setters)
   const exportName = `handler${nativeHandlers.length}`
-  nativeHandlers.push({ exportName, expression, captures, setters: new Map([...setters].filter(([, state]) => usedStates.has(state))) })
+  nativeHandlers.push({ exportName, expression, captures, imports, setters: new Map([...setters].filter(([, state]) => usedStates.has(state))) })
   const states = [...usedStates].map(name => factory.createArrayLiteralExpression([
     factory.createStringLiteral(name),
     factory.createIdentifier(name)
@@ -871,6 +947,16 @@ function nativeCaptureNames(expression, setters) {
   return captureNames(expression, expression.body, setters)
 }
 
+function referencedImportedBindings(expression, imports) {
+  const names = new Set()
+  const visit = node => {
+    if (ts.isIdentifier(node) && imports.has(node.text) && isReferenceIdentifier(node)) names.add(node.text)
+    ts.forEachChild(node, visit)
+  }
+  visit(expression.body)
+  return names
+}
+
 function captureNames(declarationRoot, referenceRoot, setters) {
   const local = new Set()
   const collectDeclarations = node => {
@@ -937,6 +1023,135 @@ function settersForNode(node, settersByFunction) {
   return new Map()
 }
 
+function clientImportBindings(sourceFile, file, sourceFiles) {
+  const bindings = new Map()
+  for (const node of sourceFile.statements) {
+    if (!ts.isImportDeclaration(node) || !node.importClause || node.importClause.isTypeOnly || !ts.isStringLiteral(node.moduleSpecifier) || !node.moduleSpecifier.text.startsWith(".")) continue
+    const target = resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles)
+    if (node.importClause.name) bindings.set(node.importClause.name.text, { kind: "default", local: node.importClause.name.text, target })
+    const named = node.importClause.namedBindings
+    if (named && ts.isNamespaceImport(named)) bindings.set(named.name.text, { kind: "namespace", local: named.name.text, target })
+    if (named && ts.isNamedImports(named)) {
+      for (const entry of named.elements) {
+        if (!entry.isTypeOnly) bindings.set(entry.name.text, { kind: "named", imported: (entry.propertyName ?? entry.name).text, local: entry.name.text, target })
+      }
+    }
+  }
+  return bindings
+}
+
+function printClientImports(entries, handlerPath) {
+  const unique = new Map(entries.map(entry => [`${entry.target}:${entry.kind}:${entry.imported ?? ""}:${entry.local}`, entry]))
+  const groups = Map.groupBy(unique.values(), entry => entry.target)
+  const imports = []
+  for (const [target, group] of groups) {
+    const specifier = relativeModulePath(handlerPath, clientModulePath(target))
+    const defaults = group.filter(entry => entry.kind === "default")
+    const named = group.filter(entry => entry.kind === "named")
+    if (defaults.length === 1 || named.length) imports.push(`import ${defaults.length === 1 ? `${defaults[0].local}${named.length ? ", " : ""}` : ""}${named.length ? `{ ${named.map(entry => entry.imported === entry.local ? entry.local : `${entry.imported} as ${entry.local}`).join(", ")} }` : ""} from ${JSON.stringify(specifier)}`)
+    if (defaults.length > 1) for (const entry of defaults) imports.push(`import ${entry.local} from ${JSON.stringify(specifier)}`)
+    for (const entry of group.filter(entry => entry.kind === "namespace")) imports.push(`import * as ${entry.local} from ${JSON.stringify(specifier)}`)
+  }
+  return imports.join("\n")
+}
+
+async function collectClientModules(entries, sourceFiles) {
+  const modules = new Set()
+  const queue = [...new Set(entries)]
+  while (queue.length) {
+    const file = queue.shift()
+    if (modules.has(file)) continue
+    const source = await readFile(file, "utf8")
+    const sourceFile = parseSourceFile(file, source)
+    if (containsJsx(sourceFile)) throw new Error(`${relative(root, file)} Imported client helpers must not contain JSX`)
+    rejectUnsupportedClientImports(sourceFile, file)
+    modules.add(file)
+    for (const node of sourceFile.statements) {
+      if ((!ts.isImportDeclaration(node) && !ts.isExportDeclaration(node)) || !node.moduleSpecifier || !ts.isStringLiteral(node.moduleSpecifier) || !runtimeModuleReference(node)) continue
+      if (!node.moduleSpecifier.text.startsWith(".")) throw new Error(`${relative(root, file)} Imported client helpers may only use relative runtime imports`)
+      queue.push(resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles))
+    }
+  }
+  const outputs = new Map()
+  for (const file of modules) {
+    const output = clientModulePath(file)
+    if (outputs.has(output)) throw new Error(`${relative(root, file)} and ${relative(root, outputs.get(output))} emit the same client module path`)
+    outputs.set(output, file)
+  }
+  return [...modules].sort()
+}
+
+async function compileClientModule(file, sourceFiles) {
+  const source = await readFile(file, "utf8")
+  const transformer = context => sourceFile => {
+    const factory = context.factory
+    const visitor = node => {
+      if (ts.isImportDeclaration(node) && runtimeModuleReference(node) && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text.startsWith(".")) {
+        const target = resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles)
+        return factory.updateImportDeclaration(node, node.modifiers, node.importClause, factory.createStringLiteral(relativeModulePath(clientModulePath(file), clientModulePath(target))), node.attributes)
+      }
+      if (ts.isExportDeclaration(node) && runtimeModuleReference(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text.startsWith(".")) {
+        const target = resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles)
+        return factory.updateExportDeclaration(node, node.modifiers, node.isTypeOnly, node.exportClause, factory.createStringLiteral(relativeModulePath(clientModulePath(file), clientModulePath(target))), node.attributes)
+      }
+      return ts.visitEachChild(node, visitor, context)
+    }
+    return ts.visitNode(sourceFile, visitor)
+  }
+  const result = ts.transpileModule(source, {
+    fileName: file,
+    compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext },
+    transformers: { before: [transformer] },
+    reportDiagnostics: true
+  })
+  const errors = result.diagnostics?.filter(diagnostic => diagnostic.category === ts.DiagnosticCategory.Error) ?? []
+  if (errors.length) throw new Error(errors.map(error => ts.flattenDiagnosticMessageText(error.messageText, "\n")).join("\n"))
+  return result.outputText
+}
+
+function resolveSourceImport(importer, specifier, sourceFiles) {
+  const base = resolve(dirname(importer), specifier)
+  const extension = extname(base)
+  const stem = /\.(?:js|jsx|ts|tsx)$/.test(extension) ? base.slice(0, -extension.length) : base
+  const candidates = extension === ".ts" || extension === ".tsx"
+    ? [base]
+    : [`${stem}.ts`, `${stem}.tsx`]
+  const matches = candidates.filter(candidate => sourceFiles.has(candidate))
+  if (matches.length !== 1) throw new Error(`${relative(root, importer)} Relative import ${JSON.stringify(specifier)} must resolve to one TypeScript file in src/`)
+  return matches[0]
+}
+
+function runtimeModuleReference(node) {
+  if (ts.isExportDeclaration(node)) return !node.isTypeOnly && (!node.exportClause || !ts.isNamedExports(node.exportClause) || node.exportClause.elements.some(entry => !entry.isTypeOnly))
+  const clause = node.importClause
+  if (!clause) return true
+  if (clause.isTypeOnly) return false
+  if (clause.name || clause.namedBindings && ts.isNamespaceImport(clause.namedBindings)) return true
+  return clause.namedBindings?.elements.some(entry => !entry.isTypeOnly) ?? false
+}
+
+function rejectUnsupportedClientImports(sourceFile, file) {
+  const visit = node => {
+    if (ts.isCallExpression(node) && node.expression.kind === ts.SyntaxKind.ImportKeyword) throw new Error(`${relative(root, file)} Dynamic imports are not supported in imported client helpers`)
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "require") throw new Error(`${relative(root, file)} require() is not supported in imported client helpers`)
+    ts.forEachChild(node, visit)
+  }
+  visit(sourceFile)
+}
+
+function parseSourceFile(file, source) {
+  return ts.createSourceFile(file, source, ts.ScriptTarget.ES2022, true, file.endsWith(".tsx") ? ts.ScriptKind.TSX : ts.ScriptKind.TS)
+}
+
+function clientModulePath(file) {
+  return `modules/${relative(sourceDirectory, file).replaceAll(sep, "/").replace(/\.(?:ts|tsx)$/, ".js")}`
+}
+
+function relativeModulePath(from, to) {
+  const path = relative(dirname(from), to).replaceAll(sep, "/")
+  return path.startsWith(".") ? path : `./${path}`
+}
+
 function printNativeHandler({ exportName, expression, captures, setters }) {
   const factory = ts.factory
   const stateNames = new Set(setters.values())
@@ -1102,9 +1317,59 @@ function compiledPath(file) {
   return join(workDirectory, relative(sourceDirectory, file)).replace(/\.(?:ts|tsx)$/, ".mjs")
 }
 
-function routeFromPage(file) {
+async function loadConfig() {
+  for (const name of ["kudzu.config.mjs", "kudzu.config.js"]) {
+    const file = join(root, name)
+    if (!(await exists(file))) continue
+    const config = (await import(`${pathToFileURL(file).href}?v=${Date.now()}-${randomUUID()}`)).default ?? {}
+    if (!isPlainRecord(config)) throw new Error(`${name} must export a default object`)
+    return config
+  }
+  return {}
+}
+
+function normalizeBase(value) {
+  if (value == null || value === "" || value === "/") return ""
+  if (typeof value !== "string" || !value.startsWith("/") || /[?#\0]/.test(value) || value.split("/").includes("..")) throw new Error("kudzu.config base must be a root-relative path")
+  return value.replace(/\/+$/, "")
+}
+
+function assetPath(base, path) {
+  return `${base}/${path}`
+}
+
+function withBase(base, path) {
+  return base ? `${base}${path}` : path
+}
+
+async function staticPathEntries(module, file) {
+  if (typeof module.getStaticPaths !== "function") return [{ params: {}, props: {} }]
+  const entries = await module.getStaticPaths()
+  if (!Array.isArray(entries)) throw new Error(`${relative(root, file)} getStaticPaths() must return an array`)
+  return entries.map((entry, index) => {
+    if (!isPlainRecord(entry)) throw new Error(`${relative(root, file)} getStaticPaths()[${index}] must be an object`)
+    const params = entry.params ?? {}
+    const props = entry.props ?? {}
+    if (!isPlainRecord(params)) throw new Error(`${relative(root, file)} getStaticPaths()[${index}].params must be an object`)
+    if (!isPlainRecord(props)) throw new Error(`${relative(root, file)} getStaticPaths()[${index}].props must be an object`)
+    return { params, props }
+  })
+}
+
+function routeFromPage(file, params = {}) {
   const page = relative(pagesDirectory, file).replace(/\\/g, "/").replace(/\.tsx$/, "")
-  return page === "index" ? "" : page.replace(/\/index$/, "")
+  if (page.includes("[...")) throw new Error(`Catch-all routes are not supported: ${page}`)
+  const filled = page.replace(/\[([^\]]+)\]/g, (_, name) => {
+    if (!Object.hasOwn(params, name)) throw new Error(`Missing param "${name}" for route ${page}`)
+    const value = String(params[name])
+    if (!value || value === "." || value === ".." || /[\\/\0?#]/.test(value)) throw new Error(`Invalid param "${name}" for route ${page}`)
+    return value
+  })
+  return filled === "index" ? "" : filled.replace(/\/index$/, "")
+}
+
+function isPlainRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype
 }
 
 async function walk(directory) {

package/framework/core.d.ts

@@ -26,8 +26,8 @@ export function listExpression(read: () => unknown, module: string, handler: str
 export function listItem(): unknown
 export function listConditional(kind: "and" | "ternary", read: () => unknown, truthy: () => unknown, falsy: () => unknown, module: string, handler: string): unknown
 
-export function renderPage(
-  component: (props: Record<string, never>) => unknown | Promise<unknown>,
+export function renderPage<Props = Record<string, never>>(
+  component: (props: Props) => unknown | Promise<unknown>,
   metadata?: {
     title?: string
     description?: string
@@ -44,8 +44,10 @@ export function renderPage(
     icon?: string
     appleTouchIcon?: string
     manifest?: string
-    styles?: boolean
-  }
+    styles?: boolean | string[]
+    base?: string
+  },
+  props?: Props
 ): Promise<{
   html: string
   hasBehaviors: boolean

package/framework/core.mjs

@@ -220,27 +220,27 @@ function serializeCapture(name, value, seen) {
   }
 }
 
-export async function renderPage(component, metadata = {}) {
-  renderContext = { nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], bindings: [], conditions: [], lists: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false, hasLists: false, hasListStyles: false }
+export async function renderPage(component, metadata = {}, props = {}) {
+  renderContext = { nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], bindings: [], textBindings: [], conditions: [], lists: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false, hasLists: false, hasListStyles: false }
 
   try {
-    const body = await renderNode({ type: component, props: {} })
+    const body = await renderNode({ type: component, props })
     const title = escapeHtml(metadata.title ?? "Kudzu")
     const head = renderMetadata(metadata)
     const styles = metadata.styles === false
       ? ""
-      : '<link rel="stylesheet" href="/assets/style.css">'
+      : (Array.isArray(metadata.styles) ? metadata.styles : [assetPath(metadata.base, "assets/style.css")]).map(href => `<link rel="stylesheet" href="${escapeAttribute(href)}">`).join("")
     const runtime = renderContext.hasBehaviors
-      ? '<script type="module" src="/assets/kudzu.js"></script>'
+      ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu.js")}"></script>`
       : ""
     const nativeRuntime = renderContext.hasNativeBehaviors
-      ? '<script type="module" src="/assets/kudzu-native.js"></script>'
+      ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-native.js")}"></script>`
       : ""
     const bindingRuntime = renderContext.hasBindings
-      ? '<script type="module" src="/assets/kudzu-binding.js"></script>'
+      ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-binding.js")}"></script>`
       : ""
     const listRuntime = renderContext.hasLists
-      ? '<script type="module" src="/assets/kudzu-list.js"></script>'
+      ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-list.js")}"></script>`
       : ""
     const listStates = new Set(renderContext.lists.map(list => list.state))
     const seededListStates = new Set(renderContext.lists.filter(list => list.seed && !renderContext.textStates.has(list.state) && !renderContext.conditionStates.has(list.state)).map(list => list.state))
@@ -253,9 +253,12 @@ export async function renderPage(component, metadata = {}) {
     const state = initialState.length
       ? ` data-k-state='${escapeJsonAttribute(initialState)}'`
       : ""
+    const textBindings = renderContext.textBindings.length
+      ? ` data-k-text-bindings='${escapeJsonAttribute(renderContext.textBindings)}'`
+      : ""
 
     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}</head><body${state}>${body}${runtime}${bindingRuntime}${listRuntime}${nativeRuntime}</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}${styles}</head><body${state}${textBindings}>${body}${runtime}${bindingRuntime}${listRuntime}${nativeRuntime}</body></html>`,
       hasBehaviors: renderContext.hasBehaviors,
       hasBindings: renderContext.hasBindings,
       hasLists: renderContext.hasLists,
@@ -283,9 +286,9 @@ function renderMetadata(metadata) {
   if (metadata.description) meta("description", metadata.description)
   if (metadata.themeColor) meta("theme-color", metadata.themeColor)
   if (metadata.url) tags.push(`<link rel="canonical" href="${escapeAttribute(metadata.url)}">`)
-  if (metadata.icon) tags.push(`<link rel="icon" href="${escapeAttribute(metadata.icon)}">`)
-  if (metadata.appleTouchIcon) tags.push(`<link rel="apple-touch-icon" href="${escapeAttribute(metadata.appleTouchIcon)}">`)
-  if (metadata.manifest) tags.push(`<link rel="manifest" href="${escapeAttribute(metadata.manifest)}">`)
+  if (metadata.icon) tags.push(`<link rel="icon" href="${escapeAttribute(baseUrl(metadata.base, metadata.icon))}">`)
+  if (metadata.appleTouchIcon) tags.push(`<link rel="apple-touch-icon" href="${escapeAttribute(baseUrl(metadata.base, metadata.appleTouchIcon))}">`)
+  if (metadata.manifest) tags.push(`<link rel="manifest" href="${escapeAttribute(baseUrl(metadata.base, metadata.manifest))}">`)
 
   meta("og:title", metadata.title, true)
   meta("og:description", metadata.description, true)
@@ -307,6 +310,14 @@ function renderMetadata(metadata) {
   return tags.join("")
 }
 
+function assetPath(base, path) {
+  return `${base ?? ""}/${path}`
+}
+
+function baseUrl(base, value) {
+  return value.startsWith("/") ? `${base ?? ""}${value}` : value
+}
+
 async function renderNode(node, namespace, selectValue = noSelectValue) {
   if (node == null || node === false || node === true) return ""
   if (Array.isArray(node)) {
@@ -370,7 +381,9 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     if (renderContext.conditionDepth || renderContext.listDepth) for (const stateId of reactiveStateIds(descriptor)) renderContext.conditionStates.add(stateId)
     renderContext.hasBehaviors = true
     renderContext.hasBindings = true
-    return `<span data-k-bind-text='${escapeJsonAttribute(descriptor)}'>${escapeHtml(node.value ?? "")}</span>`
+    const id = renderContext.textBindings.length
+    renderContext.textBindings.push(descriptor)
+    return `<!--k-text:${id}-->${escapeHtml(node.value ?? "")}<!--k-text-end-->`
   }
   if (node?.[listConditionalMarker]) {
     const descriptor = { kind: node.kind, module: node.module, handler: node.handler }
@@ -412,6 +425,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
   const listAttributes = []
   const listExpressionAttributes = []
   const listEvents = []
+  let rawHtml
 
   if (renderContext.listRoot) {
     const root = renderContext.listRoot
@@ -433,6 +447,14 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     if (["ref", "dangerouslysetinnerhtml"].includes(rawName.toLowerCase()) && (value?.[signalMarker] || value?.[bindingMarker])) {
       throw new Error(`Reactive ${rawName} is not supported`)
     }
+    if (rawName === "dangerouslySetInnerHTML") {
+      if (renderContext.listDepth) throw new Error("dangerouslySetInnerHTML is not supported in keyed lists")
+      if (!value || typeof value !== "object" || Array.isArray(value) || !Object.hasOwn(value, "__html")) throw new Error("dangerouslySetInnerHTML requires { __html }")
+      if (value.__html?.[signalMarker] || value.__html?.[bindingMarker]) throw new Error("Reactive dangerouslySetInnerHTML is not supported")
+      if (props.children != null) throw new Error("dangerouslySetInnerHTML cannot be used with children")
+      rawHtml = value.__html == null ? "" : String(value.__html)
+      continue
+    }
 
     if (/^on[A-Z]/.test(rawName)) {
         const event = rawName.slice(2).toLowerCase()
@@ -504,8 +526,11 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
   if (tag === "option" && selectValue !== noSelectValue && String(optionValue(props)) === (selectValue == null ? "" : String(selectValue))) attributes += " selected"
 
   const voidElements = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"])
-  if (voidElements.has(tag)) return `<${tag}${attributes}>`
-  const children = directListText ? escapeHtml(directListText.value ?? "") : await renderNode(props.children, childNamespace, childSelectValue)
+  if (voidElements.has(tag)) {
+    if (rawHtml !== undefined) throw new Error(`dangerouslySetInnerHTML cannot be used on <${tag}>`)
+    return `<${tag}${attributes}>`
+  }
+  const children = rawHtml ?? (directListText ? escapeHtml(directListText.value ?? "") : await renderNode(props.children, childNamespace, childSelectValue))
   return `<${tag}${attributes}>${children}</${tag}>`
 }
 

package/framework/list-runtime.js

@@ -7,7 +7,7 @@ const imports = new Map()
 const revisions = new WeakMap()
 const itemParts = new WeakMap()
 const conditionOwners = new WeakMap()
-const itemPartsSelector = "[data-k-list-text],[data-k-list-attrs],[data-k-list-events],[data-k-list-expression],[data-k-list-expression-attrs],[data-k-list-condition]"
+const itemPartsSelector = `[data-k-list-text],[data-k-list-attrs],[data-k-list-events],[data-k-list-expression],[data-k-list-expression-attrs]${__KUDZU_LIST_CONDITIONS__ ? ",[data-k-list-condition]" : ""}`
 
 function commitLists(id) {
   const lists = listTargets.get(id)
@@ -33,7 +33,7 @@ function mountLists(root) {
     const roots = listRoots(start, end)
     const templateRoot = start.content.firstElementChild
     const parts = listItemPartPlan(templateRoot)
-    for (const root of roots) descriptor.conditions ? listItemParts(root) : mapListItemParts(parts, root)
+    for (const root of roots) __KUDZU_LIST_CONDITIONS__ && descriptor.conditions ? listItemParts(root) : mapListItemParts(parts, root)
     if (descriptor.seed && !browserState.has(descriptor.state)) browserState.set(descriptor.state, roots.map((root, index) => seedListItem(root, descriptor, index)))
     const items = browserState.get(descriptor.state)
     const list = {
@@ -183,10 +183,12 @@ function fillListParts(root, parts, item, revision) {
       }).catch(error => console.error(error))
     }
   }
-  for (const [marker, descriptor] of parts.conditions) {
-    evaluate(descriptor, item).then(value => {
-      if (revisions.get(root) === revision && root.isConnected) updateListCondition(marker, descriptor.kind, value, item)
-    }).catch(error => console.error(error))
+  if (__KUDZU_LIST_CONDITIONS__) {
+    for (const [marker, descriptor] of parts.conditions) {
+      evaluate(descriptor, item).then(value => {
+        if (revisions.get(root) === revision && root.isConnected) updateListCondition(marker, descriptor.kind, value, item)
+      }).catch(error => console.error(error))
+    }
   }
 }
 
@@ -200,7 +202,7 @@ function listItemParts(root) {
     if (node.hasAttribute("data-k-list-events")) parts.events.push([node, node.dataset.kListEvents])
     if (node.hasAttribute("data-k-list-expression")) parts.expressions.push([node, JSON.parse(node.dataset.kListExpression)])
     if (node.hasAttribute("data-k-list-expression-attrs")) parts.expressionAttributes.push([node, JSON.parse(node.dataset.kListExpressionAttrs)])
-    if (node.hasAttribute("data-k-list-condition")) {
+    if (__KUDZU_LIST_CONDITIONS__ && node.hasAttribute("data-k-list-condition")) {
       parts.conditions.push([node, JSON.parse(node.dataset.kListCondition)])
       conditionOwners.set(node, root)
     }
@@ -220,7 +222,7 @@ function listItemPartPlan(template) {
     events: parts.events.map(([node, events]) => [indexes.get(node), events]),
     expressions: parts.expressions.map(([node, descriptor]) => [indexes.get(node), descriptor]),
     expressionAttributes: parts.expressionAttributes.map(([node, attributes]) => [indexes.get(node), attributes]),
-    conditions: parts.conditions.map(([node, descriptor]) => [indexes.get(node), descriptor])
+    conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : []
   }
 }
 
@@ -233,10 +235,10 @@ function mapListItemParts(parts, root) {
     events: parts.events.map(([index, events]) => [target[index], events]),
     expressions: parts.expressions.map(([index, descriptor]) => [target[index], descriptor]),
     expressionAttributes: parts.expressionAttributes.map(([index, attributes]) => [target[index], attributes]),
-    conditions: parts.conditions.map(([index, descriptor]) => {
+    conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([index, descriptor]) => {
       conditionOwners.set(target[index], root)
       return [target[index], descriptor]
-    })
+    }) : []
   })
 }
 

package/package.json

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