@kudzujs/core 0.5.1 → 0.5.4

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,19 +281,32 @@ const rows = items.map(item =>
 return <ul>{rows}</ul>
 ```
 
-The root may also be a same-file row component that directly returns one intrinsic element and receives the whole item through one prop:
+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:
 
 ```tsx
-function ItemRow({ item }: { item: Item }) {
-  return <li>{item.name}</li>
+function ItemRow({ name, done, onRemove }: {
+  name: string
+  done: boolean
+  onRemove: () => void
+}) {
+  const className = done ? "done" : "active"
+  return <li className={className}>
+    {name}
+    <button onClick={() => onRemove()}>Remove</button>
+  </li>
 }
 
-const rows = items.map(item => <ItemRow key={item.id} item={item} />)
+const rows = items.map(item => <ItemRow
+  key={item.id}
+  name={item.name}
+  done={item.done}
+  onRemove={() => setItems(items.filter(entry => entry.id !== item.id))}
+/>)
 ```
 
-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.
+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 same-file row component, and `key={item.<field>}`. A row component must directly destructure the whole item prop, directly return one intrinsic element, and be used only by that list. 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, locals, imported helpers, browser globals, Promise values, mutation, arbitrary calls, and prototype-sensitive properties are rejected. Nested item conditions, lists, or component tags, item spreads, 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 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>`.
 
 ## Normal JavaScript
 
@@ -357,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:
@@ -398,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.
@@ -448,7 +489,7 @@ The list starts with 1,000 keyed items, then updates every label, reverses the o
 | 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 |
 
-An intrinsic-root versus row-component A/B build produced byte-for-byte identical `dist` output: 5,175 B JS gzip and 61,731 B total. Seven interleaved clean builds measured 444 ms and 441 ms. Browser operation medians totaled 23.8 ms and 25.4 ms respectively; because the deployed HTML and JavaScript are identical, that 1.6 ms difference is measurement variance rather than component runtime overhead.
+An intrinsic-root versus projected-prop row-component A/B build produced byte-for-byte identical `dist` output: 5,175 B JS gzip and 61,731 B total. Seven interleaved clean builds measured 467 ms and 455 ms. Browser operation medians totaled 23.7 ms and 23.9 ms respectively; because the deployed HTML and JavaScript are identical, the 0.2 ms difference is measurement variance rather than component runtime overhead.
 
 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.
 

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

@@ -82,6 +82,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 +91,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 +123,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 +181,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 +203,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)
 }
 
@@ -392,9 +416,13 @@ async function compile(file, sourceFiles, base) {
 function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl, file, sourceFiles, clientImports) {
   return context => sourceFile => {
     const factory = context.factory
+    sourceFile = normalizeRenderControlFlow(sourceFile, factory, context)
+    ts.setParentRecursive(sourceFile, false)
     const importBindings = clientImportBindings(sourceFile, file, sourceFiles)
     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()
@@ -420,14 +448,21 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
           }
         }
       }
-      if (ts.isFunctionDeclaration(node) && node.name) functions.set(node.name.text, node)
+      if (ts.isFunctionDeclaration(node) && node.name) {
+        functions.set(node.name.text, node)
+        if (node.parent === sourceFile) components.set(node.name.text, { function: node, declaration: node })
+      }
       if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && (ts.isArrowFunction(node.initializer) || ts.isFunctionExpression(node.initializer))) {
         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)
