@kudzujs/core 0.5.2 → 0.5.5

package/README.md

@@ -191,20 +191,22 @@ Kudzu resolves `current` when the handler reads it, so removed conditional eleme
 Create a context to pass static or reactive values through component layers without prop drilling:
 
 ```tsx
-const ThemeContext = createContext("light")
+type ThemeValue = { theme: string; setTheme: (theme: string) => void }
+const ThemeContext = createContext<ThemeValue | null>(null)
 
 function Toolbar() {
-  const theme = useContext(ThemeContext)
-  return <button className={`theme-${theme}`}>{theme}</button>
+  const value = useContext(ThemeContext)
+  if (!value) return null
+  return <button className={`theme-${value.theme}`} onClick={() => value.setTheme("light")}>{value.theme}</button>
 }
 
 function App() {
-  const [theme] = useState("dark")
-  return <ThemeContext.Provider value={theme}><Toolbar /></ThemeContext.Provider>
+  const [theme, setTheme] = useState("dark")
+  return <ThemeContext.Provider value={{ theme, setTheme }}><Toolbar /></ThemeContext.Provider>
 }
 ```
 
-The default value applies outside a Provider, nested Providers override their parent, and native handlers read the latest direct state value. Static Provider values must be serializable. Reactive Provider values must be a direct `useState` value; setters and objects containing reactive values are not supported.
+Context values may contain state, setters, arrays, nested plain objects, and static serializable fields. Consumers can read reactive properties, destructure or rename them, and call setters from normal handlers. Kudzu serializes only state and setter IDs, then materializes live browser getters and batched setters; no function source, Provider tree, component tree, or hydration is shipped. The default applies outside a Provider and nested Providers resolve to independent concrete state IDs at build time. Arbitrary functions, accessors, cycles, symbols, and non-plain objects remain rejected at the browser capture boundary.
 
 ## Conditional DOM
 
@@ -227,7 +229,7 @@ Logical state persists across branch switches, while uncontrolled DOM state rese
 
 Reactive conditional DOM currently targets the HTML namespace and is rejected inside SVG or MathML.
 
-Top-level immutable JSX locals can hold static or state-dependent branches:
+Top-level or block-scoped immutable JSX locals can hold static or state-dependent branches:
 
 ```tsx
 const menu = open ? <MenuBar /> : <p>Menu dormant</p>
@@ -236,7 +238,22 @@ const content = open && menu
 return <main>{content}</main>
 ```
 
-Kudzu compiles the local initializer to the same bounded DOM ranges as an inline condition. Reassigned, block-scoped, and keyed-list alias locals remain unsupported.
+Kudzu compiles the local initializer to the same bounded DOM ranges as an inline condition. Terminal early returns and one adjacent exhaustive `let` assignment normalize to the same representation:
+
+```tsx
+if (loading) return <Loading />
+if (failed) return <ErrorView />
+return <Content />
+
+let view
+if (open) view = <Menu />
+else view = <p>Closed</p>
+return view
+```
+
+Branches may contain only the return or assignment being normalized. Effectful statements, non-exhaustive assignments, later reassignment, loops, `switch`, and `try` remain ordinary JavaScript and state-dependent render forms are rejected rather than evaluated against signal-object truthiness. Reactive branches are still both rendered into inert templates at build time.
+
+A 1,000-component A/B build compared direct ternaries with an even mix of block locals, early returns, and exhaustive assignment. Both emitted 1,000 conditions and byte-identical runtime assets. The mixed source added 18 B gzip for three equivalent evaluator exports instead of one and built in 604 ms versus 590 ms (+2.24%).
 
 ## Keyed Lists
 
