@kudzujs/core 0.2.0 → 0.3.0

package/README.md

@@ -6,11 +6,11 @@
 
 HTML-first TSX framework with synchronous state semantics and no virtual DOM.
 
-Brand assets, favicons, manifest icons, and the 1200×630 social preview live in [`public/`](./public).
-
 Kudzu keeps the familiar function-component, props, children, event-handler, and `useState` shape. Static components compile to HTML. Simple interactions compile to small behavior commands, while normal sync or async JavaScript handlers compile to external ESM.
 
-> Experimental `0.2.x`: the compiler API and supported TSX surface may change.
+> Experimental `0.3.x`: the compiler API and supported TSX surface may change.
+
+Documentation: [kudzujs.cloud/docs](https://kudzujs.cloud/docs)
 
 ## Install
 
@@ -54,6 +54,8 @@ Configure TypeScript:
 }
 ```
 
+Make sure application TSX files are included by this `tsconfig.json`. Files outside its `include` may fall into an editor-inferred React project and incorrectly report a missing `react/jsx-runtime` or React event-type errors.
+
 Create `src/pages/index.tsx`:
 
 ```tsx
@@ -96,6 +98,39 @@ function increaseTwice() {
 
 The handler above increments by two and patches its bound DOM once. Inspect the generated plan at `.kudzu/kudzu-plan.json`.
 
+## Reactive Attributes
+
+`className`, `disabled`, and controlled `value` accept normal state-dependent TSX expressions:
+
+```tsx
+<div className={active ? "active" : "idle"} />
+<button disabled={loading}>Save</button>
+<input value={name} onInput={event => setName(event.currentTarget.value)} />
+```
+
+Kudzu compiles derived expressions to external ESM and patches only the bound DOM attribute or property.
+
+## Conditional DOM
+
+Inline child `&&` and ternary expressions insert and remove bounded DOM ranges directly. A menu bar needs only state setters:
+
+```tsx
+function MenuBar() {
+  return <nav><a href="/docs">Docs</a></nav>
+}
+
+const [open, setOpen] = useState(false)
+
+{open
+  ? <button onClick={() => setOpen(false)}>Close menu</button>
+  : <button onClick={() => setOpen(true)}>Open menu</button>}
+{open && <MenuBar />}
+```
+
+Logical state persists across branch switches, while uncontrolled DOM state resets on remount. Both branches are materialized in inert templates at build time, so conditional rendering is not an authorization boundary and dormant branches must not contain secrets.
+
+Reactive conditional DOM currently targets the HTML namespace and is rejected inside SVG or MathML.
+
 ## Normal JavaScript
 
 Command-only setters use the smallest optimized path. Conditions, local variables, browser globals, events, and `async`/`await` compile to external ESM without `eval`, `new Function`, or inline executable code.
@@ -122,7 +157,8 @@ Primitive values, arrays, plain objects, and destructured props can be captured
 TSX
 ├─ static component      → HTML
 ├─ ordered state setter  → behavior command
-└─ normal JS handler     → route handler ESM
+├─ conditional child     → bounded DOM range
+└─ normal JS handler     → external ESM
 ```
 
 - Static pages ship no client JavaScript.
@@ -149,18 +185,19 @@ Supported:
 - Synchronous and async event handlers
 - Serializable component-local captures
 - Direct text DOM patches
+- Reactive `className`, `disabled`, and controlled `value` patches
+- Conditional child `&&` and ternary DOM patches
 
 Not implemented yet:
 
-- Reactive attributes, classes, and controlled inputs
-- Conditional DOM patches and keyed lists
+- Keyed lists and generalized JSX-valued locals
 - Server actions and request-time SSR
 - Imported client helpers and React package islands
 - HMR and framework DevTools
 
 ## Benchmarks
 
-Measurements below were produced on the same machine from production builds. They compare build artifacts, not ecosystem maturity or full application performance.
+Measurements below were produced on the same machine from production builds. Each framework received one warm-up followed by seven clean builds in rotating order; the table reports the median. Initial JavaScript includes inline scripts, root script references, and their static import graph, compressed file-by-file with gzip level 9. Total output is the raw size of every deploy artifact.
 
 ### Interactive Counter
 
@@ -168,30 +205,31 @@ Same counter with initial value `7` and increment/decrement buttons:
 
 | Framework | Initial content | Initial JS gzip | Total output | Clean build |
 |---|---:|---:|---:|---:|
-| Kudzu | Yes | **581 B** | 1.7 KB | **371 ms** |
-| Astro | Yes | 158 B | **365 B** | 953 ms |
-| Svelte CSR | No | 10.5 KB | 26.9 KB | 910 ms |
-| Qwik CSR | No | 20.6 KB | 57.8 KB | 633 ms |
-| React CSR | No | 59.2 KB | 189.0 KB | 1010 ms |
+| Kudzu | Yes | 487 B | 1.4 KB | **385 ms** |
+| Astro | Yes | **158 B** | **365 B** | 948 ms |
+| Svelte CSR | No | 10.5 KB | 26.9 KB | 885 ms |
+| Qwik CSR | No | 20.6 KB | 57.8 KB | 622 ms |
+| Vue CSR | No | 24.0 KB | 60.3 KB | 822 ms |
+| React CSR | No | 59.2 KB | 189.0 KB | 1084 ms |
 | Next.js | Yes | 182.1 KB | 652.2 KB | 3074 ms |
 
 Astro produces the smallest hand-authored counter. Kudzu's advantage in this fixture is React-shaped state code with a sub-1 KB runtime, not the smallest possible JavaScript.
 
 ### Static Journal Page
 
-Same content and CSS across every fixture; build is the median of three clean runs:
+Same content and CSS across every fixture:
 
 | Framework | Initial content | Initial JS gzip | Total output | Clean build |
 |---|---:|---:|---:|---:|
-| Kudzu | Yes | **0 B** | 3.1 KB | **383 ms** |
-| Astro | Yes | **0 B** | **3.0 KB** | 1022 ms |
-| Svelte CSR | No | 10.2 KB | 27.2 KB | 907 ms |
-| Qwik CSR | No | 20.2 KB | 59.6 KB | 619 ms |
-| Vue CSR | No | 24.2 KB | 62.3 KB | 719 ms |
-| React CSR | No | 59.8 KB | 192.3 KB | 1053 ms |
-| Next.js | Yes | 182.6 KB | 663.6 KB | 3054 ms |
-
-Benchmark snapshot collected on July 20, 2026 from equivalent production fixtures on the same machine. Qwik used a client entry and therefore did not exercise its SSR resumability advantage. Build times vary by hardware and filesystem cache.
+| Kudzu | Yes | **0 B** | 3.2 KB | **478 ms** |
+| Astro | Yes | **0 B** | **3.0 KB** | 1253 ms |
+| Svelte CSR | No | 10.2 KB | 27.2 KB | 1018 ms |
+| Qwik CSR | No | 20.2 KB | 59.6 KB | 784 ms |
+| Vue CSR | No | 24.2 KB | 62.3 KB | 960 ms |
+| React CSR | No | 59.8 KB | 192.3 KB | 1253 ms |
+| Next.js | Yes | 182.6 KB | 663.6 KB | 3880 ms |
+
+Benchmark snapshot collected on July 21, 2026 with Node 24.14.0 on an Intel i5-9500. 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. These results compare the selected one-page fixtures, not ecosystem maturity, browser interaction speed, or each framework's full rendering options. Build times vary with machine load and filesystem cache.
 
 ## Development
 

package/framework/README.md

@@ -3,10 +3,13 @@
 - `build.mjs`: TSX compilation, file routes, behavior extraction, static HTML output, and the development server.
 - `core.mjs`: server-side JSX rendering, state slots, behavior metadata, and serializable capture validation.
 - `jsx-runtime.mjs`: automatic JSX runtime used by TypeScript.
-- `runtime.js`: command-only browser runtime for direct state-to-text patches.
+- `runtime.js`: command-only runtime for direct state-to-text patches.
+- `shared-runtime.js`: command runtime with binding commit hooks, emitted only when needed.
+- `binding-runtime.js`: optional reactive attributes and conditional DOM range patches.
+- `serialization.js`: capture deserialization shared by binding and native handlers.
 - `native-runtime.js`: optional runtime for normal synchronous and asynchronous ESM handlers.
 - `*.d.ts`: public TypeScript and JSX declarations.
 
-Static routes do not receive either browser runtime. Command-only routes receive `runtime.js`; native handlers add `native-runtime.js` and generated modules under `dist/assets/handlers/`.
+Static routes receive no browser runtime. Command routes receive `runtime.js`; reactive attributes add `binding-runtime.js`; native handlers add `native-runtime.js`. Generated evaluators live under `dist/assets/handlers/`.
 
 Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime.

package/framework/binding-runtime.js

@@ -0,0 +1,209 @@
+import { browserState, mountText, registerCommitter } from "./shared-runtime.js"
+import { deserialize } from "./serialization.js"
+
+const imports = new Map()
+const bindingTargets = new Map()
+const conditionTargets = new Map()
+const mountedBindings = new WeakSet()
+const mountedConditions = new WeakSet()
+const bindingRegistrations = new WeakMap()
+const conditionRegistrations = new WeakMap()
+
+export function patchBinding(node, target, value) {
+  if (target === "disabled") {
+    node.toggleAttribute("disabled", Boolean(value))
+  } else if (target === "value") {
+    const next = value == null ? "" : String(value)
+    if (node.value !== next) node.value = next
+  } else if (value == null || value === false) {
+    node.removeAttribute("class")
+  } else {
+    node.setAttribute("class", String(value))
+  }
+}
+
+function commitBindings(id) {
+  const bindings = bindingTargets.get(id)
+  if (!bindings) return
+  for (const binding of bindings) {
+    if (!binding.node.isConnected) bindings.delete(binding)
+    else patchBinding(binding.node, binding.target, binding.read())
+  }
+}
+
+function commitConditions(id) {
+  const conditions = conditionTargets.get(id)
+  if (!conditions) return
+  for (const condition of conditions) {
+    if (!condition.start.isConnected) conditions.delete(condition)
+    else updateCondition(condition)
+  }
+}
+
+registerCommitter(commitBindings)
+registerCommitter(commitConditions)
+
+if (typeof document !== "undefined") mountDom(document)
+
+function mountDom(root) {
+  mountText(root)
+  mountBindings(root)
+  mountConditions(root)
+}
+
+function mountBindings(root) {
+  for (const target of ["class", "disabled", "value"]) {
+    for (const node of matching(root, `[data-k-bind-${target}]`)) {
+      if (mountedBindings.has(node)) continue
+      mountedBindings.add(node)
+      const descriptor = JSON.parse(node.dataset[`kBind${capitalize(target)}`])
+      if (descriptor.state) {
+        const binding = { node, target, read: () => browserState.get(descriptor.state) }
+        register(bindingTargets, descriptor.state, binding)
+        bindingRegistrations.set(node, [[descriptor.state, binding]])
+        patchBinding(node, target, binding.read())
+        continue
+      }
+      loadEvaluator(descriptor).then(evaluator => {
+        if (!node.isConnected) return
+        const binding = { node, target, read: evaluator.read }
+        const registrations = []
+        for (const id of evaluator.stateIds) {
+          register(bindingTargets, id, binding)
+          registrations.push([id, binding])
+        }
+        bindingRegistrations.set(node, registrations)
+        patchBinding(node, target, binding.read())
+      }).catch(error => console.error(error))
+    }
+  }
+}
+
+function mountConditions(root) {
+  for (const start of matching(root, "template[data-k-if]")) {
+    if (mountedConditions.has(start)) continue
+    mountedConditions.add(start)
+    const descriptor = JSON.parse(start.dataset.kIf)
+    const end = findEnd(start, descriptor.id)
+    const truthy = start.content.querySelector("template[data-k-true]")
+    const falsy = start.content.querySelector("template[data-k-false]")
+    if (!end || !truthy || !falsy) continue
+    const condition = { start, end, truthy, falsy, kind: descriptor.kind, current: conditionKey(descriptor.kind, descriptor.initial) }
+    loadEvaluator(descriptor).then(evaluator => {
+      if (!start.isConnected) return
+      condition.read = evaluator.read
+      const registrations = []
+      for (const id of evaluator.stateIds) {
+        register(conditionTargets, id, condition)
+        registrations.push([id, condition])
+      }
+      conditionRegistrations.set(start, { condition, registrations })
+      updateCondition(condition)
+    }).catch(error => console.error(error))
+  }
+}
+
+function updateCondition(condition) {
+  const value = condition.read()
+  const next = conditionKey(condition.kind, value)
+  if (next === condition.current) return
+  removeConditionRange(condition.start, condition.end)
+  const truthy = Boolean(value)
+  const falseText = condition.kind === "and" && !truthy ? renderFalsy(value) : ""
+  const fragment = falseText
+    ? textFragment(condition.end.ownerDocument, falseText)
+    : (truthy ? condition.truthy : condition.falsy).content.cloneNode(true)
+  const nodes = [...fragment.childNodes]
+  condition.end.parentNode.insertBefore(fragment, condition.end)
+  condition.current = next
+  for (const node of nodes) mountDom(node)
+}
+
+function unmountDom(root) {
+  for (const node of matching(root, "[data-k-bind-class],[data-k-bind-disabled],[data-k-bind-value]")) {
+    for (const [id, binding] of bindingRegistrations.get(node) ?? []) bindingTargets.get(id)?.delete(binding)
+    bindingRegistrations.delete(node)
+    mountedBindings.delete(node)
+  }
+  for (const start of matching(root, "template[data-k-if]")) {
+    const registration = conditionRegistrations.get(start)
+    for (const [id, condition] of registration?.registrations ?? []) conditionTargets.get(id)?.delete(condition)
+    conditionRegistrations.delete(start)
+    mountedConditions.delete(start)
+  }
+}
+
+function removeConditionRange(start, end) {
+  const range = start.ownerDocument.createRange()
+  range.setStartAfter(start)
+  range.setEndBefore(end)
+  const root = range.commonAncestorContainer
+  for (const node of matching(root, "[data-k-bind-class],[data-k-bind-disabled],[data-k-bind-value],template[data-k-if]")) {
+    if (range.comparePoint(node, 0) === 0) unmountDom(node)
+  }
+  range.deleteContents()
+}
+
+function conditionKey(kind, value) {
+  return value ? "true" : kind === "and" ? `false:${renderFalsy(value)}` : "false"
+}
+
+function renderFalsy(value) {
+  return value === false || value == null || value === true ? "" : String(value)
+}
+
+function textFragment(document, value) {
+  const fragment = document.createDocumentFragment()
+  fragment.append(document.createTextNode(value))
+  return fragment
+}
+
+function findEnd(start, id) {
+  return [...start.ownerDocument.querySelectorAll("template[data-k-if-end]")]
+    .find(node => node.dataset.kIfEnd === id)
+}
+
+function register(targets, id, entry) {
+  const entries = targets.get(id) ?? new Set()
+  entries.add(entry)
+  targets.set(id, entries)
+}
+
+async function loadEvaluator(descriptor) {
+  let modulePromise = imports.get(descriptor.module)
+  if (!modulePromise) {
+    modulePromise = import(descriptor.module)
+    imports.set(descriptor.module, modulePromise)
+  }
+  const [module, context] = await Promise.all([modulePromise, createBindingContext(descriptor)])
+  return { read: () => module[descriptor.handler](context), stateIds: bindingStateIds(descriptor) }
+}
+
+async function createBindingContext(descriptor) {
+  const scope = Object.fromEntries(Object.entries(descriptor.scope).map(([name, value]) => [name, deserialize(value)]))
+  const nested = {}
+  await Promise.all(Object.entries(descriptor.scopeBindings).map(async ([name, binding]) => {
+    const evaluator = await loadEvaluator(binding)
+    nested[name] = evaluator.read
+  }))
+  return {
+    get: name => browserState.get(descriptor.states[name]),
+    scope: name => name in descriptor.scopeStates ? browserState.get(descriptor.scopeStates[name]) : name in nested ? nested[name]() : scope[name]
+  }
+}
+
+function bindingStateIds(descriptor) {
+  return new Set([
+    ...Object.values(descriptor.states),
+    ...Object.values(descriptor.scopeStates),
+    ...Object.values(descriptor.scopeBindings).flatMap(binding => [...bindingStateIds(binding)])
+  ])
+}
+
+function matching(root, selector) {
+  return [...(root.matches?.(selector) ? [root] : []), ...(root.querySelectorAll?.(selector) ?? [])]
+}
+
+function capitalize(value) {
+  return value[0].toUpperCase() + value.slice(1)
+}

package/framework/build.mjs

@@ -30,6 +30,8 @@ export async function build({ quiet = false } = {}) {
   if (!pageFiles.length) throw new Error("No pages found in src/pages/")
 
   let behaviorCount = 0
+  let bindingCount = 0
+  let stateSeedCount = 0
   const plans = []
   const hasStyles = await exists(join(sourceDirectory, "style.css"))
 
@@ -48,14 +50,32 @@ export async function build({ quiet = false } = {}) {
     await writeFile(join(routeDirectory, "index.html"), result.html)
     plans.push({ route: `/${route}`, ...result.plan })
     if (result.hasBehaviors) behaviorCount++
+    if (result.hasBindings) bindingCount++
+    if (result.hasStateSeed) stateSeedCount++
   }
 
   const assetsDirectory = join(outputDirectory, "assets")
   await mkdir(assetsDirectory, { recursive: true })
-  if (behaviorCount) await cp(new URL("./runtime.js", import.meta.url), join(assetsDirectory, "kudzu.js"))
-  if (handlerModules.length) {
-    const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8")).replace('"./runtime.js"', '"./kudzu.js"')
-    await writeFile(join(assetsDirectory, "kudzu-native.js"), nativeRuntime)
+  const commandEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.commands).map(event => event.event)))].sort()
+  const nativeEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.native).map(event => event.event)))].sort()
+  if (behaviorCount) {
+    const runtimeFile = bindingCount ? "./shared-runtime.js" : "./runtime.js"
+    const runtime = specializeRuntime(await readFile(new URL(runtimeFile, import.meta.url), "utf8"), commandEvents, stateSeedCount > 0)
+    await writeFile(join(assetsDirectory, "kudzu.js"), runtime)
+  }
+  const hasNativeHandlers = handlerModules.some(module => module.hasNativeHandlers)
+  if (bindingCount || hasNativeHandlers) await cp(new URL("./serialization.js", import.meta.url), join(assetsDirectory, "kudzu-serialization.js"))
+  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"')
+    await writeFile(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime)
+  }
+  if (hasNativeHandlers) {
+    const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
+      .replace('"./runtime.js"', '"./kudzu.js"')
+      .replace('"./serialization.js"', '"./kudzu-serialization.js"')
+    await writeFile(join(assetsDirectory, "kudzu-native.js"), specializeEvents(nativeRuntime, nativeEvents))
   }
   for (const handlerModule of handlerModules) {
     const output = join(assetsDirectory, handlerModule.path)
@@ -69,6 +89,18 @@ export async function build({ quiet = false } = {}) {
   if (!quiet) console.log(`Built ${pageFiles.length} page(s), ${behaviorCount} interactive page(s) into dist/`)
 }
 
+function specializeEvents(source, events) {
+  return source.replace(/const eventNames = \[[^\n]+\]/, `const eventNames = ${JSON.stringify(events)}`)
+}
+
+function specializeRuntime(source, events, hasStateSeed) {
+  const specialized = specializeEvents(source, events)
+  if (hasStateSeed) return specialized
+  return specialized
+    .replace("  const initialState = document.body.dataset.kState\n", "")
+    .replace("  if (initialState) for (const [id, value] of JSON.parse(initialState)) browserState.set(id, value)\n", "")
+}
+
 export async function dev() {
   await build()
 
@@ -110,6 +142,7 @@ export async function dev() {
 async function compile(file) {
   const source = await readFile(file, "utf8")
   const nativeHandlers = []
+  const reactiveBindings = []
   const handlerPath = `handlers/${relative(sourceDirectory, file).replaceAll(sep, "/").replace(/\.(?:ts|tsx)$/, ".js")}`
   const result = ts.transpileModule(source, {
     fileName: file,
@@ -119,7 +152,7 @@ async function compile(file) {
       jsx: ts.JsxEmit.ReactJSX,
       jsxImportSource: "@kudzujs/core"
     },
-    transformers: { before: [createKudzuTransformer(nativeHandlers, `/assets/${handlerPath}`)] },
+    transformers: { before: [createKudzuTransformer(nativeHandlers, reactiveBindings, `/assets/${handlerPath}`)] },
     reportDiagnostics: true
   })
 
@@ -132,30 +165,40 @@ async function compile(file) {
   await mkdir(resolve(output, ".."), { recursive: true })
   await writeFile(output, result.outputText)
 
-  if (!nativeHandlers.length) return undefined
-  const moduleSource = nativeHandlers.map(handler => printNativeHandler(handler)).join("\n")
+  if (!nativeHandlers.length && !reactiveBindings.length) return undefined
+  const moduleSource = [
+    ...nativeHandlers.map(handler => printNativeHandler(handler)),
+    ...reactiveBindings.map(entry => printReactiveBinding(entry))
+  ].join("\n")
   const moduleResult = ts.transpileModule(moduleSource, {
     compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext },
     reportDiagnostics: true
   })
   const moduleErrors = moduleResult.diagnostics?.filter(diagnostic => diagnostic.category === ts.DiagnosticCategory.Error) ?? []
   if (moduleErrors.length) throw new Error(moduleErrors.map(error => ts.flattenDiagnosticMessageText(error.messageText, "\n")).join("\n"))
-  return { path: handlerPath, code: moduleResult.outputText }
+  return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0 }
 }
 
-function createKudzuTransformer(nativeHandlers, handlerUrl) {
+function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
   return context => sourceFile => {
     const factory = context.factory
-    const setters = new Map()
+    const settersByFunction = new Map()
     const functions = new Map()
     let usesBehavior = false
+    let usesBinding = false
+    let usesConditional = false
 
     const collect = node => {
       if (ts.isVariableDeclaration(node) && ts.isArrayBindingPattern(node.name) && node.initializer && ts.isCallExpression(node.initializer)) {
         const callName = ts.isIdentifier(node.initializer.expression) ? node.initializer.expression.text : ""
         const [stateElement, setterElement] = node.name.elements
         if (callName === "useState" && stateElement && setterElement && ts.isBindingElement(stateElement) && ts.isBindingElement(setterElement) && ts.isIdentifier(stateElement.name) && ts.isIdentifier(setterElement.name)) {
-          setters.set(setterElement.name.text, stateElement.name.text)
+          const owner = nearestFunction(node)
+          if (owner) {
+            const setters = settersByFunction.get(owner) ?? new Map()
+            setters.set(setterElement.name.text, stateElement.name.text)
+            settersByFunction.set(owner, setters)
+          }
         }
       }
       if (ts.isFunctionDeclaration(node) && node.name) functions.set(node.name.text, node)
@@ -185,7 +228,38 @@ function createKudzuTransformer(nativeHandlers, handlerUrl) {
         return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, initializer)
       }
 
+      if (ts.isJsxExpression(node) && node.initializer === undefined && node.expression && (ts.isJsxElement(node.parent) || ts.isJsxFragment(node.parent))) {
+        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)
+          }
+        }
+      }
+
+      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && ["className", "disabled", "value"].includes(node.name.getText())) {
+        const expression = node.initializer.expression
+        const setters = settersForNode(node, settersByFunction)
+        const usedStates = referencedStateNames(expression, setters)
+        const captures = captureNames(expression, expression, setters)
+        if ((usedStates.size || captures.size) && !ts.isIdentifier(expression)) {
+          usesBehavior = true
+          usesBinding = true
+          const compiled = compileReactiveBinding(expression, setters, factory, context, reactiveBindings, handlerUrl)
+          return factory.updateJsxAttribute(node, node.name, factory.createJsxExpression(undefined, compiled))
+        }
+      }
+
       if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && /^on[A-Z]/.test(node.name.getText())) {
+        const setters = settersForNode(node, settersByFunction)
         const event = compileEvent(node.initializer.expression, setters, functions, factory, nativeHandlers, handlerUrl)
         if (event) {
           usesBehavior = true
@@ -203,6 +277,9 @@ function createKudzuTransformer(nativeHandlers, handlerUrl) {
 
     const behaviorImports = [factory.createImportSpecifier(false, factory.createIdentifier("behavior"), factory.createIdentifier("__kBehavior"))]
     if (nativeHandlers.length) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("nativeBehavior"), factory.createIdentifier("__kNativeBehavior")))
+    if (usesBinding) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("binding"), factory.createIdentifier("__kBinding")))
+    if (usesConditional) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("conditional"), factory.createIdentifier("__kConditional")))
+    if (usesBinding || usesConditional) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("bindingValue"), factory.createIdentifier("__kBindingValue")))
     const behaviorImport = factory.createImportDeclaration(
       undefined,
       factory.createImportClause(false, undefined, factory.createNamedImports(behaviorImports)),
@@ -212,6 +289,70 @@ function createKudzuTransformer(nativeHandlers, handlerUrl) {
   }
 }
 
+function compileReactiveBinding(expression, setters, factory, context, reactiveBindings, handlerUrl) {
+  return factory.createCallExpression(factory.createIdentifier("__kBinding"), undefined, compileReactiveExpression(expression, setters, factory, context, reactiveBindings, handlerUrl))
+}
+
+function compileConditional(kind, expression, truthy, falsy, setters, factory, context, reactiveBindings, handlerUrl) {
+  const [initial, ...descriptor] = compileReactiveExpression(expression, setters, factory, context, reactiveBindings, handlerUrl)
+  const thunk = branch => factory.createArrowFunction(undefined, undefined, [], undefined, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), branch)
+  return factory.createCallExpression(factory.createIdentifier("__kConditional"), undefined, [factory.createStringLiteral(kind), initial, thunk(truthy), thunk(falsy), ...descriptor])
+}
+
+function compileReactiveExpression(expression, setters, factory, context, reactiveBindings, handlerUrl) {
+  const usedStates = referencedStateNames(expression, setters)
+  const captures = captureNames(expression, expression, setters)
+  const exportName = `binding${reactiveBindings.length}`
+  reactiveBindings.push({ exportName, expression, captures, states: usedStates })
+  const states = [...usedStates].map(name => factory.createArrayLiteralExpression([
+    factory.createStringLiteral(name),
+    factory.createIdentifier(name)
+  ]))
+  const scope = [...captures].map(name => factory.createArrayLiteralExpression([
+    factory.createStringLiteral(name),
+    factory.createIdentifier(name)
+  ]))
+  const stateNames = new Set(usedStates)
+  const rewriteInitial = node => {
+    if (ts.isShorthandPropertyAssignment(node) && stateNames.has(node.name.text)) {
+      return factory.createPropertyAssignment(node.name, factory.createPropertyAccessExpression(node.name, "value"))
+    }
+    if (ts.isIdentifier(node) && stateNames.has(node.text) && isReferenceIdentifier(node) && !isShadowedByParameter(node, expression)) {
+      return factory.createPropertyAccessExpression(node, "value")
+    }
+    if (ts.isShorthandPropertyAssignment(node) && captures.has(node.name.text)) {
+      return factory.createPropertyAssignment(node.name, factory.createCallExpression(factory.createIdentifier("__kBindingValue"), undefined, [node.name]))
+    }
+    if (ts.isIdentifier(node) && captures.has(node.text) && isReferenceIdentifier(node)) {
+      return factory.createCallExpression(factory.createIdentifier("__kBindingValue"), undefined, [node])
+    }
+    return ts.visitEachChild(node, rewriteInitial, context)
+  }
+  return [
+    ts.visitNode(expression, rewriteInitial),
+    factory.createStringLiteral(handlerUrl),
+    factory.createStringLiteral(exportName),
+    factory.createArrayLiteralExpression(states),
+    factory.createArrayLiteralExpression(scope)
+  ]
+}
+
+function conditionalParts(expression) {
+  const unwrap = node => ts.isParenthesizedExpression(node) ? unwrap(node.expression) : node
+  const value = unwrap(expression)
+  if (ts.isBinaryExpression(value) && value.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
+    return { kind: "and", condition: value.left, truthy: unwrap(value.right), falsy: factoryNull() }
+  }
+  if (ts.isConditionalExpression(value)) {
+    return { kind: "ternary", condition: value.condition, truthy: unwrap(value.whenTrue), falsy: unwrap(value.whenFalse) }
+  }
+  return undefined
+}
+
+function factoryNull() {
+  return ts.factory.createNull()
+}
+
 function compileEvent(expression, setters, functions, factory, nativeHandlers, handlerUrl) {
   if (ts.isIdentifier(expression)) expression = functions.get(expression.text)
   if (!expression || (!ts.isArrowFunction(expression) && !ts.isFunctionExpression(expression) && !ts.isFunctionDeclaration(expression))) return undefined
@@ -240,14 +381,18 @@ function compileEvent(expression, setters, functions, factory, nativeHandlers, h
 }
 
 function nativeStateNames(expression, setters) {
+  return referencedStateNames(expression.body, setters, expression)
+}
+
+function referencedStateNames(root, setters, scopeRoot = root) {
   const stateNames = new Set(setters.values())
   const used = new Set()
   const visit = node => {
     if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && setters.has(node.expression.text)) used.add(setters.get(node.expression.text))
-    if (ts.isIdentifier(node) && stateNames.has(node.text) && isReferenceIdentifier(node)) used.add(node.text)
+    if (ts.isIdentifier(node) && stateNames.has(node.text) && isReferenceIdentifier(node) && !isShadowedByParameter(node, scopeRoot)) used.add(node.text)
     ts.forEachChild(node, visit)
   }
-  visit(expression.body)
+  visit(root)
   return used
 }
 
@@ -267,6 +412,10 @@ const nativeGlobals = new Set([
 ])
 
 function nativeCaptureNames(expression, setters) {
+  return captureNames(expression, expression.body, setters)
+}
+
+function captureNames(declarationRoot, referenceRoot, setters) {
   const local = new Set()
   const collectDeclarations = node => {
     if (ts.isVariableDeclaration(node)) for (const name of bindingNames(node.name)) local.add(name)
@@ -274,7 +423,7 @@ function nativeCaptureNames(expression, setters) {
     if ((ts.isFunctionDeclaration(node) || ts.isClassDeclaration(node)) && node.name) local.add(node.name.text)
     ts.forEachChild(node, collectDeclarations)
   }
-  collectDeclarations(expression)
+  collectDeclarations(declarationRoot)
 
   const stateNames = new Set(setters.values())
   const captures = new Set()
@@ -285,7 +434,7 @@ function nativeCaptureNames(expression, setters) {
     }
     ts.forEachChild(node, visit)
   }
-  visit(expression.body)
+  visit(referenceRoot)
   return captures
 }
 
@@ -308,6 +457,30 @@ function isReferenceIdentifier(node) {
   return true
 }
 
+function nearestFunction(node) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (ts.isFunctionDeclaration(current) || ts.isFunctionExpression(current) || ts.isArrowFunction(current)) return current
+  }
+  return undefined
+}
+
+function isShadowedByParameter(node, scopeRoot) {
+  for (let current = node.parent; current; current = current.parent) {
+    if ((ts.isFunctionDeclaration(current) || ts.isFunctionExpression(current) || ts.isArrowFunction(current)) && current.parameters.some(parameter => bindingNames(parameter.name).includes(node.text))) return true
+    if (current === scopeRoot) break
+  }
+  return false
+}
+
+function settersForNode(node, settersByFunction) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (!ts.isFunctionDeclaration(current) && !ts.isFunctionExpression(current) && !ts.isArrowFunction(current)) continue
+    const setters = settersByFunction.get(current)
+    if (setters) return setters
+  }
+  return new Map()
+}
+
 function printNativeHandler({ exportName, expression, captures, setters }) {
   const factory = ts.factory
   const stateNames = new Set(setters.values())
@@ -320,7 +493,7 @@ function printNativeHandler({ exportName, expression, captures, setters }) {
           [factory.createStringLiteral(setters.get(node.expression.text)), ...node.arguments.map(argument => ts.visitNode(argument, visitor))]
         )
       }
-      if (ts.isIdentifier(node) && stateNames.has(node.text) && isReferenceIdentifier(node)) {
+      if (ts.isIdentifier(node) && stateNames.has(node.text) && isReferenceIdentifier(node) && !isShadowedByParameter(node, expression)) {
         return factory.createCallExpression(
           factory.createPropertyAccessExpression(factory.createIdentifier("__k"), "get"),
           undefined,
@@ -359,6 +532,54 @@ function printNativeHandler({ exportName, expression, captures, setters }) {
   }
 }
 
+function printReactiveBinding({ exportName, expression, captures, states }) {
+  const factory = ts.factory
+  const transformer = context => root => {
+    const visitor = node => {
+      if (ts.isShorthandPropertyAssignment(node) && states.has(node.name.text)) {
+        return factory.createPropertyAssignment(
+          node.name,
+          factory.createCallExpression(
+            factory.createPropertyAccessExpression(factory.createIdentifier("__k"), "get"),
+            undefined,
+            [factory.createStringLiteral(node.name.text)]
+          )
+        )
+      }
+      if (ts.isIdentifier(node) && states.has(node.text) && isReferenceIdentifier(node) && !isShadowedByParameter(node, expression)) {
+        return factory.createCallExpression(
+          factory.createPropertyAccessExpression(factory.createIdentifier("__k"), "get"),
+          undefined,
+          [factory.createStringLiteral(node.text)]
+        )
+      }
+      if (ts.isShorthandPropertyAssignment(node) && captures.has(node.name.text)) {
+        return factory.createPropertyAssignment(node.name, scopeRead(factory, node.name.text))
+      }
+      if (ts.isIdentifier(node) && captures.has(node.text) && isReferenceIdentifier(node)) {
+        return scopeRead(factory, node.text)
+      }
+      return ts.visitEachChild(node, visitor, context)
+    }
+    return ts.visitNode(root, visitor)
+  }
+  const transformed = ts.transform(expression, [transformer])
+  try {
+    const declaration = factory.createFunctionDeclaration(
+      [factory.createModifier(ts.SyntaxKind.ExportKeyword)],
+      undefined,
+      exportName,
+      undefined,
+      [factory.createParameterDeclaration(undefined, undefined, "__k")],
+      undefined,
+      factory.createBlock([factory.createReturnStatement(transformed.transformed[0])], true)
+    )
+    return ts.createPrinter().printNode(ts.EmitHint.Unspecified, declaration, expression.getSourceFile())
+  } finally {
+    transformed.dispose()
+  }
+}
+
 function scopeRead(factory, name) {
   return factory.createCallExpression(
     factory.createPropertyAccessExpression(factory.createIdentifier("__k"), "scope"),

package/framework/core.d.ts

@@ -4,6 +4,9 @@ export function useState<T>(initialValue: T): [T, StateSetter<T>]
 
 export function behavior(commands: Array<["add" | "set" | "log", unknown, unknown]>): unknown
 export function nativeBehavior(module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
+export function binding(value: unknown, module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
+export function bindingValue(value: unknown): unknown
+export function conditional(kind: "and" | "ternary", value: unknown, truthy: () => unknown, falsy: () => unknown, module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
 
 export function renderPage(
   component: (props: Record<string, never>) => unknown | Promise<unknown>,
@@ -28,6 +31,8 @@ export function renderPage(
 ): Promise<{
   html: string
   hasBehaviors: boolean
+  hasBindings: boolean
+  hasStateSeed: boolean
   plan: {
     states: Array<{ id: string; name: string; initialValue: unknown }>
     events: Array<{
@@ -35,5 +40,16 @@ export function renderPage(
       commands?: Array<[string, string, unknown]>
       native?: { module: string; handler: string; states: Record<string, string>; scope: Record<string, unknown> }
     }>
+    bindings: Array<{
+      target: "class" | "disabled" | "value"
+      state?: string
+      module?: string
+      handler?: string
+      states?: Record<string, string>
+      scope?: Record<string, unknown>
+      scopeStates?: Record<string, string>
+      scopeBindings?: Record<string, unknown>
+    }>
+    conditions: Array<Record<string, unknown>>
   }
 }>

package/framework/core.mjs

@@ -1,6 +1,8 @@
 const signalMarker = Symbol("kudzu.signal")
 const behaviorMarker = Symbol("kudzu.behavior")
 const nativeBehaviorMarker = Symbol("kudzu.nativeBehavior")
+const bindingMarker = Symbol("kudzu.binding")
+const conditionalMarker = Symbol("kudzu.conditional")
 
 let renderContext
 
@@ -51,6 +53,44 @@ export function nativeBehavior(module, handler, states, scope) {
   }
 }
 
+export function binding(value, module, handler, states, scope) {
+  return { [bindingMarker]: true, value, ...reactiveDescriptor(module, handler, states, scope) }
+}
+
+export function conditional(kind, value, truthy, falsy, module, handler, states, scope) {
+  return { [conditionalMarker]: true, kind, value, truthy, falsy, ...reactiveDescriptor(module, handler, states, scope) }
+}
+
+function reactiveDescriptor(module, handler, states, scope) {
+  const scopeStates = {}
+  const serializedScope = {}
+  const scopeBindings = {}
+  for (const [name, entry] of scope) {
+    if (entry?.[signalMarker]) scopeStates[name] = entry.id
+    else if (entry?.[bindingMarker]) scopeBindings[name] = bindingDescriptor(entry)
+    else serializedScope[name] = serializeCapture(name, entry, new Set())
+  }
+  return {
+    module,
+    handler,
+    states: Object.fromEntries(states.map(([name, signal]) => {
+      if (!signal?.[signalMarker]) throw new Error("A reactive binding must target framework state")
+      return [name, signal.id]
+    })),
+    scope: serializedScope,
+    scopeStates,
+    scopeBindings
+  }
+}
+
+export function bindingValue(value) {
+  return value?.[signalMarker] || value?.[bindingMarker] ? value.value : value
+}
+
+function bindingDescriptor(value) {
+  return { module: value.module, handler: value.handler, states: value.states, scope: value.scope, scopeStates: value.scopeStates, scopeBindings: value.scopeBindings }
+}
+
 function serializeCapture(name, value, seen) {
   if (value === null || typeof value === "string" || typeof value === "boolean") return value
   if (typeof value === "number") {
@@ -83,7 +123,7 @@ function serializeCapture(name, value, seen) {
 }
 
 export async function renderPage(component, metadata = {}) {
-  renderContext = { nextState: 0, states: {}, events: [], hasBehaviors: false, hasNativeBehaviors: false }
+  renderContext = { nextState: 0, nextCondition: 0, conditionDepth: 0, states: {}, textStates: new Set(), conditionStates: new Set(), events: [], bindings: [], conditions: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false }
 
   try {
     const body = await renderNode({ type: component, props: {} })
@@ -98,13 +138,26 @@ export async function renderPage(component, metadata = {}) {
     const nativeRuntime = renderContext.hasNativeBehaviors
       ? '<script type="module" src="/assets/kudzu-native.js"></script>'
       : ""
+    const bindingRuntime = renderContext.hasBindings
+      ? '<script type="module" src="/assets/kudzu-binding.js"></script>'
+      : ""
+    const initialState = renderContext.hasBehaviors
+      ? Object.entries(renderContext.states).filter(([id]) => !renderContext.textStates.has(id) || renderContext.conditionStates.has(id)).map(([id, entry]) => [id, entry.initialValue])
+      : []
+    const state = initialState.length
+      ? ` data-k-state='${escapeJsonAttribute(initialState)}'`
+      : ""
 
     return {
-      html: `<!doctype html>\n<html lang="${escapeAttribute(metadata.lang ?? "en")}">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<title>${title}</title>\n${head}${styles}\n</head>\n<body>\n${body}\n${runtime}\n${nativeRuntime}\n</body>\n</html>\n`,
+      html: `<!doctype html><html lang="${escapeAttribute(metadata.lang ?? "en")}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title>${head}${styles}</head><body${state}>${body}${runtime}${bindingRuntime}${nativeRuntime}</body></html>`,
       hasBehaviors: renderContext.hasBehaviors,
+      hasBindings: renderContext.hasBindings,
+      hasStateSeed: initialState.length > 0,
       plan: {
         states: Object.entries(renderContext.states).map(([id, state]) => ({ id, ...state })),
-        events: renderContext.events
+        events: renderContext.events,
+        bindings: renderContext.bindings,
+        conditions: renderContext.conditions
       }
     }
   } finally {
@@ -127,7 +180,7 @@ function renderMetadata(metadata) {
 
   meta("og:title", metadata.title, true)
   meta("og:description", metadata.description, true)
-  meta("og:type", metadata.type ?? "website", true)
+  if (metadata.type || metadata.title || metadata.description || metadata.url || metadata.image || metadata.siteName || metadata.locale) meta("og:type", metadata.type ?? "website", true)
   meta("og:url", metadata.url, true)
   meta("og:image", metadata.image, true)
   if (metadata.image) {
@@ -142,46 +195,71 @@ function renderMetadata(metadata) {
   meta("twitter:description", metadata.description)
   meta("twitter:image", metadata.twitterImage ?? metadata.image)
 
-  return tags.length ? `${tags.join("\n")}\n` : ""
+  return tags.join("")
 }
 
-async function renderNode(node) {
+async function renderNode(node, namespace) {
   if (node == null || node === false || node === true) return ""
   if (Array.isArray(node)) {
     let html = ""
-    for (const child of node) html += await renderNode(child)
+    for (const child of node) html += await renderNode(child, namespace)
     return html
   }
   if (node?.[signalMarker]) {
-    return `<span data-k-text="${node.id}" data-k-value="${escapeAttribute(JSON.stringify(node.value))}">${escapeHtml(node.value)}</span>`
+    renderContext.textStates.add(node.id)
+    if (renderContext.conditionDepth) renderContext.conditionStates.add(node.id)
+    return `<span data-k-text="${node.id}" data-k-value='${escapeJsonAttribute(node.value)}'>${escapeHtml(node.value)}</span>`
   }
   if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
     return escapeHtml(node)
   }
-  if (node instanceof Promise) return renderNode(await node)
+  if (node instanceof Promise) return renderNode(await node, namespace)
+  if (node?.[conditionalMarker]) {
+    const descriptor = bindingDescriptor(node)
+    const stateIds = reactiveStateIds(descriptor)
+    if (!stateIds.size) return renderNode(node.value ? node.truthy() : node.falsy(), namespace)
+    if (namespace) throw new Error(`Reactive conditional DOM is not supported inside ${namespace}`)
+
+    const id = `c${renderContext.nextCondition++}`
+    renderContext.conditionDepth++
+    const truthy = await renderNode(node.truthy())
+    const falsy = await renderNode(node.falsy())
+    renderContext.conditionDepth--
+    const metadata = { id, kind: node.kind, initial: node.value, ...descriptor }
+    for (const stateId of stateIds) renderContext.conditionStates.add(stateId)
+    renderContext.conditions.push(metadata)
+    renderContext.hasBehaviors = true
+    renderContext.hasBindings = true
+    const encoded = escapeJsonAttribute(metadata)
+    const current = node.value ? truthy : node.kind === "and" ? await renderNode(node.value) : falsy
+    return `<template data-k-if='${encoded}'><template data-k-true>${truthy}</template><template data-k-false>${falsy}</template></template>${current}<template data-k-if-end="${id}"></template>`
+  }
   if (!node || typeof node !== "object" || !("type" in node)) {
     throw new Error(`Cannot render ${String(node)}`)
   }
 
-  if (node.type === Symbol.for("kudzu.fragment")) return renderNode(node.props.children)
-  if (typeof node.type === "function") return renderNode(await node.type(node.props))
+  if (node.type === Symbol.for("kudzu.fragment")) return renderNode(node.props.children, namespace)
+  if (typeof node.type === "function") return renderNode(await node.type(node.props), namespace)
 
   const tag = node.type
   const props = node.props ?? {}
+  const childNamespace = tag === "svg" || tag === "math"
+    ? tag
+    : namespace === "svg" && tag === "foreignObject" ? undefined : namespace
   let attributes = ""
 
   for (const [rawName, value] of Object.entries(props)) {
-    if (rawName === "children" || rawName === "key" || value == null || value === false) continue
+    if (rawName === "children" || rawName === "key") continue
 
     if (/^on[A-Z]/.test(rawName)) {
       const event = rawName.slice(2).toLowerCase()
       if (value?.[behaviorMarker]) {
         const commands = JSON.stringify(value.commands)
-        attributes += ` data-k-on-${event}="${escapeAttribute(commands)}"`
+        attributes += ` data-k-on-${event}='${escapeJsonAttribute(value.commands)}'`
         renderContext.events.push({ event, commands: value.commands })
       } else if (value?.[nativeBehaviorMarker]) {
         const native = { module: value.module, handler: value.handler, states: value.states, scope: value.scope }
-        attributes += ` data-k-native-${event}="${escapeAttribute(JSON.stringify(native))}"`
+        attributes += ` data-k-native-${event}='${escapeJsonAttribute(native)}'`
         renderContext.events.push({ event, native })
         renderContext.hasNativeBehaviors = true
       } else {
@@ -192,6 +270,27 @@ async function renderNode(node) {
     }
 
     const name = rawName === "className" ? "class" : rawName === "htmlFor" ? "for" : rawName
+    const target = name === "class" || name === "disabled" || name === "value" ? name : undefined
+    if (target && (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
+      if (!reactive) {
+        attributes += renderAttribute(name, initialValue)
+        continue
+      }
+      const descriptor = value[signalMarker]
+        ? { state: value.id }
+        : bindingDescriptor(value)
+      attributes += renderAttribute(name, initialValue)
+      attributes += ` data-k-bind-${target}='${escapeJsonAttribute(descriptor)}'`
+      renderContext.bindings.push({ target, ...descriptor })
+      if (renderContext.conditionDepth) for (const stateId of reactiveStateIds(descriptor)) renderContext.conditionStates.add(stateId)
+      renderContext.hasBehaviors = true
+      renderContext.hasBindings = true
+      continue
+    }
+
+    if (value == null || value === false) continue
     if (value === true) {
       attributes += ` ${name}`
     } else if (name === "style" && typeof value === "object") {
@@ -204,7 +303,23 @@ async function renderNode(node) {
 
   const voidElements = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"])
   if (voidElements.has(tag)) return `<${tag}${attributes}>`
-  return `<${tag}${attributes}>${await renderNode(props.children)}</${tag}>`
+  return `<${tag}${attributes}>${await renderNode(props.children, childNamespace)}</${tag}>`
+}
+
+function reactiveStateIds(descriptor) {
+  if (descriptor.state) return new Set([descriptor.state])
+  return new Set([
+    ...Object.values(descriptor.states),
+    ...Object.values(descriptor.scopeStates),
+    ...Object.values(descriptor.scopeBindings).flatMap(entry => [...reactiveStateIds(entry)])
+  ])
+}
+
+function renderAttribute(name, value) {
+  if (name === "disabled") return value ? " disabled" : ""
+  if (name === "value") return value == null ? "" : ` value="${escapeAttribute(value)}"`
+  if (value == null || value === false) return ""
+  return ` ${name}="${escapeAttribute(value)}"`
 }
 
 function escapeHtml(value) {
@@ -219,6 +334,10 @@ function escapeAttribute(value) {
   return escapeHtml(value).replaceAll("'", "&#39;")
 }
 
+function escapeJsonAttribute(value) {
+  return JSON.stringify(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll("'", "&#39;")
+}
+
 function toKebabCase(value) {
   return value.replace(/[A-Z]/g, character => `-${character.toLowerCase()}`)
 }

package/framework/native-runtime.js

@@ -1,4 +1,5 @@
 import { browserState, commitDom } from "./runtime.js"
+import { deserialize } from "./serialization.js"
 
 export function createNativeContext(state, stateIds, commit, serializedScope = {}) {
   const changed = new Set()
@@ -35,7 +36,8 @@ export function createNativeContext(state, stateIds, commit, serializedScope = {
 if (typeof document !== "undefined") {
   const modules = new Map()
 
-  for (const eventName of ["click", "input", "change", "submit", "keydown", "keyup"]) {
+  const eventNames = ["click", "input", "change", "submit", "keydown", "keyup"]
+  for (const eventName of eventNames) {
     document.addEventListener(eventName, event => {
       const target = event.target.closest(`[data-k-native-${eventName}]`)
       if (!target) return
@@ -53,19 +55,6 @@ if (typeof document !== "undefined") {
   }
 }
 
-function deserialize(value) {
-  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 === "array") return value.value.map(deserialize)
-  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 })
-    return object
-  }
-  return value
-}
-
 function delegatedEvent(event, currentTarget) {
   return new Proxy(event, {
     get(source, property) {

package/framework/runtime.js

@@ -1,43 +1,30 @@
 export function applyCommands(state, commands, commit, log = console.log) {
-  const changed = new Set()
-
-  for (const [operation, id, operand] of commands) {
-    const current = state.get(id)
-    if (operation === "log") {
-      log(operand, current)
-      continue
+  const changed=new Set
+  for(const [operation,id,value] of commands){
+    const current=state.get(id)
+    if(operation==="log")log(value,current)
+    else {
+      state.set(id,operation==="add"?current+value:value)
+      changed.add(id)
     }
-    state.set(id, operation === "add" ? current + operand : operand)
-    changed.add(id)
   }
-
-  for (const id of changed) commit(id, state.get(id))
+  for(const id of changed)commit(id,state.get(id))
 }
 
-export const browserState = new Map()
+export const browserState=new Map
 
 export function commitDom(id, value) {
-  for (const node of document.querySelectorAll(`[data-k-text="${id}"]`)) {
-    node.textContent = value
-    node.dataset.kValue = JSON.stringify(value)
-  }
+  for(const node of document.querySelectorAll(`[data-k-text="${id}"]`))node.textContent = value
 }
 
-if (typeof document !== "undefined") {
-  for (const node of document.querySelectorAll("[data-k-text]")) {
-    browserState.set(node.dataset.kText, JSON.parse(node.dataset.kValue))
-  }
+if(typeof document!=="undefined"){
+  const initialState = document.body.dataset.kState
+  if (initialState) for (const [id, value] of JSON.parse(initialState)) browserState.set(id, value)
+  for(const node of document.querySelectorAll("[data-k-text]"))browserState.set(node.dataset.kText,JSON.parse(node.dataset.kValue))
 
-  for (const eventName of ["click", "input", "change"]) {
-    document.addEventListener(eventName, event => {
-      const target = event.target.closest(`[data-k-on-${eventName}]`)
-      if (!target) return
-      const commands = target.dataset[`kOn${capitalize(eventName)}`]
-      applyCommands(browserState, JSON.parse(commands), commitDom)
+  const eventNames = ["click", "input", "change"]
+  for(const eventName of eventNames)document.addEventListener(eventName,event=>{
+      const target=event.target.closest(`[data-k-on-${eventName}]`)
+      if(target)applyCommands(browserState,JSON.parse(target.getAttribute(`data-k-on-${eventName}`)),commitDom)
     })
-  }
-}
-
-function capitalize(value) {
-  return value[0].toUpperCase() + value.slice(1)
 }

package/framework/serialization.js

@@ -0,0 +1,12 @@
+export function deserialize(value) {
+  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 === "array") return value.value.map(deserialize)
+  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 })
+    return object
+  }
+  return value
+}

package/framework/shared-runtime.js

@@ -0,0 +1,59 @@
+export function applyCommands(state, commands, commit, log = console.log) {
+  const changed = new Set()
+
+  for (const [operation, id, operand] of commands) {
+    const current = state.get(id)
+    if (operation === "log") {
+      log(operand, current)
+      continue
+    }
+    state.set(id, operation === "add" ? current + operand : operand)
+    changed.add(id)
+  }
+
+  for (const id of changed) commit(id, state.get(id))
+}
+
+export const browserState = new Map()
+const committers = []
+
+export function registerCommitter(commit) {
+  committers.push(commit)
+}
+
+export function commitDom(id, value) {
+  for (const node of document.querySelectorAll(`[data-k-text="${id}"]`)) node.textContent = value
+  for (const commit of committers) commit(id)
+}
+
+export function mountText(root) {
+  for (const node of matching(root, "[data-k-text]")) {
+    const id = node.dataset.kText
+    if (browserState.has(id)) node.textContent = browserState.get(id)
+    else browserState.set(id, JSON.parse(node.dataset.kValue))
+  }
+}
+
+if (typeof document !== "undefined") {
+  const initialState = document.body.dataset.kState
+  if (initialState) for (const [id, value] of JSON.parse(initialState)) browserState.set(id, value)
+  mountText(document)
+
+  const eventNames = ["click", "input", "change"]
+  for (const eventName of eventNames) {
+    document.addEventListener(eventName, event => {
+      const target = event.target.closest(`[data-k-on-${eventName}]`)
+      if (!target) return
+      const commands = target.dataset[`kOn${capitalize(eventName)}`]
+      applyCommands(browserState, JSON.parse(commands), commitDom)
+    })
+  }
+}
+
+function matching(root, selector) {
+  return [...(root.matches?.(selector) ? [root] : []), ...(root.querySelectorAll?.(selector) ?? [])]
+}
+
+function capitalize(value) {
+  return value[0].toUpperCase() + value.slice(1)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudzujs/core",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",
@@ -46,7 +46,7 @@
   "scripts": {
     "build": "node ./bin/kudzu.mjs build",
     "dev": "node ./bin/kudzu.mjs dev",
-    "check": "tsc --noEmit && node ./bin/kudzu.mjs build",
+    "check": "tsc --noEmit && tsc -p test/fixtures/tsconfig.json --noEmit && node ./bin/kudzu.mjs build",
     "test": "node --test",
     "prepublishOnly": "npm run check && npm test",
     "deploy": "wrangler deploy",