@@ -438,49 +473,135 @@ 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 renderedLists = new WeakMap()
+    const rawRenderedLists = []
     const collectRenderedLists = node => {
       if (ts.isJsxExpression(node) && node.initializer === undefined && node.expression && (ts.isJsxElement(node.parent) || ts.isJsxFragment(node.parent))) {
         const parts = listLocalUses.get(node) ?? keyedListParts(node.expression, settersForNode(node, settersByFunction))
-        if (parts) {
-          if (keyedListParentTag(node) === "table") throw new Error("Keyed table rows must be wrapped in <tbody>, <thead>, or <tfoot>")
-          validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions, functions)
-          renderedLists.set(node, parts)
-        }
+        if (parts) rawRenderedLists.push({ node, parts })
       }
       ts.forEachChild(node, collectRenderedLists)
     }
     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}`)
+    }
+    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] : []
+    }))
+    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`)
+      const calls = jsxTagUses(sourceFile, name)
+      if (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)
+    }
+    const renderedLists = new WeakMap()
+    for (const { node, parts: originalParts } of rawRenderedLists) {
+      if (keyedListParentTag(node) === "table") throw new Error("Keyed table rows must be wrapped in <tbody>, <thead>, or <tfoot>")
+      const specialization = componentSpecializations.get(originalParts.root)
+      const root = specialization?.root ?? originalParts.root
+      const callback = root === originalParts.root ? originalParts.callback : factory.updateArrowFunction(
+        originalParts.callback,
+        originalParts.callback.modifiers,
+        originalParts.callback.typeParameters,
+        originalParts.callback.parameters,
+        originalParts.callback.type,
+        originalParts.callback.equalsGreaterThanToken,
+        root
+      )
+      if (callback !== originalParts.callback) {
+        ts.setParentRecursive(callback, false)
+        callback.parent = originalParts.callback.parent
+      }
+      const parts = { ...originalParts, root, callback }
+      for (const calculation of specialization?.calculations ?? []) {
+        ts.setParentRecursive(calculation, false)
+        calculation.parent = callback
+        validateListExpression(calculation, parts.item, originalParts.root, fail)
+      }
+      validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions)
+      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)
       }