@@ -264,7 +281,7 @@ const rows = items.map(item =>
 return <ul>{rows}</ul>
 ```
 
-The root may also be a top-level same-file row component. Kudzu specializes each call at build time, so projected props, callback props, and simple local calculations compile to the same intrinsic list template:
+The root may also be a top-level row component declared in the same file or imported from a relative TypeScript module. Default, named, aliased, and named re-export imports are resolved at build time. Kudzu specializes each call, so projected props, callback props, and simple local calculations compile to the same intrinsic list template:
 
 ```tsx
 function ItemRow({ name, done, onRemove }: {
@@ -289,7 +306,7 @@ const rows = items.map(item => <ItemRow
 
 The original component remains reusable across multiple lists and ordinary JSX. No component function or component runtime is shipped to the browser. Kudzu emits initial items as static HTML, then adds, removes, updates, styles, conditional branches, and moves keyed elements directly. The map may appear directly in JSX or in one top-level immutable `const` rendered once as a JSX child. Existing keys move without remounting, preserving uncontrolled descendant state. Direct `item.<field>` reads use compact markers; derived item expressions compile to external ESM evaluators. Single-level item-local `&&` and ternary JSX conditions patch only their bounded branch and mount or unmount its handlers. Item-local handlers use direct DOM listeners and receive the latest JSON-safe item for their key, including after updates, additions, and reorders. The item remains stored once in shared list state; handler descriptors carry a placeholder that the list runtime fills when mounting or updating the keyed root.
 
-Each item must be an ordinary plain object with a unique string or finite-number key; nested data may contain only JSON-safe arrays, ordinary plain objects, and primitive values. Null-prototype objects are rejected to preserve JSON round-trip parity. The current syntax requires a local-state `.map`, one identifier callback parameter, one intrinsic JSX root or top-level same-file row component, and `key={item.<field>}`. Row components accept destructured projected props and top-level single-`const` calculations before one intrinsic return. A list alias may only be rendered once and cannot be read by other JavaScript. Derived expressions must be pure and synchronous: item reads, literals, operators, templates, approved read-only string/array methods, deterministic `Math` methods, and `String`/`Number`/`Boolean` conversion are supported. Component state, imported helpers, browser globals, Promise values, mutation, arbitrary calls, and prototype-sensitive properties are rejected. Exported or imported row components, prop spreads/defaults/rest, children, nested item conditions, lists, or component tags, refs, and `dangerouslySetInnerHTML` remain unsupported. Keyed rows must be placed inside an explicit `<tbody>`, `<thead>`, or `<tfoot>`.
+Each item must be an ordinary plain object with a unique string or finite-number key; nested data may contain only JSON-safe arrays, ordinary plain objects, and primitive values. Null-prototype objects are rejected to preserve JSON round-trip parity. The current syntax requires a local-state `.map`, one identifier callback parameter, one intrinsic JSX root or top-level local or relative-imported row component, and `key={item.<field>}`. Row components accept destructured projected props and top-level single-`const` calculations before one intrinsic return. A list alias may only be rendered once and cannot be read by other JavaScript. Derived expressions must be pure and synchronous: item reads, literals, operators, templates, approved read-only string/array methods, deterministic `Math` methods, and `String`/`Number`/`Boolean` conversion are supported. Component state, imported helpers used inside calculations, browser globals, Promise values, mutation, arbitrary calls, and prototype-sensitive properties are rejected. Package or namespace row imports, same-file exported rows, reusable aliases, prop spreads/defaults/rest, children, nested item conditions, lists, or component tags, refs, and `dangerouslySetInnerHTML` remain unsupported. Keyed rows must be placed inside an explicit `<tbody>`, `<thead>`, or `<tfoot>`.
 
 ## Normal JavaScript
 
@@ -370,7 +387,7 @@ Supported:
 - Default, nested, and reactive context providers
 - Controlled `value` and `checked` form properties
 - Conditional child `&&` and ternary DOM patches
-- Top-level immutable JSX locals
+- Top-level and block-scoped JSX locals, terminal early returns, and exhaustive JSX assignment
 - Direct keyed local-state lists
 
 Not implemented yet:
@@ -411,13 +428,24 @@ The same native counter calculation was measured inline and through one relative
 
 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.
 
+#### Context Object Cost
+
+The same native counter was measured with local state access and through `value={{ count, setCount }}`. Context uses live object properties in both derived text and handlers, so this measures the complete recursive capture and generic binding capability.
+
+| Kudzu variant | Files | Initial JS gzip | Total output | Clean build | Click |
+|---|---:|---:|---:|---:|---:|
+| Local native state | 5 | **1,890 B** | **4,064 B** | **421 ms** | **3.96 µs** |
+| Context object | 7 | 4,991 B | 11,829 B | 441 ms | 7.54 µs |
+
+Context adds 3,101 B gzip and 3.59 µs per update only on pages using nested reactive capture descriptors. It preserves immediate logical reads across repeated setter calls and batches DOM writes once per synchronous turn. Capability specialization removes the recursive state/setter branches from pages that do not use them.
+
 #### 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.
+The same object-state counter was built with the legacy span target and the current 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** |
+| Legacy span target | 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.

package/framework/binding-runtime.js

@@ -229,7 +229,7 @@ async function loadEvaluator(descriptor) {
 }
 
 async function createBindingContext(descriptor) {
-  const scope = Object.fromEntries(Object.entries(descriptor.scope).map(([name, value]) => [name, deserialize(value)]))
+  const scope = Object.fromEntries(Object.entries(descriptor.scope).map(([name, value]) => [name, deserialize(value, id => browserState.get(id))]))
   const nested = {}
   await Promise.all(Object.entries(descriptor.scopeBindings).map(async ([name, binding]) => {
     const evaluator = await loadEvaluator(binding)
@@ -245,10 +245,19 @@ function bindingStateIds(descriptor) {
   return new Set([
     ...Object.values(descriptor.states),
     ...Object.values(descriptor.scopeStates),
+    ...(globalThis.__KUDZU_CAPTURE_STATE__ ? Object.values(descriptor.scope).flatMap(serializedStateIds) : []),
     ...Object.values(descriptor.scopeBindings).flatMap(binding => [...bindingStateIds(binding)])
   ])
 }
 
+function serializedStateIds(value) {
+  if (!value || typeof value !== "object") return []
+  if (value.type === "state") return [value.id]
+  if (value.type === "array") return value.value.flatMap(serializedStateIds)
+  if (value.type === "object") return value.value.flatMap(([, entry]) => serializedStateIds(entry))
+  return []
+}
+
 function matching(root, selector) {
   return [...(root.matches?.(selector) ? [root] : []), ...(root.querySelectorAll?.(selector) ?? [])]
 }

package/framework/build.mjs

@@ -29,10 +29,11 @@ export async function build({ quiet = false, minify = true } = {}) {
   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 sourceIndex = new Map(await Promise.all(sourceFiles.map(async file => [file, await readFile(file, "utf8")])))
 
   const handlerModules = []
   for (const file of sourceFiles) {
-    const handlerModule = await compile(file, sourceFileSet, base)
+    const handlerModule = await compile(file, sourceFileSet, sourceIndex, base)
     if (handlerModule) handlerModules.push(handlerModule)
   }
 
@@ -82,6 +83,8 @@ export async function build({ quiet = false, minify = true } = {}) {
   const nativeEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.native).map(event => event.event)))].sort()
   const hasTextBindings = plans.some(plan => plan.bindings.some(binding => binding.target === "text"))
   const hasListConditions = plans.some(plan => plan.lists.some(list => list.conditions))
+  const hasNestedStateCaptures = hasNestedCaptureState(plans)
+  const hasSetterCaptures = hasCaptureType(plans, "setter")
   const nativeModules = handlerModules.filter(module => module.hasNativeHandlers).map(module => assetPath(base, `assets/${module.path}`))
   const hasNativeHandlers = nativeModules.length > 0
   if (behaviorCount) {
@@ -89,14 +92,20 @@ export async function build({ quiet = false, minify = true } = {}) {
     const runtime = specializeRuntime(await readFile(new URL(runtimeFile, import.meta.url), "utf8"), commandEvents, stateSeedCount > 0)
     await writeJavaScript(join(assetsDirectory, "kudzu.js"), runtime, minify)
   }
-  if (bindingCount || hasNativeHandlers) await writeJavaScript(join(assetsDirectory, "kudzu-serialization.js"), await readFile(new URL("./serialization.js", import.meta.url), "utf8"), minify)
+  if (bindingCount || hasNativeHandlers) await writeJavaScript(join(assetsDirectory, "kudzu-serialization.js"), await readFile(new URL("./serialization.js", import.meta.url), "utf8"), minify, {
+    "globalThis.__KUDZU_CAPTURE_STATE__": String(hasNestedStateCaptures),
+    "globalThis.__KUDZU_CAPTURE_SETTER__": String(hasSetterCaptures)
+  })
   if (bindingCount || listStyleCount) await writeJavaScript(join(assetsDirectory, "kudzu-style.js"), await readFile(new URL("./style.js", import.meta.url), "utf8"), minify)
   if (bindingCount) {
     const bindingRuntime = (await readFile(new URL("./binding-runtime.js", import.meta.url), "utf8"))
       .replace('"./shared-runtime.js"', '"./kudzu.js"')
       .replace('"./serialization.js"', '"./kudzu-serialization.js"')
       .replace('"./style.js"', '"./kudzu-style.js"')
-    await writeBundledJavaScript(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime, minify, { "globalThis.__KUDZU_TEXT_BINDINGS__": String(hasTextBindings) })
+    await writeBundledJavaScript(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime, minify, {
+      "globalThis.__KUDZU_TEXT_BINDINGS__": String(hasTextBindings),
+      "globalThis.__KUDZU_CAPTURE_STATE__": String(hasNestedStateCaptures)
+    })
   }
   if (listCount) {
     let listRuntime = (await readFile(new URL("./list-runtime.js", import.meta.url), "utf8"))
@@ -115,7 +124,9 @@ export async function build({ quiet = false, minify = true } = {}) {
     const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
       .replace('"./shared-runtime.js"', '"./kudzu.js"')
       .replace('"./serialization.js"', '"./kudzu-serialization.js"')
-    await writeJavaScript(join(assetsDirectory, "kudzu-native.js"), specializeNativeRuntime(nativeRuntime, nativeEvents, nativeModules), minify)
+    await writeJavaScript(join(assetsDirectory, "kudzu-native.js"), specializeNativeRuntime(nativeRuntime, nativeEvents, nativeModules), minify, {
+      "globalThis.__KUDZU_CAPTURE_SETTER__": String(hasSetterCaptures)
+    })
   }
   for (const handlerModule of handlerModules) {
     const output = join(assetsDirectory, handlerModule.path)
@@ -171,6 +182,20 @@ function specializeNativeRuntime(source, events, modules) {
   return `${imports}\n${specializeEvents(source, events).replace(/const modules = new Map\(\[[^\n]*\]\)/, `const modules = new Map([${entries}])`)}`
 }
 
+function hasCaptureType(value, type) {
+  if (!value || typeof value !== "object") return false
+  if (value.type === type) return true
+  return (Array.isArray(value) ? value : Object.values(value)).some(entry => hasCaptureType(entry, type))
+}
+
+function hasNestedCaptureState(value, insideCapture = false) {
+  if (!value || typeof value !== "object") return false
+  if (value.type === "state") return insideCapture
+  if (value.type === "array") return value.value.some(entry => hasNestedCaptureState(entry, true))
+  if (value.type === "object") return value.value.some(([, entry]) => hasNestedCaptureState(entry, true))
+  return (Array.isArray(value) ? value : Object.values(value)).some(entry => hasNestedCaptureState(entry, false))
+}
+
 export function specializeRuntime(source, events, hasStateSeed) {
   const specialized = specializeEvents(source, events)
   if (hasStateSeed) return specialized
@@ -179,8 +204,8 @@ export function specializeRuntime(source, events, hasStateSeed) {
     .replace(/^  if \(initialState\).*\n/m, "")
 }
 
-async function writeJavaScript(file, source, minify) {
-  const code = minify ? (await transform(source, { format: "esm", legalComments: "none", minify: true, target: "es2022" })).code : source
+async function writeJavaScript(file, source, minify, define) {
+  const code = minify || define ? (await transform(source, { define, format: "esm", legalComments: "none", minify, target: "es2022" })).code : source
   await writeFile(file, code)
 }
 
@@ -345,8 +370,8 @@ function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
 }
 
-async function compile(file, sourceFiles, base) {
-  const source = await readFile(file, "utf8")
+async function compile(file, sourceFiles, sourceIndex, base) {
+  const source = sourceIndex.get(file)
   const nativeHandlers = []
   const reactiveBindings = []
   const listExpressions = []
@@ -360,7 +385,7 @@ async function compile(file, sourceFiles, base) {
       jsx: ts.JsxEmit.ReactJSX,
       jsxImportSource: "@kudzujs/core"
     },
-    transformers: { before: [createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, assetPath(base, `assets/${handlerPath}`), file, sourceFiles, clientImports)] },
+    transformers: { before: [createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, assetPath(base, `assets/${handlerPath}`), file, sourceFiles, sourceIndex, clientImports)] },
     reportDiagnostics: true
   })
 
@@ -389,13 +414,26 @@ async function compile(file, sourceFiles, base) {
   return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0, clientImports: [...clientImports] }
 }
 
-function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl, file, sourceFiles, clientImports) {
+function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl, file, sourceFiles, sourceIndex, clientImports) {
   return context => sourceFile => {
     const factory = context.factory
+    sourceFile = normalizeRenderControlFlow(sourceFile, factory, context)
+    ts.setParentRecursive(sourceFile, false)
     const importBindings = clientImportBindings(sourceFile, file, sourceFiles)
+    const importedSources = new Map()
+    const importedSource = target => {
+      let imported = importedSources.get(target)
+      if (!imported) {
+        imported = normalizeRenderControlFlow(parseSourceFile(target, sourceIndex.get(target)), factory, context)
+        ts.setParentRecursive(imported, false)
+        importedSources.set(target, imported)
+      }
+      return imported
+    }
     const settersByFunction = new Map()
     const functions = new Map()
     const components = new Map()
+    const contexts = new Set()
     const jsxLocalDeclarations = new Map()
     const jsxLocalsByFunction = new Map()
     const listLocalDeclarations = new WeakSet()
@@ -429,10 +467,13 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
         functions.set(node.name.text, node.initializer)
         if (node.parent?.parent?.parent === sourceFile) components.set(node.name.text, { function: node.initializer, declaration: node })
       }
-      if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && isTopLevelConst(node)) {
+      if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && ts.isCallExpression(node.initializer) && ts.isIdentifier(node.initializer.expression) && node.initializer.expression.text === "createContext") contexts.add(node.name.text)
+      if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && isLocalConst(node)) {
         const owner = nearestFunction(node)
         const declarations = jsxLocalDeclarations.get(owner) ?? new Map()
-        declarations.set(node.name.text, { node, initializer: node.initializer })
+        const entries = declarations.get(node.name.text) ?? []
+        entries.push({ node, initializer: node.initializer })
+        declarations.set(node.name.text, entries)
         jsxLocalDeclarations.set(owner, declarations)
       }
       ts.forEachChild(node, collect)
@@ -443,32 +484,41 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
       let changed = true
       while (changed) {
         changed = false
-        for (const [name, { initializer }] of declarations) {
-          if (!names.has(name) && isJsxLocalValue(initializer, names)) {
+        for (const [name, entries] of declarations) {
+          if (!names.has(name) && entries.some(({ initializer }) => isJsxLocalValue(initializer, names))) {
             names.add(name)
             changed = true
           }
         }
       }
+      for (const name of names) {
+        const entries = declarations.get(name)
+        if (entries.length > 1) {
+          const position = sourceFile.getLineAndCharacterOfPosition(entries[1].node.getStart(sourceFile))
+          throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Block-scoped JSX local "${name}" must not shadow another local`)
+        }
+      }
       jsxLocalsByFunction.set(owner, names)
     }
     for (const [owner, declarations] of jsxLocalDeclarations) {
       const setters = settersByFunction.get(owner) ?? new Map()
-      for (const [name, declaration] of declarations) {
-        const parts = keyedListParts(declaration.initializer, setters)
-        if (!parts) continue
-        const uses = []
-        const collectUses = node => {
-          if (ts.isJsxExpression(node) && node.initializer === undefined && ts.isIdentifier(node.expression) && node.expression.text === name && nearestFunction(node) === owner) uses.push(node)
-          ts.forEachChild(node, collectUses)
+      for (const [name, entries] of declarations) {
+        for (const declaration of entries) {
+          const parts = keyedListParts(declaration.initializer, setters)
+          if (!parts) continue
+          const uses = []
+          const collectUses = node => {
+            if (ts.isJsxExpression(node) && node.initializer === undefined && ts.isIdentifier(node.expression) && node.expression.text === name && nearestFunction(node) === owner) uses.push(node)
+            ts.forEachChild(node, collectUses)
+          }
+          collectUses(owner.body)
+          const references = identifierReferenceCount(owner.body, name)
+          const position = sourceFile.getLineAndCharacterOfPosition(declaration.node.getStart(sourceFile))
+          if (uses.length > 1) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" must be rendered exactly once`)
+          if (references !== uses.length) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" may only be used as a JSX child`)
+          listLocalDeclarations.add(declaration.node)
+          if (uses.length) listLocalUses.set(uses[0], parts)
         }
-        collectUses(owner.body)
-        const references = identifierReferenceCount(owner.body, name)
-        const position = sourceFile.getLineAndCharacterOfPosition(declaration.node.getStart(sourceFile))
-        if (uses.length > 1) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" must be rendered exactly once`)
-        if (references !== uses.length) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" may only be used as a JSX child`)
-        listLocalDeclarations.add(declaration.node)
-        if (uses.length) listLocalUses.set(uses[0], parts)
       }
     }
     const rawRenderedLists = []
@@ -481,9 +531,18 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
     }
     collectRenderedLists(sourceFile)
     const fail = (node, message) => {
-      const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
-      throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${message}`)
+      throw sourceNodeError(node, sourceFile, message)
+    }
+    const rejectUnsupportedRenderControl = node => {
+      if (ts.isIfStatement(node) && containsRenderControl(node, jsxLocalsByFunction.get(nearestFunction(node)) ?? new Set())) {
+        const setters = settersForNode(node, settersByFunction)
+        if (referencedStateNames(node.expression, setters).size) {
+          fail(node, "Reactive render if statements must use terminal returns or exhaustive adjacent JSX assignment")
+        }
+      }
+      ts.forEachChild(node, rejectUnsupportedRenderControl)
     }
+    rejectUnsupportedRenderControl(sourceFile)
     const listComponentNames = new Set(rawRenderedLists.flatMap(({ parts }) => {
       const tag = jsxTagName(parts.root)
       return tag && ts.isIdentifier(tag) && tag.text[0] === tag.text[0].toUpperCase() ? [tag.text] : []
@@ -491,13 +550,19 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
     const componentSpecializations = new WeakMap()
     const specializedDeclarations = new WeakSet()
     for (const name of listComponentNames) {
-      const component = components.get(name)
-      if (!component) fail(sourceFile, `Keyed list component ${name} must be declared at the top level in the same file`)
-      if (isExportedDeclaration(component.declaration)) fail(component.declaration, `Keyed list component ${name} cannot be exported`)
+      let component = components.get(name)
+      const local = Boolean(component)
+      if (!component) {
+        const binding = importBindings.get(name)
+        if (!binding || binding.kind === "namespace") fail(sourceFile, `Keyed list component ${name} must be declared locally or imported from a relative TypeScript module`)
+        const imported = binding.kind === "default" ? "default" : binding.imported
+        component = { function: resolveComponentExport(binding.target, imported, importedSource, sourceFiles), declaration: undefined }
+      }
+      if (local && isExportedDeclaration(component.declaration)) fail(component.declaration, `Keyed list component ${name} cannot be exported`)
       const calls = jsxTagUses(sourceFile, name)
-      if (identifierReferenceCount(sourceFile, name) !== calls.length) fail(component.declaration, `Keyed list component ${name} may only be referenced as JSX`)
+      if (local && identifierReferenceCount(sourceFile, name) !== calls.length) fail(component.declaration, `Keyed list component ${name} may only be referenced as JSX`)
       for (const call of calls) componentSpecializations.set(call, specializeComponentCall(call, component.function, sourceFile, factory, context, fail))
-      specializedDeclarations.add(component.declaration)
+      if (local) specializedDeclarations.add(component.declaration)
     }
     const renderedLists = new WeakMap()
     for (const { node, parts: originalParts } of rawRenderedLists) {
@@ -527,16 +592,40 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
       renderedLists.set(node, parts)
     }
 
+    const compileRenderExpression = (expression, anchor) => {
+      const parts = conditionalParts(expression)
+      if (!parts) return ts.visitNode(expression, visitor)
+      const setters = settersForNode(anchor, settersByFunction)
+      const usedStates = referencedStateNames(parts.condition, setters)
+      const captures = captureNames(parts.condition, parts.condition, setters)
+      if (!usedStates.size && !captures.size) return ts.visitEachChild(expression, visitor, context)
+      usesBehavior = true
+      usesConditional = true
+      return compileConditional(
+        parts.kind,
+        parts.condition,
+        compileRenderExpression(parts.truthy, anchor),
+        compileRenderExpression(parts.falsy, anchor),
+        setters,
+        factory,
+        context,
+        reactiveBindings,
+        handlerUrl
+      )
+    }
+
     const visitor = node => {
       if (specializedDeclarations.has(node)) return node
       if (componentSpecializations.has(node)) return ts.visitNode(componentSpecializations.get(node).root, visitor)
 
       if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text.startsWith(".")) {
-        return factory.updateImportDeclaration(node, node.modifiers, node.importClause, factory.createStringLiteral(modulePath(node.moduleSpecifier.text)), node.attributes)
+        const target = resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles)
+        return factory.updateImportDeclaration(node, node.modifiers, node.importClause, factory.createStringLiteral(relativeModulePath(compiledPath(file), compiledPath(target))), node.attributes)
       }
 
       if (ts.isExportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text.startsWith(".")) {
-        return factory.updateExportDeclaration(node, node.modifiers, node.isTypeOnly, node.exportClause, factory.createStringLiteral(modulePath(node.moduleSpecifier.text)), node.attributes)
+        const target = resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles)
+        return factory.updateExportDeclaration(node, node.modifiers, node.isTypeOnly, node.exportClause, factory.createStringLiteral(relativeModulePath(compiledPath(file), compiledPath(target))), node.attributes)
       }
 
       if (ts.isVariableDeclaration(node) && ts.isArrayBindingPattern(node.name) && node.initializer && ts.isCallExpression(node.initializer) && ts.isIdentifier(node.initializer.expression) && node.initializer.expression.text === "useState" && node.initializer.arguments.length === 1) {
@@ -554,18 +643,13 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
       }
 
       if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && jsxLocalsByFunction.get(nearestFunction(node))?.has(node.name.text) && referencesIdentifier(nearestFunction(node).body, node.name.text)) {
-        const parts = conditionalParts(node.initializer)
-        if (parts) {
-          const setters = settersForNode(node, settersByFunction)
-          const usedStates = referencedStateNames(parts.condition, setters)
-          const captures = captureNames(parts.condition, parts.condition, setters)
-          if (usedStates.size || captures.size) {
-            usesBehavior = true
-            usesConditional = true
-            const compiled = compileConditional(parts.kind, parts.condition, ts.visitNode(parts.truthy, visitor), ts.visitNode(parts.falsy, visitor), setters, factory, context, reactiveBindings, handlerUrl)
-            return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, compiled)
-          }
-        }
+        const compiled = compileRenderExpression(node.initializer, node)
+        if (compiled !== node.initializer) return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, compiled)
+      }
+
+      if (ts.isReturnStatement(node) && node.expression && isJsxLocalValue(node.expression, jsxLocalsByFunction.get(nearestFunction(node)) ?? new Set())) {
+        const compiled = compileRenderExpression(node.expression, node)
+        if (compiled !== node.expression) return factory.updateReturnStatement(node, compiled)
       }
 
       if (ts.isJsxExpression(node) && node.expression && listConditions.has(node.expression)) {
@@ -596,19 +680,10 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
             ts.visitNode(listParts.callback, visitor)
           ]))
         }
-        const parts = conditionalParts(node.expression)
-        if (parts) {
-          const setters = settersForNode(node, settersByFunction)
-          const usedStates = referencedStateNames(parts.condition, setters)
-          const captures = captureNames(parts.condition, parts.condition, setters)
-          if (usedStates.size || captures.size) {
-            usesBehavior = true
-            usesConditional = true
-            const truthy = ts.visitNode(parts.truthy, visitor)
-            const falsy = ts.visitNode(parts.falsy, visitor)
-            const compiled = compileConditional(parts.kind, parts.condition, truthy, falsy, setters, factory, context, reactiveBindings, handlerUrl)
-            return factory.updateJsxExpression(node, compiled)
-          }
+        const conditional = conditionalParts(node.expression)
+        if (conditional) {
+          const compiled = compileRenderExpression(node.expression, node)
+          if (compiled !== node.expression) return factory.updateJsxExpression(node, compiled)
         }
         const setters = settersForNode(node, settersByFunction)
         const usedStates = referencedStateNames(node.expression, setters)
@@ -620,7 +695,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
         }
       }
 
-      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && !/^on/i.test(node.name.getText()) && !["key", "ref", "dangerouslysetinnerhtml"].includes(node.name.getText().toLowerCase())) {
+      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && !isContextProviderValue(node, contexts) && !/^on/i.test(node.name.text) && !["key", "ref", "dangerouslysetinnerhtml"].includes(node.name.text.toLowerCase())) {
         const expression = node.initializer.expression
         const setters = settersForNode(node, settersByFunction)
         const usedStates = referencedStateNames(expression, setters)
@@ -633,15 +708,16 @@ 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())) {
+      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && /^on[A-Z]/.test(node.name.text)) {
         const setters = settersForNode(node, settersByFunction)
         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))
         }
+        if (ts.isIdentifier(node.initializer.expression) && isDestructuredParameter(node.initializer.expression, nearestFunction(node))) return node
         const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
-        throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${node.name.getText()} must reference a function`)
+        throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${node.name.text} must reference a function`)
       }
 
       return ts.visitEachChild(node, visitor, context)
@@ -671,6 +747,112 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
   }
 }
 
+function normalizeRenderControlFlow(sourceFile, factory, context) {
+  const normalizeStatements = statements => {
+    const nested = statements.map(statement => ts.visitEachChild(statement, visitNested, context))
+    const assigned = []
+    for (let index = 0; index < nested.length; index++) {
+      const statement = nested[index]
+      const next = nested[index + 1]
+      const declaration = singleUninitializedLet(statement)
+      const assignment = declaration && next && assignmentConditional(next, declaration.name.text, factory)
+      if (declaration && assignment) {
+        const updated = factory.updateVariableDeclaration(declaration, declaration.name, declaration.exclamationToken, declaration.type, assignment)
+        const list = factory.createVariableDeclarationList([updated], ts.NodeFlags.Const)
+        assigned.push(factory.updateVariableStatement(statement, statement.modifiers, list))
+        index++
+      } else {
+        assigned.push(statement)
+      }
+    }
+
+    if (!assigned.length) return assigned
+    const finalIf = returnConditional(assigned.at(-1), factory)
+    if (finalIf) return [...assigned.slice(0, -1), factory.createReturnStatement(finalIf)]
+    if (!ts.isReturnStatement(assigned.at(-1)) || !assigned.at(-1).expression) return assigned
+    let expression = assigned.at(-1).expression
+    let start = assigned.length - 1
+    while (start > 0) {
+      const previous = assigned[start - 1]
+      if (!ts.isIfStatement(previous) || previous.elseStatement) break
+      const truthy = returnOnlyExpression(previous.thenStatement)
+      if (!truthy) break
+      expression = factory.createConditionalExpression(previous.expression, factory.createToken(ts.SyntaxKind.QuestionToken), truthy, factory.createToken(ts.SyntaxKind.ColonToken), expression)
+      start--
+    }
+    return start === assigned.length - 1 ? assigned : [...assigned.slice(0, start), factory.createReturnStatement(expression)]
+  }
+
+  const visitNested = node => {
+    if (ts.isBlock(node)) return factory.updateBlock(node, normalizeStatements([...node.statements]))
+    if (isFunctionLike(node) && ts.isBlock(node.body)) {
+      if (!isRenderFunction(node)) return node
+      const body = factory.updateBlock(node.body, normalizeStatements([...node.body.statements]))
+      if (ts.isFunctionDeclaration(node)) return factory.updateFunctionDeclaration(node, node.modifiers, node.asteriskToken, node.name, node.typeParameters, node.parameters, node.type, body)
+      if (ts.isFunctionExpression(node)) return factory.updateFunctionExpression(node, node.modifiers, node.asteriskToken, node.name, node.typeParameters, node.parameters, node.type, body)
+      if (ts.isArrowFunction(node)) return factory.updateArrowFunction(node, node.modifiers, node.typeParameters, node.parameters, node.type, node.equalsGreaterThanToken, body)
+    }
+    return ts.visitEachChild(node, visitNested, context)
+  }
+
+  return ts.visitEachChild(sourceFile, visitNested, context)
+}
+
+function isRenderFunction(node) {
+  if (ts.isFunctionDeclaration(node)) return node.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.DefaultKeyword) || Boolean(node.name && /^[A-Z]/.test(node.name.text))
+  const declaration = node.parent
+  return ts.isVariableDeclaration(declaration) && ts.isIdentifier(declaration.name) && /^[A-Z]/.test(declaration.name.text)
+}
+
+function singleUninitializedLet(statement) {
+  if (!ts.isVariableStatement(statement) || (statement.declarationList.flags & ts.NodeFlags.Let) === 0 || statement.declarationList.declarations.length !== 1) return undefined
+  const declaration = statement.declarationList.declarations[0]
+  return ts.isIdentifier(declaration.name) && !declaration.initializer ? declaration : undefined
+}
+
+function assignmentConditional(statement, name, factory) {
+  if (!ts.isIfStatement(statement) || !statement.elseStatement) return undefined
+  const truthy = assignmentOnlyExpression(statement.thenStatement, name)
+  const falsy = ts.isIfStatement(statement.elseStatement)
+    ? assignmentConditional(statement.elseStatement, name, factory)
+    : assignmentOnlyExpression(statement.elseStatement, name)
+  if (!truthy || !falsy) return undefined
+  return factory.createConditionalExpression(statement.expression, factory.createToken(ts.SyntaxKind.QuestionToken), truthy, factory.createToken(ts.SyntaxKind.ColonToken), falsy)
+}
+
+function assignmentOnlyExpression(statement, name) {
+  const candidate = ts.isBlock(statement) && statement.statements.length === 1 ? statement.statements[0] : statement
+  if (!ts.isExpressionStatement(candidate) || !ts.isBinaryExpression(candidate.expression) || candidate.expression.operatorToken.kind !== ts.SyntaxKind.EqualsToken || !ts.isIdentifier(candidate.expression.left) || candidate.expression.left.text !== name) return undefined
+  return candidate.expression.right
+}
+
+function returnConditional(statement, factory) {
+  if (!ts.isIfStatement(statement) || !statement.elseStatement) return undefined
+  const truthy = returnOnlyExpression(statement.thenStatement)
+  const falsy = ts.isIfStatement(statement.elseStatement)
+    ? returnConditional(statement.elseStatement, factory)
+    : returnOnlyExpression(statement.elseStatement)
+  if (!truthy || !falsy) return undefined
+  return factory.createConditionalExpression(statement.expression, factory.createToken(ts.SyntaxKind.QuestionToken), truthy, factory.createToken(ts.SyntaxKind.ColonToken), falsy)
+}
+
+function returnOnlyExpression(statement) {
+  const candidate = ts.isBlock(statement) && statement.statements.length === 1 ? statement.statements[0] : statement
+  return ts.isReturnStatement(candidate) && candidate.expression ? candidate.expression : undefined
+}
+
+function containsRenderControl(root, knownLocals) {
+  let found = false
+  const visit = node => {
+    if (isFunctionLike(node) && node !== root) return
+    if (ts.isReturnStatement(node) && node.expression && isJsxLocalValue(node.expression, knownLocals)) found = true
+    if (ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.EqualsToken && containsJsx(node.right)) found = true
+    if (!found) ts.forEachChild(node, visit)
+  }
+  visit(root)
+  return found
+}
+
 function keyedListParts(expression, setters) {
   const value = unwrapExpression(expression)
   if (!ts.isCallExpression(value) || value.arguments.length !== 1 || !ts.isPropertyAccessExpression(value.expression) || value.expression.name.text !== "map" || !ts.isIdentifier(value.expression.expression)) return undefined
@@ -691,8 +873,7 @@ function keyedListParts(expression, setters) {
 
 function validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions) {
   const fail = (node, message) => {
-    const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
-    throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${message}`)
+    throw sourceNodeError(node, sourceFile, message)
   }
   const root = parts.root
   const item = parts.item
@@ -706,7 +887,7 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
     if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) validateElement(node)
     if (node !== root && ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === "map" && containsJsx(node)) fail(node, "Nested keyed lists are not supported")
     if (ts.isJsxSpreadAttribute(node) && referencesIdentifier(node.expression, item)) fail(node, "Keyed list item spreads are not supported")
-    if (ts.isJsxAttribute(node) && /^on[A-Z]/.test(node.name.getText())) {
+    if (ts.isJsxAttribute(node) && /^on[A-Z]/.test(node.name.text)) {
       listEventItems.set(node, item)
       return
     }
@@ -725,9 +906,9 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
         return
       }
       const field = directProperty(expression, item)
-      const isRootKey = ts.isJsxAttribute(node.parent) && node.parent.name.getText() === "key"
+      const isRootKey = ts.isJsxAttribute(node.parent) && node.parent.name.text === "key"
       if (field && ["__proto__", "constructor", "prototype"].includes(field)) fail(node, `Keyed list item property "${field}" is not supported`)
-      if (field && ts.isJsxAttribute(node.parent) && ["ref", "dangerouslysetinnerhtml"].includes(node.parent.name.getText().toLowerCase())) fail(node, `Keyed list item ${node.parent.name.getText()} is not supported`)
+      if (field && ts.isJsxAttribute(node.parent) && ["ref", "dangerouslysetinnerhtml"].includes(node.parent.name.text.toLowerCase())) fail(node, `Keyed list item ${node.parent.name.text} is not supported`)
       if (isRootKey) return
       if (field) {
         listValues.set(node.expression, { field })
@@ -735,7 +916,7 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
       }
       if (referencesIdentifier(expression, item)) {
         validateListExpression(expression, item, node, fail)
-        if (ts.isJsxAttribute(node.parent) && ["ref", "dangerouslysetinnerhtml"].includes(node.parent.name.getText().toLowerCase())) fail(node, `Keyed list item ${node.parent.name.getText()} is not supported`)
+        if (ts.isJsxAttribute(node.parent) && ["ref", "dangerouslysetinnerhtml"].includes(node.parent.name.text.toLowerCase())) fail(node, `Keyed list item ${node.parent.name.text} is not supported`)
         listValues.set(node.expression, { item })
         return
       }
@@ -808,6 +989,7 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
 
 function substituteClone(root, substitutions, factory, context) {
   const visit = (node, shadowed = new Set()) => {
+    if (ts.isTypeNode(node)) return cloneAst(node, factory, context)
     if (ts.isShorthandPropertyAssignment(node) && substitutions.has(node.name.text) && !shadowed.has(node.name.text)) {
       return factory.createPropertyAssignment(cloneAst(node.name, factory, context), cloneAst(substitutions.get(node.name.text), factory, context))
     }
@@ -847,6 +1029,13 @@ function jsxTagName(node) {
   return ts.isJsxElement(node) ? node.openingElement.tagName : ts.isJsxSelfClosingElement(node) ? node.tagName : undefined
 }
 
+function isContextProviderValue(node, contexts) {
+  if (node.name.getText() !== "value") return false
+  const element = node.parent?.parent
+  const tag = ts.isJsxOpeningElement(element) || ts.isJsxSelfClosingElement(element) ? element.tagName : undefined
+  return ts.isPropertyAccessExpression(tag) && tag.name.text === "Provider" && ts.isIdentifier(tag.expression) && contexts.has(tag.expression.text)
+}
+
 function isJsxSyntaxIdentifier(node) {
   const parent = node.parent
   return (ts.isJsxOpeningElement(parent) || ts.isJsxClosingElement(parent) || ts.isJsxSelfClosingElement(parent)) && parent.tagName === node || ts.isJsxAttribute(parent) && parent.name === node
@@ -856,6 +1045,10 @@ function isFunctionLike(node) {
   return ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node) || ts.isArrowFunction(node) || ts.isMethodDeclaration(node)
 }
 
+function isDestructuredParameter(identifier, fn) {
+  return fn?.parameters.some(parameter => ts.isObjectBindingPattern(parameter.name) && parameter.name.elements.some(element => ts.isIdentifier(element.name) && element.name.text === identifier.text)) ?? false
+}
+
 function isExportedDeclaration(node) {
   const statement = ts.isVariableDeclaration(node) ? node.parent?.parent : node
   return statement?.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.ExportKeyword || modifier.kind === ts.SyntaxKind.DefaultKeyword) ?? false
@@ -887,6 +1080,7 @@ const assignmentOperators = new Set([
 
 function validateListExpression(expression, item, source, fail) {
   const visit = node => {
+    if (ts.isTypeNode(node)) return
     if (ts.isElementAccessExpression(node) && referencesIdentifier(node.expression, item)) {
       const key = node.argumentExpression
       if (!ts.isStringLiteral(key) && !ts.isNumericLiteral(key)) fail(source, "Derived keyed list item computed properties require a direct string or numeric literal key")
@@ -994,11 +1188,10 @@ function unwrapExpression(node) {
   return ts.isParenthesizedExpression(node) ? unwrapExpression(node.expression) : node
 }
 
-function isTopLevelConst(node) {
+function isLocalConst(node) {
   const list = node.parent
   const statement = list?.parent
-  const owner = nearestFunction(node)
-  return ts.isVariableDeclarationList(list) && (list.flags & ts.NodeFlags.Const) !== 0 && ts.isVariableStatement(statement) && statement.parent === owner?.body
+  return ts.isVariableDeclarationList(list) && (list.flags & ts.NodeFlags.Const) !== 0 && ts.isVariableStatement(statement)
 }
 
 function isJsxLocalValue(expression, known) {
@@ -1230,6 +1423,60 @@ function clientImportBindings(sourceFile, file, sourceFiles) {
   return bindings
 }
 
+function resolveComponentExport(file, exportName, getSource, sourceFiles, trail = []) {
+  const key = `${file}:${exportName}`
+  if (trail.includes(key)) throw new Error(`Imported keyed list component re-export cycle: ${[...trail, key].map(entry => relative(root, entry.slice(0, entry.lastIndexOf(":")))).join(" -> ")}`)
+  const sourceFile = getSource(file)
+  const nextTrail = [...trail, key]
+
+  for (const statement of sourceFile.statements) {
+    if (ts.isFunctionDeclaration(statement)) {
+      const isDefault = statement.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.DefaultKeyword)
+      const isExported = statement.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.ExportKeyword)
+      if (exportName === "default" && isDefault || exportName !== "default" && isExported && statement.name?.text === exportName) return statement
+    }
+    if (ts.isVariableStatement(statement) && statement.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.ExportKeyword) && exportName !== "default") {
+      const declaration = statement.declarationList.declarations.find(entry => ts.isIdentifier(entry.name) && entry.name.text === exportName)
+      if (declaration?.initializer && (ts.isArrowFunction(declaration.initializer) || ts.isFunctionExpression(declaration.initializer))) return declaration.initializer
+    }
+    if (exportName === "default" && ts.isExportAssignment(statement) && !statement.isExportEquals && ts.isIdentifier(statement.expression)) {
+      const component = localComponentDeclaration(sourceFile, statement.expression.text)
+      if (component) return component
+    }
+    if (ts.isExportDeclaration(statement) && ts.isNamedExports(statement.exportClause)) {
+      const entry = statement.exportClause.elements.find(element => !element.isTypeOnly && element.name.text === exportName)
+      if (!entry) continue
+      const imported = (entry.propertyName ?? entry.name).text
+      if (statement.moduleSpecifier && ts.isStringLiteral(statement.moduleSpecifier)) {
+        if (!statement.moduleSpecifier.text.startsWith(".")) throw sourceNodeError(statement, sourceFile, "Imported keyed list components must use relative TypeScript re-exports")
+        const target = resolveSourceImport(file, statement.moduleSpecifier.text, sourceFiles)
+        return resolveComponentExport(target, imported, getSource, sourceFiles, nextTrail)
+      }
+      const component = localComponentDeclaration(sourceFile, imported)
+      if (component) return component
+    }
+  }
+  throw new Error(`${relative(root, file)} does not export a statically analyzable keyed list component named ${JSON.stringify(exportName)}`)
+}
+
+function localComponentDeclaration(sourceFile, name) {
+  for (const statement of sourceFile.statements) {
+    if (ts.isFunctionDeclaration(statement) && statement.name?.text === name) return statement
+    if (ts.isVariableStatement(statement)) {
+      const declaration = statement.declarationList.declarations.find(entry => ts.isIdentifier(entry.name) && entry.name.text === name)
+      if (declaration?.initializer && (ts.isArrowFunction(declaration.initializer) || ts.isFunctionExpression(declaration.initializer))) return declaration.initializer
+    }
+  }
+  return undefined
+}
+
+function sourceNodeError(node, fallbackSource, message) {
+  const original = ts.getOriginalNode(node)
+  const sourceFile = original.getSourceFile?.()?.fileName ? original.getSourceFile() : fallbackSource
+  const position = sourceFile.getLineAndCharacterOfPosition(original.getStart(sourceFile))
+  return new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${message}`)
+}
+
 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)
@@ -1305,7 +1552,7 @@ function resolveSourceImport(importer, specifier, sourceFiles) {
   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`]
+    : [`${stem}.ts`, `${stem}.tsx`, join(stem, "index.ts"), join(stem, "index.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]
@@ -1498,11 +1745,6 @@ function numericExpression(factory, value, negative) {
   return negative ? factory.createPrefixUnaryExpression(ts.SyntaxKind.MinusToken, literal) : literal
 }
 
-function modulePath(value) {
-  if (/\.(?:ts|tsx|js|jsx)$/.test(value)) return value.replace(/\.(?:ts|tsx|js|jsx)$/, ".mjs")
-  return `${value}.mjs`
-}
-
 function compiledPath(file) {
   return join(workDirectory, relative(sourceDirectory, file)).replace(/\.(?:ts|tsx)$/, ".mjs")
 }

package/framework/core.mjs

@@ -1,6 +1,7 @@
 import { serializeStyle } from "./style.js"
 
 const signalMarker = Symbol("kudzu.signal")
+const setterMarker = Symbol("kudzu.setter")
 const behaviorMarker = Symbol("kudzu.behavior")
 const nativeBehaviorMarker = Symbol("kudzu.nativeBehavior")
 const bindingMarker = Symbol("kudzu.binding")
@@ -35,10 +36,12 @@ export function useState(initialValue, name) {
     }
   }
 
-  renderContext.states[id] = { name: name ?? id, initialValue }
-  return [signal, () => {
+  const setter = () => {
     throw new Error("State setters are compiled into ordered browser behaviors")
-  }]
+  }
+  Object.defineProperty(setter, setterMarker, { value: id })
+  renderContext.states[id] = { name: name ?? id, initialValue }
+  return [signal, setter]
 }
 
 export function useRef(initialValue) {
@@ -190,6 +193,8 @@ function bindingDescriptor(value) {
 function serializeCapture(name, value, seen) {
   if (value?.[listItemMarker]) return { type: "list-item" }
   if (value?.[refMarker]) return { type: "ref", id: value.id }
+  if (value?.[signalMarker]) return { type: "state", id: value.id }
+  if (typeof value === "function" && value[setterMarker]) return { type: "setter", id: value[setterMarker] }
   if (value === null || typeof value === "string" || typeof value === "boolean") return value
   if (typeof value === "number") {
     return Number.isFinite(value) && !Object.is(value, -0) ? value : { type: "number", value: String(value) }
@@ -375,7 +380,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
   }
   if (node?.[bindingMarker]) {
     const descriptor = bindingDescriptor(node)
-    const reactive = Object.keys(node.states).length > 0 || Object.keys(node.scopeStates).length > 0 || Object.keys(node.scopeBindings).length > 0
+    const reactive = reactiveStateIds(descriptor).size > 0
     if (!reactive) return renderNode(node.value, namespace, selectValue)
     renderContext.bindings.push({ target: "text", ...descriptor })
     if (renderContext.conditionDepth || renderContext.listDepth) for (const stateId of reactiveStateIds(descriptor)) renderContext.conditionStates.add(stateId)
@@ -492,14 +497,14 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     }
     if (value?.[signalMarker] || value?.[bindingMarker]) {
       const initialValue = value[signalMarker] ? value.value : value.value
-      const reactive = value[signalMarker] || Object.keys(value.states).length > 0 || Object.keys(value.scopeStates).length > 0 || Object.keys(value.scopeBindings).length > 0
+      const descriptor = value[signalMarker]
+        ? { state: value.id }
+        : bindingDescriptor(value)
+      const reactive = reactiveStateIds(descriptor).size > 0
       if (!reactive) {
         if (tag !== "select" || name !== "value") attributes += renderAttribute(name, initialValue)
         continue
       }
-      const descriptor = value[signalMarker]
-        ? { state: value.id }
-        : bindingDescriptor(value)
       if (tag !== "select" || name !== "value") attributes += renderAttribute(name, initialValue)
       if (propertyTarget) attributes += ` data-k-bind-${name}='${escapeJsonAttribute(descriptor)}'`
       else attributeBindings.push({ target: name, ...descriptor })
@@ -587,10 +592,19 @@ function reactiveStateIds(descriptor) {
   return new Set([
     ...Object.values(descriptor.states),
     ...Object.values(descriptor.scopeStates),
+    ...Object.values(descriptor.scope).flatMap(serializedStateIds),
     ...Object.values(descriptor.scopeBindings).flatMap(entry => [...reactiveStateIds(entry)])
   ])
 }
 
+function serializedStateIds(value) {
+  if (!value || typeof value !== "object") return []
+  if (value.type === "state") return [value.id]
+  if (value.type === "array") return value.value.flatMap(serializedStateIds)
+  if (value.type === "object") return value.value.flatMap(([, entry]) => serializedStateIds(entry))
+  return []
+}
+
 function renderAttribute(name, value) {
   if (name === "style") {
     const style = serializeStyle(value)

package/framework/native-runtime.js

@@ -6,7 +6,6 @@ const registrations = new WeakMap()
 export function createNativeContext(state, stateIds, commit, serializedScope = {}) {
   const changed = new Set()
   let scheduled = false
-  const scope = Object.fromEntries(Object.entries(serializedScope).map(([name, value]) => [name, deserialize(value)]))
 
   const flush = () => {
     scheduled = false
@@ -15,6 +14,18 @@ export function createNativeContext(state, stateIds, commit, serializedScope = {
     for (const id of ids) commit(id, state.get(id))
   }
 
+  const setId = globalThis.__KUDZU_CAPTURE_SETTER__ ? (id, value) => {
+    const current = state.get(id)
+    state.set(id, typeof value === "function" ? value(current) : value)
+    changed.add(id)
+    if (!scheduled) {
+      scheduled = true
+      queueMicrotask(flush)
+    }
+  } : undefined
+
+  const scope = Object.fromEntries(Object.entries(serializedScope).map(([name, value]) => [name, deserialize(value, id => state.get(id), globalThis.__KUDZU_CAPTURE_SETTER__ ? setId : undefined)]))
+
   return {
     get(name) {
       return state.get(stateIds[name])
@@ -23,6 +34,10 @@ export function createNativeContext(state, stateIds, commit, serializedScope = {
       return serializedScope[name]?.type === "state" ? state.get(serializedScope[name].id) : scope[name]
     },
     set(name, value) {
+      if (globalThis.__KUDZU_CAPTURE_SETTER__) {
+        setId(stateIds[name], value)
+        return
+      }
       const id = stateIds[name]
       const current = state.get(id)
       state.set(id, typeof value === "function" ? value(current) : value)

package/framework/serialization.js

@@ -1,13 +1,29 @@
-export function deserialize(value) {
+export function deserialize(value, getState, setState) {
   if (!value || typeof value !== "object") return value
   if (value.type === "undefined") return undefined
   if (value.type === "number") return value.value === "NaN" ? NaN : value.value === "Infinity" ? Infinity : value.value === "-Infinity" ? -Infinity : -0
   if (value.type === "ref") return { get current() { return typeof document === "undefined" ? null : document.querySelector(`[data-k-ref="${value.id}"]`) } }
-  if (value.type === "array") return value.value.map(deserialize)
+  if (globalThis.__KUDZU_CAPTURE_STATE__ && value.type === "state") return getState?.(value.id)
+  if (globalThis.__KUDZU_CAPTURE_SETTER__ && value.type === "setter") return next => {
+    if (!setState) throw new Error("Captured state setter is not available in this context")
+    setState(value.id, next)
+  }
+  if (value.type === "array") {
+    const array = []
+    for (const [index, entry] of value.value.entries()) defineCapture(array, String(index), entry, getState, setState)
+    return array
+  }
   if (value.type === "object") {
     const object = value.nullPrototype ? Object.create(null) : {}
-    for (const [key, entry] of value.value) Object.defineProperty(object, key, { value: deserialize(entry), enumerable: true, writable: true, configurable: true })
+    for (const [key, entry] of value.value) defineCapture(object, key, entry, getState, setState)
     return object
   }
   return value
 }
+
+function defineCapture(target, key, entry, getState, setState) {
+  const descriptor = globalThis.__KUDZU_CAPTURE_STATE__ && entry?.type === "state" && getState
+    ? { get: () => getState(entry.id) }
+    : { value: deserialize(entry, getState, setState), writable: true }
+  Object.defineProperty(target, key, { ...descriptor, enumerable: true, configurable: true })
+}

package/package.json

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