@kudzujs/core 0.6.16 → 0.6.18

package/README.md

@@ -190,7 +190,7 @@ function Controls({ dispatch }: { dispatch: Dispatch<TodoAction> }) {
 return <Controls dispatch={dispatch} />
 ```
 
-Kudzu specializes that call at build time; no function prop or child component survives in the browser. The direct child may also be a keyed row such as `todos.map(todo => <Item key={todo.id} todo={todo} dispatch={dispatch} />)`. Its inline or simple `const` event handler receives the latest keyed item, while relative TypeScript constants and helpers used inside the handler are renamed for call-site safety and bundled into the parent handler graph. Lazy initializers, package, namespace, local, async, and generator reducers, package imports or child imports used outside event handlers, further dispatch forwarding, reducer-dispatch keyed-row effects or local state, and reducer dispatch through context remain unsupported.
+Kudzu specializes that call at build time; no function prop or child component survives in the browser. Reducers follow React's pure reducer contract. The direct child may also be a keyed row such as `todos.map(todo => <Item key={todo.id} todo={todo} dispatch={dispatch} />)`. Its inline or simple `const` event handler receives the latest keyed item. That row may declare one top-level `useState` with a primitive literal initial value; the existing list key owns its state across item updates and reorder, and removal releases it so a later re-add starts from the initializer. Reactive attributes and conditional DOM use the existing binding capability. Relative TypeScript constants and helpers used inside the handler are renamed for call-site safety and bundled into the parent handler graph. Lazy state or reducer initializers, multiple or non-keyed specialized local states, package, namespace, local, async, and generator reducers, package imports or child imports used outside event handlers, further dispatch forwarding, reducer-dispatch keyed-row effects, and reducer dispatch through context remain unsupported.
 
 That specialized component may pass one inline or simple `const` callback containing dispatch to one relative-imported synchronous child with an intrinsic root:
 
@@ -737,7 +737,21 @@ Each keyed row owns one effect depending on `item.name`. The measured actions re
 
 This is a post-initialization runtime microbenchmark, not an architecture-equivalent loading comparison. Kudzu and Astro emit all 1,000 rows in HTML while React, Vue, and Svelte use empty CSR shells, so their JavaScript, output, and build columns are observations rather than framework-size or startup claims. Once every target has 1,000 rows and effects ready, targeted changed-root notification reduces Kudzu's selected update from 6.2 to 3.4 ms, versus Vue at 4.7 ms, Svelte at 5.2 ms, and React at 12.3 ms. It adds 126 B gzip to Kudzu's initial graph. List reconciliation remains O(n), which dominates unrelated-field updates; Vue measures 2.3 ms there versus Kudzu's 2.9 ms. Astro is the hand-written direct-DOM lower bound.
 
-The general benchmark snapshot was collected on July 22, 2026 and the keyed-effect comparison on July 27, 2026 with Node 24.14.0 on an Intel i5-9500. These results compare the selected one-page fixtures, not ecosystem maturity, browser interaction speed beyond the listed operations, or each framework's full rendering options. Build times vary with machine load and filesystem cache.
+### 1,000-item Keyed Row State
+
+Row 500 enters local edit state, the list reverses while preserving that row and its input DOM identity, then the row is removed and the same key is re-added with fresh non-editing state. Every target passed seven fresh-profile correctness runs; timings start at click and stop only after row order, unique IDs, labels, local state, and DOM identity match.
+
+| Framework | Initial rows | Initial JS gzip | Total output | Build | Edit | Reverse | Remove | Re-add |
+|---|---:|---:|---:|---:|---:|---:|---:|---:|
+| Astro native | Yes | **373 B** | **83.7 KB** | 926 ms | **1.6 ms** | **5.9 ms** | **1.2 ms** | **1.4 ms** |
+| Kudzu | Yes | 8.5 KB | 570.7 KB | **449 ms** | 2.7 ms | 10.1 ms | 3.0 ms | 3.1 ms |
+| Vue CSR | No | 24.4 KB | 61.6 KB | 820 ms | 2.8 ms | 11.7 ms | 4.0 ms | 4.2 ms |
+| Svelte CSR | No | 13.1 KB | 33.8 KB | 918 ms | 2.6 ms | 47.9 ms | 4.5 ms | 5.4 ms |
+| React CSR | No | 59.4 KB | 189.5 KB | 1,074 ms | 5.9 ms | 26.4 ms | 9.0 ms | 6.5 ms |
+
+Kudzu builds fastest and beats React, Vue, and Svelte on all four operations. Pure reducer identity fast paths skip unchanged-item validation for reorder, one removal, and append while preserving direct keyed DOM identity. Astro remains the hand-written native lower bound. Kudzu's 570.7 KB output includes complete initial HTML plus per-row direct-patch descriptors; React, Vue, and Svelte ship CSR shells, so deploy size and loading architecture are not equivalent comparisons.
+
+The general benchmark snapshot was collected on July 22, 2026, the keyed-effect comparison on July 27, and keyed-row-state on July 28 with Node 24.14.0 on an Intel i5-9500. These results compare the selected one-page fixtures, not ecosystem maturity, browser interaction speed beyond the listed operations, or each framework's full rendering options. Build times vary with machine load and filesystem cache.
 
 ## Development
 

package/framework/README.md

@@ -25,7 +25,7 @@ Inline SVG rendering normalizes an explicit set of common React presentation ali
 
 Same-file and relative-imported components receiving a direct local-state array prop are specialized to intrinsic JSX before keyed-list analysis, so their component function is not retained in the browser. Handler modules are emitted only when a rendered descriptor references them, preventing specialized imported components from adding dead browser assets. Direct JSON-safe primitive keyed-item dependencies subscribe each row record to its owning list commit and compare selected fields after `list-runtime.js` synchronously refreshes the row marker. Only changed rows rerun with the complete latest item; reorder compares equal, unrelated fields do nothing, and key changes remain remove plus mount. Builds without item dependencies emit no item reader or list-state subscription code.
 
-The reduced `useReducer` form reuses ordinary state slots. A direct dispatch in a compiled handler becomes a functional `set` whose reducer is bundled from a relative TypeScript module into that handler graph. One direct dispatch prop into a same-file or relative-imported synchronous component, including a direct keyed row, is specialized to intrinsic JSX at the call site, so its handler retains the parent reducer scope and no dispatch capture or child handler asset is emitted. A keyed-row handler reads the latest item through the existing list scope. Relative TypeScript imports referenced inside that child handler receive collision-free call-site aliases and join the parent handler graph. One nested relative-imported intrinsic child may receive an inline or simple `const` callback containing dispatch; the compiler recursively substitutes that callback once and omits the nested child handler asset. Missing primitive literal defaults in these reducer specializations are substituted at the same call site. Reducer-free routes and shared runtimes are unchanged; no reducer runtime or browser component instance exists.
+The reduced `useReducer` form reuses ordinary state slots and React's pure reducer contract. A direct dispatch in a compiled handler becomes a functional `set` whose reducer is bundled from a relative TypeScript module into that handler graph. Pure reducer-owned keyed lists reuse unchanged item identities for reorder, one removal, and append fast paths; ordinary `useState` lists retain full validation. One direct dispatch prop into a same-file or relative-imported synchronous component, including a direct keyed row, is specialized to intrinsic JSX at the call site, so its handler retains the parent reducer scope and no dispatch capture or child handler asset is emitted. A keyed-row handler reads the latest item through the existing list scope. It may declare one top-level primitive-literal `useState`; compiler-generated state IDs combine its hook slot and list key, preserving state across updates and reorder while row unmount deletes it. Existing event, binding, and conditional capabilities consume those IDs. Relative TypeScript imports referenced inside that child handler receive collision-free call-site aliases and join the parent handler graph. One nested relative-imported intrinsic child may receive an inline or simple `const` callback containing dispatch; the compiler recursively substitutes that callback once and omits the nested child handler asset. Missing primitive literal defaults in these reducer specializations are substituted at the same call site. Reducer-free routes and shared runtimes are unchanged; no reducer runtime or browser component instance exists.
 
 `kudzu.config` may opt one emitted shared-layout group into same-document navigation with legacy `navigation: { routes: ["/product", "/items/[id]"] }`, or multiple groups with `navigation: { groups: [{ routes: [...] }, { routes: [...] }] }`. The forms are mutually exclusive. Identities are globally unique emitted exact paths or `runtimeParams` patterns; each group uses one page-exported layout function identity. Runtime records securely match concrete pathnames under `base`, and their cache-safe parameter initializer runs before route DOM/effects mount on every transition. Each group receives a deterministic route-hashed asset specialized to only its records, pattern decoder, and effect/parameter lifecycle needs. Cross-group and ungrouped anchors remain native and are not prefetched; overlapping path domains across groups fail the build. Route effect entries export cache-safe layout and route mount functions: layout effects, including conditional/keyed DOM-owned effects, persist for the group session; route effects receive a fresh owner registry after each route insertion; and non-persisted page disposal cleans route before layout. Direct primitive state, runtime parameter, and keyed-item property dependencies and cleanup are supported. Fragment payloads and coordinated View Transitions are not implemented.
 

package/framework/binding-runtime.js

@@ -30,7 +30,8 @@ export function patchBinding(node, target, value) {
   } else if (target === "class" && (value == null || value === false)) {
     node.removeAttribute("class")
   } else if (target === "class") {
-    node.setAttribute("class", String(value))
+    if (node.namespaceURI === "http://www.w3.org/1999/xhtml") node.className = String(value)
+    else node.setAttribute("class", String(value))
   } else if (value == null || (value === false && !isStringBooleanAttribute(target))) {
     node.removeAttribute(target)
   } else {
@@ -77,7 +78,7 @@ function mountBindings(root) {
     if (node.dataset.kBindAttrs) descriptors.push(...JSON.parse(node.dataset.kBindAttrs).map(({ target, ...descriptor }) => [target, descriptor]))
     for (const [target, descriptor] of descriptors) {
       if (descriptor.state) {
-        const binding = { node, target, read: () => browserState.get(descriptor.state) }
+        const binding = { node, target, read: Object.hasOwn(descriptor, "truthy") ? () => browserState.get(descriptor.state) ? descriptor.truthy : descriptor.falsy : () => browserState.get(descriptor.state) }
         register(bindingTargets, descriptor.state, binding)
         registrations.push([descriptor.state, binding])
         patchBinding(node, target, binding.read())
@@ -124,8 +125,8 @@ function mountConditions(root) {
     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 => {
+    const condition = { start, end, truthy, falsy, kind: descriptor.kind, current: conditionKey(descriptor.kind, descriptor.initial), mount: descriptor.mount }
+    const mount = evaluator => {
       if (!start.isConnected) return
       condition.read = evaluator.read
       const registrations = []
@@ -135,7 +136,9 @@ function mountConditions(root) {
       }
       conditionRegistrations.set(start, { condition, registrations })
       updateCondition(condition)
-    }).catch(error => console.error(error))
+    }
+    if (descriptor.state) mount({ read: () => browserState.get(descriptor.state), stateIds: [descriptor.state] })
+    else loadEvaluator(descriptor).then(mount).catch(error => console.error(error))
   }
 }
 
@@ -143,16 +146,16 @@ function updateCondition(condition) {
   const value = condition.read()
   const next = conditionKey(condition.kind, value)
   if (next === condition.current) return
-  removeConditionRange(condition.start, condition.end)
+  removeConditionRange(condition.start, condition.end, condition.mount)
   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]
+  const nodes = condition.mount ? [...fragment.childNodes] : undefined
   condition.end.parentNode.insertBefore(fragment, condition.end)
   condition.current = next
-  for (const node of nodes) mountDom(node)
+  if (condition.mount) for (const node of nodes) mountDom(node)
   const select = condition.start.closest("select[data-k-bind-value]")
   for (const binding of new Set((bindingRegistrations.get(select) ?? []).map(([, entry]) => entry))) {
     patchBinding(binding.node, binding.target, binding.read())
@@ -183,13 +186,16 @@ function unmountConditions(root) {
   }
 }
 
-function removeConditionRange(start, end) {
+function removeConditionRange(start, end, mount) {
+  if (start.nextSibling === end) return
   const range = start.ownerDocument.createRange()
   range.setStartAfter(start)
   range.setEndBefore(end)
-  const root = range.commonAncestorContainer
-  const nodes = matching(root, "*").filter(node => range.comparePoint(node, 0) === 0)
-  for (const node of nodes) if (!nodes.some(parent => parent !== node && parent.contains(node))) unmountDom(node)
+  if (mount) {
+    const root = range.commonAncestorContainer
+    const nodes = matching(root, "*").filter(node => range.comparePoint(node, 0) === 0)
+    for (const node of nodes) if (!nodes.some(parent => parent !== node && parent.contains(node))) unmountDom(node)
+  }
   range.deleteContents()
 }
 
@@ -208,6 +214,9 @@ function textFragment(document, value) {
 }
 
 function findEnd(start, id) {
+  for (let node = start.nextSibling; node; node = node.nextSibling) {
+    if (node.nodeType === Node.ELEMENT_NODE && node.matches("template[data-k-if-end]") && node.dataset.kIfEnd === id) return node
+  }
   return [...start.ownerDocument.querySelectorAll("template[data-k-if-end]")]
     .find(node => node.dataset.kIfEnd === id)
 }

package/framework/build.mjs

@@ -189,6 +189,7 @@ export async function build({ quiet = false, minify = true } = {}) {
   const hasListExpressionAttributes = plans.some(plan => plan.lists.some(list => list.expressionAttributes))
   const hasListSeeds = plans.some(plan => plan.lists.some(list => list.seed))
   const hasListEffects = plans.some(plan => plan.lists.some(list => list.effects))
+  const hasListRowStates = plans.some(plan => plan.lists.some(list => list.rowStates))
   const hasItemDependencies = plans.some(plan => plan.effects.some(effect => effect.itemDependencies?.length))
   const hasListAsyncParts = hasListExpressions || hasListExpressionAttributes || hasListConditions
   const hasListMounts = hasListConditions || plans.some(plan => plan.lists.some(list => list.mount))
@@ -270,7 +271,8 @@ export async function build({ quiet = false, minify = true } = {}) {
       __KUDZU_LIST_EFFECTS__: String(hasListEffects),
       __KUDZU_LIST_ASYNC_PARTS__: String(hasListAsyncParts),
       __KUDZU_LIST_MOUNTS__: String(hasListMounts),
-      __KUDZU_LIST_ITEM_HOOKS__: String(hasItemDependencies)
+      __KUDZU_LIST_ITEM_HOOKS__: String(hasItemDependencies),
+      __KUDZU_LIST_ROW_STATES__: String(hasListRowStates)
     })
   }
   if (hasNativeHandlers) {
@@ -1629,6 +1631,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
     let usesList = false
     let usesListEffects = false
     let usesListItem = false
+    let usesRowState = false
 
     const collect = node => {
       if (ts.isVariableDeclaration(node) && node.initializer && ts.isCallExpression(node.initializer)) {
@@ -1736,10 +1739,26 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
     }
     const componentSpecializations = new WeakMap()
     const reducerComponentCalls = new WeakSet()
+    const reducerRowStateCalls = []
     const specializedDeclarations = new WeakSet()
     const stateBackedComponentFunctions = new WeakSet()
     const stateBackedComponentRoots = []
     let specializedImportIndex = 0
+    const registerReducerRowState = (call, specialization) => {
+      if (!specialization.rowState) return
+      let owner
+      for (let current = call.parent; current; current = current.parent) {
+        if (isFunctionLike(current) && reducersByFunction.has(current)) {
+          owner = current
+          break
+        }
+      }
+      const setters = settersByFunction.get(owner) ?? new Map()
+      setters.set(specialization.rowState.setter, specialization.rowState.state)
+      settersByFunction.set(owner, setters)
+      reducerRowStateCalls.push(call)
+      usesRowState = true
+    }
     const mergeSpecializedImports = (root, componentSource, call) => {
       const componentImports = clientImportBindings(componentSource, componentSource.fileName, sourceFiles)
       for (const name of runtimeImportNames(componentSource, false)) if (referenceIdentifiers(root, name).length) fail(call, "Imported specialized component handlers may only use relative TypeScript runtime imports")
@@ -1837,6 +1856,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         if (componentSpecializations.has(call)) fail(call, "Reducer dispatch props cannot be combined with another component specialization")
         const specialization = specializeComponentCall(call, component.function, sourceFile, factory, context, fail, "Reducer-dispatch")
         if (specialization.effects.length) fail(call, "Reducer-dispatch components cannot declare effects")
+        registerReducerRowState(call, specialization)
         specialization.root = expandReducerCallbacks(specialization.root, component.function.getSourceFile(), call)
         componentSpecializations.set(call, specialization)
         reducerComponentCalls.add(call)
@@ -1860,6 +1880,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         if (componentSpecializations.has(call)) fail(call, "Reducer dispatch props cannot be combined with another component specialization")
         const specialization = specializeComponentCall(call, component, sourceFile, factory, context, fail, "Reducer-dispatch")
         if (specialization.effects.length) fail(call, "Reducer-dispatch components cannot declare effects")
+        registerReducerRowState(call, specialization)
         specialization.root = expandReducerCallbacks(specialization.root, componentSource, call)
         specialization.root = mergeSpecializedImports(specialization.root, componentSource, call)
         synthesizeTree(specialization.root)
@@ -1896,6 +1917,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
       return tag && ts.isIdentifier(tag) && tag.text[0] === tag.text[0].toUpperCase() ? [tag.text] : []
     }))
     const keyedComponentCalls = new Set(rawRenderedLists.map(({ parts }) => parts.root))
+    for (const call of reducerRowStateCalls) if (!keyedComponentCalls.has(call)) fail(call, "Reducer-dispatch component useState() is only supported in a direct keyed row")
     for (const name of listComponentNames) {
       let component = components.get(name)
       const local = Boolean(component)
@@ -1935,6 +1957,15 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         originalParts.callback.equalsGreaterThanToken,
         root
       )
+      if (specialization?.stateDeclarations.length) callback = factory.updateArrowFunction(
+        callback,
+        callback.modifiers,
+        callback.typeParameters,
+        callback.parameters,
+        callback.type,
+        callback.equalsGreaterThanToken,
+        factory.createBlock([...specialization.stateDeclarations, factory.createReturnStatement(root)], true)
+      )
       if (callback !== originalParts.callback) {
         ts.setParentRecursive(callback, false)
         callback.parent = originalParts.callback.parent
@@ -1945,7 +1976,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         calculation.parent = callback
         validateListExpression(calculation, parts.item, originalParts.root, fail)
       }
-      validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions)
+      validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions, settersForNode(originalParts.root, settersByFunction), specialization?.rowState)
       if (specialization?.effects.length) {
         usesListEffects = true
         const statements = specialization.effects.map(entry => {
@@ -2070,7 +2101,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         ])
       }
 
-      if (ts.isVariableDeclaration(node) && ts.isArrayBindingPattern(node.name) && node.initializer && ts.isCallExpression(node.initializer) && ts.isIdentifier(node.initializer.expression) && (node.initializer.expression.text === "useState" && node.initializer.arguments.length === 1 || node.initializer.expression.text === "useReducer" && node.initializer.arguments.length === 2)) {
+      if (ts.isVariableDeclaration(node) && ts.isArrayBindingPattern(node.name) && node.initializer && ts.isCallExpression(node.initializer) && ts.isIdentifier(node.initializer.expression) && ((node.initializer.expression.text === "useState" || node.initializer.expression.text === "__kRowUseState") && node.initializer.arguments.length === 1 || node.initializer.expression.text === "useReducer" && node.initializer.arguments.length === 2)) {
         const stateElement = node.name.elements[0]
         if (!stateElement || !ts.isBindingElement(stateElement) || !ts.isIdentifier(stateElement.name)) return node
         const initializer = factory.updateCallExpression(node.initializer, node.initializer.expression, node.initializer.typeArguments, [
@@ -2170,8 +2201,14 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
 
     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) {
+      behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("binding"), factory.createIdentifier("__kBinding")))
+      behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("select"), factory.createIdentifier("__kSelect")))
+    }
+    if (usesConditional) {
+      behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("conditional"), factory.createIdentifier("__kConditional")))
+      behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("stateConditional"), factory.createIdentifier("__kStateConditional")))
+    }
     if (usesList) {
       behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("list"), factory.createIdentifier("__kList")))
       behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("listExpression"), factory.createIdentifier("__kListExpression")))
@@ -2181,6 +2218,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
     }
     if (usesListItem && !usesList) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("listItem"), factory.createIdentifier("__kListItem")))
     if (usesListEffects) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("useEffect"), factory.createIdentifier("__kListUseEffect")))
+    if (usesRowState) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("useState"), factory.createIdentifier("__kRowUseState")))
     if (usesBinding || usesConditional) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("bindingValue"), factory.createIdentifier("__kBindingValue")))
     const behaviorImport = factory.createImportDeclaration(
       undefined,
@@ -2399,7 +2437,7 @@ function insideJsxEventHandler(node, root) {
   return false
 }
 
-function validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions) {
+function validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions, setters, rowState) {
   const fail = (node, message) => {
     throw sourceNodeError(node, sourceFile, message)
   }
@@ -2424,6 +2462,13 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
       const condition = conditionalParts(expression)
       if (condition && containsJsx(expression)) {
         if (conditionDepth) fail(node, "Nested item conditions are not supported in keyed lists")
+        if (rowState && referencedStateNames(condition.condition, setters).has(rowState.state)) {
+          conditionDepth++
+          visit(condition.truthy)
+          visit(condition.falsy)
+          conditionDepth--
+          return
+        }
         if (!referencesIdentifier(condition.condition, item)) fail(node, "Keyed list item conditions must read the item")
         validateListExpression(condition.condition, item, node, fail)
         listConditions.set(node.expression, { ...condition, item })
@@ -2489,6 +2534,8 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
   let returned
   const calculations = []
   const effectCalls = []
+  const stateDeclarations = []
+  let rowState
   if (!ts.isBlock(component.body)) {
     returned = component.body
   } else {
@@ -2502,6 +2549,25 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
       }
       if (!ts.isVariableStatement(statement) || (statement.declarationList.flags & ts.NodeFlags.Const) === 0 || statement.declarationList.declarations.length !== 1) fail(statement, `${label} component locals must be single const declarations`)
       const declaration = statement.declarationList.declarations[0]
+      if (declaration.initializer && ts.isCallExpression(declaration.initializer) && ts.isIdentifier(declaration.initializer.expression) && declaration.initializer.expression.text === "useState") {
+        if (label !== "Reducer-dispatch") fail(declaration, `${label} components cannot declare local state`)
+        if (rowState) throw sourceNodeError(declaration, component.getSourceFile(), "Reducer-dispatch keyed row components may declare exactly one top-level useState()")
+        if (declaration.initializer.arguments.length !== 1 || !isPrimitiveDefaultLiteral(declaration.initializer.arguments[0])) throw sourceNodeError(declaration.initializer, component.getSourceFile(), "Reducer-dispatch keyed row useState() must use one primitive literal initial value; lazy initialization is not supported")
+        if (!ts.isArrayBindingPattern(declaration.name) || declaration.name.elements.length !== 2 || declaration.name.elements.some(element => !element || !ts.isBindingElement(element) || !ts.isIdentifier(element.name) || element.initializer || element.dotDotDotToken)) throw sourceNodeError(declaration.name, component.getSourceFile(), "Reducer-dispatch keyed row useState() must use [state, setter] identifier destructuring")
+        const suffix = Math.max(0, call.pos)
+        const state = `__kRowState${suffix}`
+        const setter = `__kRowSetter${suffix}`
+        substitutions.set(declaration.name.elements[0].name.text, factory.createIdentifier(state))
+        substitutions.set(declaration.name.elements[1].name.text, factory.createIdentifier(setter))
+        const binding = factory.createArrayBindingPattern([
+          factory.createBindingElement(undefined, undefined, factory.createIdentifier(state)),
+          factory.createBindingElement(undefined, undefined, factory.createIdentifier(setter))
+        ])
+        const initializer = factory.createCallExpression(factory.createIdentifier("__kRowUseState"), undefined, [cloneAst(declaration.initializer.arguments[0], factory, context)])
+        stateDeclarations.push(factory.createVariableStatement(undefined, factory.createVariableDeclarationList([factory.createVariableDeclaration(binding, undefined, undefined, initializer)], ts.NodeFlags.Const)))
+        rowState = { state, setter }
+        continue
+      }
       if (!ts.isIdentifier(declaration.name) || !declaration.initializer) fail(declaration, `${label} component locals must be initialized identifiers`)
       const calculation = substituteClone(declaration.initializer, substitutions, factory, context)
       calculations.push({ name: declaration.name.text, expression: calculation })
@@ -2509,6 +2575,15 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
     }
     returned = last.expression
   }
+  let unsupportedState
+  const findUnsupportedState = node => {
+    if (unsupportedState) return
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "useState") unsupportedState = node
+    ts.forEachChild(node, findUnsupportedState)
+  }
+  findUnsupportedState(returned)
+  for (const calculation of calculations) findUnsupportedState(calculation.expression)
+  if (unsupportedState) throw sourceNodeError(unsupportedState, component.getSourceFile(), label === "Reducer-dispatch" ? "Reducer-dispatch keyed row useState() must be one top-level const declaration" : `${label} components cannot declare local state`)
   let root = unwrapExpression(substituteClone(returned, substitutions, factory, context))
   if (!ts.isJsxElement(root) && !ts.isJsxSelfClosingElement(root)) fail(returned, `${label} component must return one JSX element`)
   const tag = jsxTagName(root)
@@ -2524,7 +2599,9 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
     calculations: calculations
       .filter(calculation => label !== "Reducer-dispatch" || !isFunctionLike(calculation.expression) || !isEventOnlyComponentLocal(returned, calculation.name))
       .map(calculation => calculation.expression),
-    effects
+    effects,
+    stateDeclarations,
+    rowState
   }
 }
 
@@ -2801,15 +2878,27 @@ function isJsxLocalValue(expression, known) {
 }
 
 function compileReactiveBinding(expression, setters, factory, context, reactiveBindings, handlerUrl) {
+  const parts = conditionalParts(expression)
+  const state = parts && directStateIdentifier(parts.condition, setters)
+  if (state && isPrimitiveDefaultLiteral(parts.truthy) && isPrimitiveDefaultLiteral(parts.falsy)) {
+    return factory.createCallExpression(factory.createIdentifier("__kSelect"), undefined, [state, parts.truthy, parts.falsy])
+  }
   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 state = directStateIdentifier(expression, setters)
   const thunk = branch => factory.createArrowFunction(undefined, undefined, [], undefined, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), branch)
+  if (state) return factory.createCallExpression(factory.createIdentifier("__kStateConditional"), undefined, [factory.createStringLiteral(kind), state, thunk(truthy), thunk(falsy)])
+  const [initial, ...descriptor] = compileReactiveExpression(expression, setters, factory, context, reactiveBindings, handlerUrl)
   return factory.createCallExpression(factory.createIdentifier("__kConditional"), undefined, [factory.createStringLiteral(kind), initial, thunk(truthy), thunk(falsy), ...descriptor])
 }
 
+function directStateIdentifier(expression, setters) {
+  const value = unwrapExpression(expression)
+  return ts.isIdentifier(value) && new Set(setters.values()).has(value.text) ? value : undefined
+}
+
 function compileReactiveExpression(expression, setters, factory, context, reactiveBindings, handlerUrl) {
   const usedStates = referencedStateNames(expression, setters)
   const captures = captureNames(expression, expression, setters)

package/framework/core.mjs

@@ -3,6 +3,7 @@ import { serializeStyle } from "./style.js"
 const signalMarker = Symbol("kudzu.signal")
 const setterMarker = Symbol("kudzu.setter")
 const reducerDispatchMarker = Symbol("kudzu.reducerDispatch")
+const reducerStateMarker = Symbol("kudzu.reducerState")
 const behaviorMarker = Symbol("kudzu.behavior")
 const nativeBehaviorMarker = Symbol("kudzu.nativeBehavior")
 const bindingMarker = Symbol("kudzu.binding")
@@ -47,20 +48,21 @@ export function useState(initialValue, name) {
     throw new Error("useState() can only run while rendering a Kudzu component")
   }
 
-  const id = nextRenderId("s")
+  const id = renderContext.listRoot || renderContext.listRowRoot ? nextRowRenderId("s", initialValue) : nextRenderId("s")
   const signal = createSignal(id, initialValue)
 
   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, ...(renderContext.scoped ? { lifetime: renderContext.renderScope } : {}) }
+  if (!renderContext.listTemplate) renderContext.states[id] = { name: name ?? id, initialValue, ...(renderContext.scoped ? { lifetime: renderContext.renderScope } : {}) }
   return [signal, setter]
 }
 
 export function useReducer(reducer, initialValue, name) {
   if (typeof reducer !== "function") throw new Error("useReducer() requires a reducer function")
   const [state] = useState(initialValue, name)
+  Object.defineProperty(state, reducerStateMarker, { value: true })
   const dispatch = () => {
     throw new Error("Reducer dispatches are compiled into browser handlers")
   }
@@ -198,10 +200,20 @@ export function binding(value, module, handler, states, scope) {
   return { [bindingMarker]: true, value, ...reactiveDescriptor(module, handler, states, scope) }
 }
 
+export function select(state, truthy, falsy) {
+  if (!state?.[signalMarker]) throw new Error("A reactive selection must target framework state")
+  return { [bindingMarker]: true, value: state.value ? truthy : falsy, state: state.id, truthy, falsy }
+}
+
 export function conditional(kind, value, truthy, falsy, module, handler, states, scope) {
   return { [conditionalMarker]: true, kind, value, truthy, falsy, ...reactiveDescriptor(module, handler, states, scope) }
 }
 
+export function stateConditional(kind, state, truthy, falsy) {
+  if (!state?.[signalMarker]) throw new Error("A reactive conditional must target framework state")
+  return { [conditionalMarker]: true, kind, value: state.value, truthy, falsy, state: state.id }
+}
+
 export function list(items, keyField, render) {
   if (!items?.[signalMarker] || !Array.isArray(items.value)) throw new Error("A keyed list must use local array state")
   const keys = new Set()
@@ -294,6 +306,7 @@ export function bindingValue(value) {
 }
 
 function bindingDescriptor(value) {
+  if (value.state) return { state: value.state, ...(Object.hasOwn(value, "truthy") ? { truthy: value.truthy, falsy: value.falsy } : {}) }
   return { module: value.module, handler: value.handler, states: value.states, scope: value.scope, scopeStates: value.scopeStates, scopeBindings: value.scopeBindings }
 }
 
@@ -334,7 +347,7 @@ function serializeCapture(name, value, seen) {
 }
 
 export async function renderPage(component, metadata = {}, props = {}, layout) {
-  renderContext = { scoped: Boolean(layout), renderScope: layout ? "layout" : "route", counters: { layout: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0 }, route: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0 } }, nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, nextEffect: 0, nextParam: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, listEffectOwners: [], effectOwners: [], contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], effects: [], bindings: [], textBindings: [], conditions: [], lists: [], handlerModules: new Set(), runtimeParamNames: metadata.runtimeParams, paramEntries: [], params: undefined, hasBehaviors: false, hasNativeBehaviors: false, hasEffects: false, hasParams: false, hasBindings: false, hasLists: false, hasListStyles: false }
+  renderContext = { scoped: Boolean(layout), renderScope: layout ? "layout" : "route", counters: { layout: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0 }, route: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0 } }, nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, nextEffect: 0, nextParam: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listRowRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, listEffectOwners: [], listRowStates: [], listRowConditions: [], effectOwners: [], contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], effects: [], bindings: [], textBindings: [], conditions: [], lists: [], handlerModules: new Set(), runtimeParamNames: metadata.runtimeParams, paramEntries: [], params: undefined, hasBehaviors: false, hasNativeBehaviors: false, hasEffects: false, hasParams: false, hasBindings: false, hasLists: false, hasListStyles: false }
 
   try {
     const page = { [routeScopeMarker]: true, component, props }
@@ -507,12 +520,13 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     if (!stateIds.size) return renderNode(node.value ? node.truthy() : node.falsy(), namespace, selectValue)
     if (namespace) throw new Error(`Reactive conditional DOM is not supported inside ${namespace}`)
 
-    const id = nextRenderId("c")
+    const id = renderContext.listRoot || renderContext.listRowRoot ? nextRowRenderId("c") : nextRenderId("c")
     renderContext.conditionDepth++
     const truthy = await renderNode(node.truthy(), namespace, selectValue)
     const falsy = await renderNode(node.falsy(), namespace, selectValue)
     renderContext.conditionDepth--
-    const metadata = { id, kind: node.kind, initial: node.value, ...descriptor }
+    const mount = truthy.includes("data-k-") || falsy.includes("data-k-") || truthy.includes("<!--k-text:") || falsy.includes("<!--k-text:")
+    const metadata = { id, kind: node.kind, initial: node.value, ...descriptor, ...(mount ? { mount: true } : {}) }
     for (const stateId of stateIds) renderContext.conditionStates.add(stateId)
     renderContext.conditions.push(metadata)
     renderContext.hasBehaviors = true
@@ -642,8 +656,10 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     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}='${escapeJsonAttribute(value.commands)}'`
+        const command = value.commands.length === 1 ? value.commands[0] : undefined
+        attributes += command?.[0] === "set" && command[2] === true
+          ? ` data-k-set-true-${event}="${escapeAttribute(command[1])}"`
+          : ` data-k-on-${event}='${escapeJsonAttribute(value.commands)}'`
         renderContext.events.push({ event, commands: value.commands })
       } else if (value?.[nativeBehaviorMarker]) {
         const template = { module: value.module, handler: value.handler, states: value.states, scope: value.scope }
@@ -720,15 +736,20 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
 async function renderList(node, namespace, selectValue) {
   if (namespace) throw new Error(`Reactive keyed lists are not supported inside ${namespace}`)
   const id = nextRenderId("l")
-  const descriptor = { id, state: node.items.id, key: node.keyField, keys: node.items.value.map(item => item[node.keyField]) }
+  const descriptor = { id, state: node.items.id, key: node.keyField, keys: node.items.value.map(item => item[node.keyField]), ...(node.items[reducerStateMarker] ? { reducer: true } : {}) }
   renderContext.listDepth++
   const previousListFields = renderContext.listFields
   const previousListEffectOwners = renderContext.listEffectOwners
+  const previousListRowStates = renderContext.listRowStates
+  const previousListRowConditions = renderContext.listRowConditions
   try {
     renderContext.listTemplate = true
     renderContext.listEffectOwners = []
+    renderContext.listRowStates = []
+    renderContext.listRowConditions = []
     renderContext.listFields = new Set([node.keyField])
-    renderContext.listRoot = { id, state: node.items.id, template: true, effects: [], item: {} }
+    renderContext.listRoot = { id, state: node.items.id, template: true, effects: [], item: {}, rowIndexes: { s: 0, c: 0 } }
+    renderContext.listRowRoot = renderContext.listRoot
     const template = await renderNode(node.render({}), namespace, selectValue)
     if (template.includes("data-k-native-") || template.includes("data-k-effects=")) descriptor.mount = true
     if (template.includes("data-k-effects=")) descriptor.effects = true
@@ -738,13 +759,19 @@ async function renderList(node, namespace, selectValue) {
     if (template.includes("data-k-list-events")) descriptor.events = true
     if (template.includes("data-k-list-expression=")) descriptor.expressions = true
     if (template.includes("data-k-list-expression-attrs")) descriptor.expressionAttributes = true
+    if (renderContext.listRowStates.length) {
+      descriptor.rowStates = renderContext.listRowStates
+      if (renderContext.listRowConditions.length) descriptor.rowConditions = renderContext.listRowConditions.map(({ id }) => id)
+      descriptor.mount = true
+    }
     const seed = listSeed(node.items.value, renderContext.listFields)
     if (seed) descriptor.seed = seed
     let current = ""
     renderContext.listTemplate = false
     renderContext.listInitialMarkers = Boolean(descriptor.conditions)
     for (const item of node.items.value) {
-      renderContext.listRoot = { id, state: node.items.id, key: item[node.keyField], template: false, effects: [], item }
+      renderContext.listRoot = { id, state: node.items.id, key: item[node.keyField], template: false, effects: [], item, rowIndexes: { s: 0, c: 0 } }
+      renderContext.listRowRoot = renderContext.listRoot
       current += await renderNode(node.render(item), namespace, selectValue)
     }
     renderContext.lists.push(descriptor)
@@ -753,10 +780,13 @@ async function renderList(node, namespace, selectValue) {
     return `<template data-k-list='${escapeJsonAttribute(descriptor)}'>${template}</template>${current}<template data-k-list-end="${id}"></template>`
   } finally {
     renderContext.listRoot = undefined
+    renderContext.listRowRoot = undefined
     renderContext.listTemplate = false
     renderContext.listInitialMarkers = false
     renderContext.listFields = previousListFields
     renderContext.listEffectOwners = previousListEffectOwners
+    renderContext.listRowStates = previousListRowStates
+    renderContext.listRowConditions = previousListRowConditions
     renderContext.listDepth--
   }
 }
@@ -767,6 +797,24 @@ function nextRenderId(kind) {
   return `${kind}${renderContext[counters[kind]]++}`
 }
 
+function nextRowRenderId(kind, initialValue) {
+  const root = renderContext.listRoot ?? renderContext.listRowRoot
+  const index = root.rowIndexes[kind]++
+  const entries = kind === "s" ? renderContext.listRowStates : renderContext.listRowConditions
+  if (renderContext.listTemplate) {
+    const id = `${nextRenderId(kind)}:$k`
+    entries[index] = kind === "s" ? { id, initialValue } : { id }
+    return id
+  }
+  const entry = entries[index]
+  if (!entry) throw new Error(`Keyed row ${kind === "s" ? "state hooks" : "conditionals"} must have the same order for every item`)
+  return rowRenderId(entry.id, root.key)
+}
+
+function rowRenderId(id, key) {
+  return id.replace("$k", encodeURIComponent(`${typeof key}:${key}`))
+}
+
 function optionValue(props) {
   if (props.value != null) return bindingValue(props.value)
   return Array.isArray(props.children) ? props.children.join("") : props.children ?? ""

package/framework/list-runtime.js

@@ -31,6 +31,7 @@ function mountLists(root) {
     const descriptor = JSON.parse(start.dataset.kList)
     const end = findEnd(start, descriptor.id)
     const roots = listRoots(start, end)
+    if (__KUDZU_LIST_ROW_STATES__ && descriptor.rowStates) for (let index = 0; index < roots.length; index++) initializeRowStates(descriptor, descriptor.keys[index])
     const templateRoot = start.content.firstElementChild
     const parts = listItemPartPlan(templateRoot)
     for (const root of roots) __KUDZU_LIST_CONDITIONS__ && descriptor.conditions ? listItemParts(root) : mapListItemParts(parts, root)
@@ -43,6 +44,7 @@ function mountLists(root) {
       seedFields: __KUDZU_LIST_SEEDS__ && descriptor.seed && Object.keys(descriptor.seed),
       roots: new Map(roots.map((node, index) => [keyToken(descriptor.keys[index]), node])),
       values: new Map(),
+      items: undefined,
       container: roots[0]?.parentNode,
       boundary: end
     }
@@ -62,6 +64,7 @@ function unregisterList(start) {
     const lists = listTargets.get(registration.state)
     lists?.delete(registration.list)
     if (!lists?.size) listTargets.delete(registration.state)
+    if (__KUDZU_LIST_ROW_STATES__ && registration.list.descriptor.rowStates) for (const token of registration.list.roots.keys()) deleteRowStates(registration.list.descriptor, token)
   }
   listRegistrations.delete(start)
   mountedLists.delete(start)
@@ -70,6 +73,7 @@ function unregisterList(start) {
 function updateList(list) {
   const items = browserState.get(list.descriptor.state)
   if (!Array.isArray(items)) throw new Error("Keyed list state must remain an array")
+  if (list.descriptor.reducer && list.items && updateReducerList(list, items)) return
   const entries = []
   const keys = new Set()
   const seen = new Set()
@@ -82,7 +86,34 @@ function updateList(list) {
     const token = keyToken(key)
     if (keys.has(token)) throw new Error(`Duplicate keyed list key: ${String(key)}`)
     keys.add(token)
-    entries.push({ item, key, token, value: seededValue ?? JSON.stringify(item) })
+    entries.push({ item, key, token, value: seededValue === undefined ? JSON.stringify(item) : seededValue })
+  }
+  if (list.values.size && entries.every(entry => !list.values.has(entry.token) || list.values.get(entry.token) === entry.value)) {
+    const currentTokens = [...list.roots.keys()]
+    const nextTokens = entries.map(entry => entry.token)
+    if (nextTokens.length === currentTokens.length && nextTokens.every((token, index) => token === currentTokens[currentTokens.length - index - 1])) {
+      const parent = list.container ?? list.start.parentNode
+      const reordered = parent.ownerDocument.createDocumentFragment()
+      reordered.append(...nextTokens.map(token => list.roots.get(token)))
+      parent.insertBefore(reordered, list.boundary)
+      list.roots = new Map(nextTokens.map(token => [token, list.roots.get(token)]))
+      list.container ??= parent
+      return
+    }
+    if (nextTokens.length === currentTokens.length - 1) {
+      const removed = currentTokens.find(token => !keys.has(token))
+      const removedIndex = currentTokens.indexOf(removed)
+      if (removed && nextTokens.every((token, index) => token === currentTokens[index >= removedIndex ? index + 1 : index])) {
+        removeListRoot(list, removed)
+        list.roots = new Map(nextTokens.map(token => [token, list.roots.get(token)]))
+        return
+      }
+    }
+    if (nextTokens.length === currentTokens.length + 1 && currentTokens.every((token, index) => token === nextTokens[index])) {
+      const entry = entries.at(-1)
+      addListRoot(list, entry)
+      return
+    }
   }
   const next = []
   const values = new Map()
@@ -96,6 +127,7 @@ function updateList(list) {
       if (node?.dataset.kListRoot !== list.descriptor.id) node = undefined
       if (!node) throw new Error("Keyed list template has no root element")
       node.removeAttribute("data-k-list-root")
+      if (__KUDZU_LIST_ROW_STATES__ && list.descriptor.rowStates) initializeRowStates(list.descriptor, key, node)
       mapListItemParts(list.parts, node)
       fillListItem(node, item)
       additions.append(node)
@@ -113,6 +145,7 @@ function updateList(list) {
       unmountDom(node)
       node.remove()
     } else node.remove()
+    if (__KUDZU_LIST_ROW_STATES__ && list.descriptor.rowStates) deleteRowStates(list.descriptor, token)
   }
   if (added) {
     if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) {
@@ -143,6 +176,79 @@ function updateList(list) {
   }
   list.roots = new Map(next)
   list.values = values
+  list.items = items
+}
+
+function updateReducerList(list, items) {
+  const previous = list.items
+  if (items.length === previous.length && items.every((item, index) => item === previous[index])) {
+    list.items = items
+    return true
+  }
+  if (items.length === previous.length && items.every((item, index) => item === previous[previous.length - index - 1])) {
+    const tokens = [...list.roots.keys()].reverse()
+    const parent = list.container ?? list.start.parentNode
+    const reordered = parent.ownerDocument.createDocumentFragment()
+    reordered.append(...tokens.map(token => list.roots.get(token)))
+    parent.insertBefore(reordered, list.boundary)
+    list.roots = new Map(tokens.map(token => [token, list.roots.get(token)]))
+    list.items = items
+    list.container ??= parent
+    return true
+  }
+  if (items.length === previous.length - 1) {
+    let removed = 0
+    while (removed < items.length && items[removed] === previous[removed]) removed++
+    if (items.every((item, index) => item === previous[index >= removed ? index + 1 : index])) {
+      removeListRoot(list, keyToken(previous[removed]?.[list.descriptor.key]))
+      list.roots = new Map(items.map(item => {
+        const token = keyToken(item[list.descriptor.key])
+        return [token, list.roots.get(token)]
+      }))
+      list.items = items
+      return true
+    }
+  }
+  if (items.length === previous.length + 1 && previous.every((item, index) => item === items[index])) {
+    const item = items.at(-1)
+    const key = item?.[list.descriptor.key]
+    if (!validListKey(key)) throw new Error(`Keyed list key "${list.descriptor.key}" must be a string or finite number`)
+    assertListItem(item)
+    const seen = new Set()
+    const seededValue = __KUDZU_LIST_SEEDS__ ? list.seedFields && seededListValue(item, list.seedFields, list.descriptor.seed) : undefined
+    if (seededValue === undefined) assertListValue(item, seen, true)
+    const token = keyToken(key)
+    if (list.roots.has(token)) throw new Error(`Duplicate keyed list key: ${String(key)}`)
+    addListRoot(list, { item, key, token, value: seededValue === undefined ? JSON.stringify(item) : seededValue })
+    list.items = items
+    return true
+  }
+  return false
+}
+
+function addListRoot(list, { item, key, token, value }) {
+  let node = list.start.content.firstElementChild?.cloneNode(true)
+  if (node?.dataset.kListRoot !== list.descriptor.id) node = undefined
+  if (!node) throw new Error("Keyed list template has no root element")
+  node.removeAttribute("data-k-list-root")
+  if (__KUDZU_LIST_ROW_STATES__ && list.descriptor.rowStates) initializeRowStates(list.descriptor, key, node)
+  mapListItemParts(list.parts, node)
+  fillListItem(node, item)
+  const parent = list.container ?? list.start.parentNode
+  parent.insertBefore(node, list.boundary)
+  if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) mountDom(node)
+  list.roots.set(token, node)
+  list.values.set(token, value)
+  list.container ??= parent
+}
+
+function removeListRoot(list, token) {
+  const node = list.roots.get(token)
+  if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) unmountDom(node)
+  node.remove()
+  if (__KUDZU_LIST_ROW_STATES__ && list.descriptor.rowStates) deleteRowStates(list.descriptor, token)
+  list.roots.delete(token)
+  list.values.delete(token)
 }
 
 function fillListItem(root, item) {
@@ -383,6 +489,40 @@ function keyToken(key) {
   return `${typeof key}:${key}`
 }
 
+function initializeRowStates(descriptor, key, root) {
+  const token = keyToken(key)
+  const replacements = new Map()
+  for (const state of descriptor.rowStates) {
+    const id = rowStateId(state.id, token)
+    if (!browserState.has(id)) browserState.set(id, state.initialValue)
+    replacements.set(state.id, id)
+  }
+  for (const marker of descriptor.rowConditions ?? []) replacements.set(marker, rowStateId(marker, token))
+  if (root) replaceRowIds(root, replacements)
+}
+
+function deleteRowStates(descriptor, token) {
+  for (const state of descriptor.rowStates) browserState.delete(rowStateId(state.id, token))
+}
+
+function rowStateId(id, token) {
+  return id.replace("$k", encodeURIComponent(token))
+}
+
+function replaceRowIds(root, replacements) {
+  const replace = node => {
+    for (const attribute of [...node.attributes]) {
+      if (!attribute.name.startsWith("data-k-")) continue
+      let value = attribute.value
+      for (const [template, id] of replacements) if (value.includes(template)) value = value.replaceAll(template, id)
+      if (value !== attribute.value) attribute.value = value
+    }
+    for (const child of node.children) replace(child)
+    for (const child of node.content?.children ?? []) replace(child)
+  }
+  replace(root)
+}
+
 function validListKey(key) {
   return typeof key === "string" || typeof key === "number" && Number.isFinite(key)
 }
@@ -394,6 +534,16 @@ function assertListItem(item) {
 
 function seededListValue(item, fields, seed) {
   const keys = Reflect.ownKeys(item)
+  if (fields.length === 1) {
+    const field = fields[0]
+    if (keys.length !== 1 || keys[0] !== field) return undefined
+    const descriptor = Object.getOwnPropertyDescriptor(item, field)
+    if (!descriptor.enumerable) throw new Error("Keyed list items must not contain non-enumerable properties")
+    if (!("value" in descriptor)) throw new Error("Keyed list items must not contain accessors")
+    const value = descriptor.value
+    const type = value === null ? "null" : typeof value
+    return type === seed[field] && !(type === "number" && (!Number.isFinite(value) || Object.is(value, -0))) ? value : undefined
+  }
   if (keys.length !== fields.length || keys.some(key => typeof key !== "string" || !fields.includes(key))) return undefined
   const values = []
   for (const field of fields) {
@@ -405,7 +555,7 @@ function seededListValue(item, fields, seed) {
     if (type !== seed[field] || type === "number" && (!Number.isFinite(value) || Object.is(value, -0))) return undefined
     values.push(value)
   }
-  return JSON.stringify(values)
+  return values.length === 1 ? values[0] : JSON.stringify(values)
 }
 
 function assertListValue(value, seen, root = false) {

package/framework/runtime.js

@@ -24,7 +24,10 @@ if(typeof document!=="undefined"){
 
   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)
+      const target=event.target.closest(`[data-k-set-true-${eventName}],[data-k-on-${eventName}]`)
+      if(!target)return
+      const direct=target.getAttribute(`data-k-set-true-${eventName}`)
+      if(direct){browserState.set(direct,true);commitDom(direct,true)}
+      else applyCommands(browserState,JSON.parse(target.getAttribute(`data-k-on-${eventName}`)),commitDom)
     })
 }

package/framework/shared-runtime.js

@@ -1,4 +1,12 @@
 export function applyCommands(state, commands, commit, log = console.log) {
+  if (commands.length === 1 && commands[0][0] !== "log") {
+    const [operation, id, operand] = commands[0]
+    const current = state.get(id)
+    const value = operation === "add" ? current + operand : operand
+    state.set(id, value)
+    commit(id, value)
+    return
+  }
   const changed = new Set()
 
   for (const [operation, id, operand] of commands) {
@@ -18,6 +26,8 @@ export const browserState = new Map()
 const committers = []
 const mountHooks = []
 const unmountHooks = []
+const textTargets = new Map()
+const mountedText = new WeakSet()
 
 /* list-item-hooks */
 const listItemHooks = new Map()
@@ -50,15 +60,33 @@ export function registerUnmountHook(unmount) {
 }
 
 export function commitDom(id, value) {
-  for (const node of document.querySelectorAll(`[data-k-text="${id}"]`)) node.textContent = value
+  for (const node of textTargets.get(id) ?? []) {
+    if (node.isConnected) node.textContent = value
+    else textTargets.get(id).delete(node)
+  }
   for (const commit of committers) commit(id)
 }
 
 export function mountText(root) {
   for (const node of matching(root, "[data-k-text]")) {
+    if (mountedText.has(node)) continue
+    mountedText.add(node)
     const id = node.dataset.kText
     if (browserState.has(id)) node.textContent = browserState.get(id)
     else browserState.set(id, JSON.parse(node.dataset.kValue))
+    const targets = textTargets.get(id) ?? new Set()
+    targets.add(node)
+    textTargets.set(id, targets)
+  }
+}
+
+function unmountText(root) {
+  for (const node of matching(root, "[data-k-text]")) {
+    const id = node.dataset.kText
+    const targets = textTargets.get(id)
+    targets?.delete(node)
+    if (!targets?.size) textTargets.delete(id)
+    mountedText.delete(node)
   }
 }
 
@@ -69,6 +97,7 @@ export function mountDom(root) {
 
 export function unmountDom(root) {
   for (const unmount of unmountHooks) unmount(root)
+  unmountText(root)
 }
 
 if (typeof document !== "undefined") {
@@ -79,8 +108,14 @@ if (typeof document !== "undefined") {
   const eventNames = ["click", "input", "change"]
   for (const eventName of eventNames) {
     document.addEventListener(eventName, event => {
-      const target = event.target.closest(`[data-k-on-${eventName}]`)
+      const target = event.target.closest(`[data-k-set-true-${eventName}],[data-k-on-${eventName}]`)
       if (!target) return
+      const direct = target.dataset[`kSetTrue${capitalize(eventName)}`]
+      if (direct) {
+        browserState.set(direct, true)
+        commitDom(direct, true)
+        return
+      }
       const commands = target.dataset[`kOn${capitalize(eventName)}`]
       applyCommands(browserState, JSON.parse(commands), commitDom)
     })

package/package.json

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