@@ -504,18 +625,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)) {
@@ -546,19 +662,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)
@@ -570,7 +677,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.getText()) && !["key", "ref", "dangerouslysetinnerhtml"].includes(node.name.getText().toLowerCase())) {
         const expression = node.initializer.expression
         const setters = settersForNode(node, settersByFunction)
         const usedStates = referencedStateNames(expression, setters)
@@ -621,6 +728,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
@@ -639,35 +852,13 @@ function keyedListParts(expression, setters) {
   return { state, callback, root, item: callback.parameters[0].name.text, keyField: field }
 }
 
-function validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions, functions) {
+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}`)
   }
-  let root = parts.root
-  let item = parts.item
-  const rootTag = ts.isJsxElement(root) ? root.openingElement.tagName : root.tagName
-  if (ts.isIdentifier(rootTag) && rootTag.text[0] === rootTag.text[0].toUpperCase()) {
-    const component = functions.get(rootTag.text)
-    if (!component) fail(root, `Keyed list component ${rootTag.text} must be declared in the same file`)
-    const uses = jsxTagUses(sourceFile, rootTag.text)
-    if (uses.length !== 1 || uses[0] !== root) fail(root, `Keyed list component ${rootTag.text} may only be used as this list root`)
-    const attributes = ts.isJsxElement(root) ? root.openingElement.attributes : root.attributes
-    let itemProp
-    for (const attribute of attributes.properties) {
-      if (ts.isJsxSpreadAttribute(attribute)) {
-        if (referencesIdentifier(attribute.expression, item)) fail(attribute, "Keyed list item spreads are not supported")
-        continue
-      }
-      if (attribute.name.getText() === "key" || !attribute.initializer || !ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression || !referencesIdentifier(attribute.initializer.expression, item)) continue
-      if (!ts.isIdentifier(attribute.initializer.expression) || attribute.initializer.expression.text !== item || itemProp) fail(attribute, `Keyed list component ${rootTag.text} must receive the whole item through one direct prop`)
-      itemProp = attribute.name.getText()
-    }
-    if (ts.isJsxElement(root) && root.children.some(child => referencesIdentifier(child, item))) fail(root, `Keyed list component ${rootTag.text} must receive the whole item through one direct prop`)
-    if (!itemProp) fail(root, `Keyed list component ${rootTag.text} must receive the whole item through one direct prop`)
-    item = componentItemParameter(component, itemProp, node => fail(node, `Keyed list component ${rootTag.text} must destructure its item prop`))
-    root = componentJsxRoot(component, node => fail(node, `Keyed list component ${rootTag.text} must return one JSX element`))
-  }
+  const root = parts.root
+  const item = parts.item
   const validateElement = node => {
     const tag = ts.isJsxElement(node) ? node.openingElement.tagName : node.tagName
     if (!ts.isIdentifier(tag) || tag.text[0] !== tag.text[0].toLowerCase()) fail(node, "Keyed list items must use intrinsic JSX elements")
@@ -717,24 +908,127 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
   visit(root)
 }
 
-function componentItemParameter(component, prop, fail) {
-  if (component.parameters.length !== 1 || !ts.isObjectBindingPattern(component.parameters[0].name)) fail(component)
-  const element = component.parameters[0].name.elements.find(entry => !entry.dotDotDotToken && !entry.initializer && (entry.propertyName ?? entry.name).getText() === prop)
-  if (!element || !ts.isIdentifier(element.name)) fail(component.parameters[0])
-  return element.name.text
-}
+function specializeComponentCall(call, component, sourceFile, factory, context, fail) {
+  if (component.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.AsyncKeyword) || component.asteriskToken) fail(component, "Keyed list components must be synchronous")
+  if (component.parameters.length !== 1 || !ts.isObjectBindingPattern(component.parameters[0].name)) fail(component, "Keyed list components must use one destructured props parameter")
+  if (ts.isJsxElement(call) && call.children.some(child => !ts.isJsxText(child) || child.text.trim())) fail(call, "Keyed list component children are not supported")
+  const callAttributes = ts.isJsxElement(call) ? call.openingElement.attributes : call.attributes
+  const props = new Map()
+  let key
+  for (const attribute of callAttributes.properties) {
+    if (ts.isJsxSpreadAttribute(attribute)) fail(attribute, "Keyed list component prop spreads are not supported")
+    const name = attribute.name.getText()
+    if (props.has(name) || name === "key" && key) fail(attribute, `Duplicate keyed list component prop "${name}"`)
+    const value = !attribute.initializer
+      ? factory.createTrue()
+      : ts.isStringLiteral(attribute.initializer)
+        ? factory.createStringLiteral(attribute.initializer.text)
+        : ts.isJsxExpression(attribute.initializer) && attribute.initializer.expression
+          ? attribute.initializer.expression
+          : factory.createIdentifier("undefined")
+    if (name === "key") key = attribute
+    else props.set(name, value)
+  }
+  const substitutions = new Map()
+  const acceptedProps = new Set()
+  for (const element of component.parameters[0].name.elements) {
+    if (element.dotDotDotToken || element.initializer || !ts.isIdentifier(element.name)) fail(element, "Keyed list component props cannot use rest, defaults, or nested destructuring")
+    const prop = (element.propertyName ?? element.name).getText()
+    acceptedProps.add(prop)
+    substitutions.set(element.name.text, props.get(prop) ?? factory.createIdentifier("undefined"))
+  }
+  for (const prop of props.keys()) if (!acceptedProps.has(prop)) fail(call, `Unknown keyed list component prop "${prop}"`)
 
-function componentJsxRoot(component, fail) {
+  let returned
+  const calculations = []
   if (!ts.isBlock(component.body)) {
-    const root = unwrapExpression(component.body)
-    if (!ts.isJsxElement(root) && !ts.isJsxSelfClosingElement(root)) fail(component.body)
-    return root
+    returned = component.body
+  } else {
+    const statements = [...component.body.statements]
+    const last = statements.pop()
+    if (!last || !ts.isReturnStatement(last) || !last.expression) fail(component.body, "Keyed list component must end with one JSX return")
+    for (const statement of statements) {
+      if (!ts.isVariableStatement(statement) || (statement.declarationList.flags & ts.NodeFlags.Const) === 0 || statement.declarationList.declarations.length !== 1) fail(statement, "Keyed list component locals must be single const declarations")
+      const declaration = statement.declarationList.declarations[0]
+      if (!ts.isIdentifier(declaration.name) || !declaration.initializer) fail(declaration, "Keyed list component locals must be initialized identifiers")
+      const calculation = substituteClone(declaration.initializer, substitutions, factory, context)
+      calculations.push(calculation)
+      substitutions.set(declaration.name.text, calculation)
+    }
+    returned = last.expression
+  }
+  let root = unwrapExpression(substituteClone(returned, substitutions, factory, context))
+  if (!ts.isJsxElement(root) && !ts.isJsxSelfClosingElement(root)) fail(returned, "Keyed list component must return one JSX element")
+  const tag = jsxTagName(root)
+  if (!ts.isIdentifier(tag) || tag.text[0] !== tag.text[0].toLowerCase()) fail(returned, "Keyed list component must directly return an intrinsic JSX element")
+  const rootAttributes = ts.isJsxElement(root) ? root.openingElement.attributes : root.attributes
+  if (rootAttributes.properties.some(attribute => ts.isJsxAttribute(attribute) && attribute.name.text === "key")) fail(root, "Keyed list component intrinsic root cannot declare key")
+  if (key) root = addJsxAttribute(root, cloneAst(key, factory, context), factory)
+  ts.setParentRecursive(root, false)
+  root.parent = call.parent
+  return { root, calculations }
+}
+
+function substituteClone(root, substitutions, factory, context) {
+  const visit = (node, shadowed = new Set()) => {
+    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))
+    }
+    if (ts.isIdentifier(node) && substitutions.has(node.text) && !shadowed.has(node.text) && isReferenceIdentifier(node) && !isJsxSyntaxIdentifier(node)) {
+      return cloneAst(substitutions.get(node.text), factory, context)
+    }
+    const nextShadowed = isFunctionLike(node)
+      ? new Set([...shadowed, ...node.parameters.flatMap(parameter => bindingNames(parameter.name))])
+      : shadowed
+    const clone = factory.cloneNode(node)
+    ts.setTextRange(clone, node)
+    ts.setOriginalNode(clone, node)
+    return ts.visitEachChild(clone, child => visit(child, nextShadowed), context)
+  }
+  return visit(root)
+}
+
+function cloneAst(root, factory, context) {
+  const visit = node => {
+    const clone = factory.cloneNode(node)
+    ts.setTextRange(clone, node)
+    ts.setOriginalNode(clone, node)
+    return ts.visitEachChild(clone, visit, context)
+  }
+  return visit(root)
+}
+
+function addJsxAttribute(root, attribute, factory) {
+  if (ts.isJsxSelfClosingElement(root)) {
+    return factory.updateJsxSelfClosingElement(root, root.tagName, root.typeArguments, factory.updateJsxAttributes(root.attributes, [attribute, ...root.attributes.properties]))
   }
-  if (component.body.statements.length !== 1 || !ts.isReturnStatement(component.body.statements[0]) || !component.body.statements[0].expression) fail(component.body)
-  const statement = component.body.statements[0]
-  const root = unwrapExpression(statement.expression)
-  if (!ts.isJsxElement(root) && !ts.isJsxSelfClosingElement(root)) fail(statement)
-  return root
+  const opening = factory.updateJsxOpeningElement(root.openingElement, root.openingElement.tagName, root.openingElement.typeArguments, factory.updateJsxAttributes(root.openingElement.attributes, [attribute, ...root.openingElement.attributes.properties]))
+  return factory.updateJsxElement(root, opening, root.children, root.closingElement)
+}
+
+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
+}
+
+function isFunctionLike(node) {
+  return ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node) || ts.isArrowFunction(node) || ts.isMethodDeclaration(node)
+}
+
+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
 }
 
 function jsxTagUses(root, name) {
@@ -870,11 +1164,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) {

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.1",
+  "version": "0.5.4",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",