@kudzujs/core 0.7.24 → 0.7.26

package/README.md

@@ -10,7 +10,7 @@ Kudzu compiles ordinary React-shaped TypeScript and TSX into complete static HTM
 
 > Experimental `0.7.x`: the compiler API and supported TSX surface may change.
 
-**Latest release: 0.7.24 - Router-shaped query reads.** Read-only React Router `useSearchParams()` authoring now lowers direct static `get()` reads to nullable route signals initialized by a minimal native query reader. Read the [release notes](./RELEASES.md#0724---router-shaped-query-reads) or open the [release page](https://kudzujs.cloud/releases/0.7.24).
+**Latest release: 0.7.26 - React-shaped migration and faster lists.** React-compatible JSX typing, setter-adapter specialization, imported collection normalization, and indexed keyed-row release make ordinary migrations easier while moving the measured 500-card search ahead of React. Read the [release notes](./RELEASES.md#0726---react-shaped-migration-and-faster-lists) or open the [release page](https://kudzujs.cloud/releases/0.7.26).
 
 - [Documentation](https://kudzujs.cloud/docs)
 - [Installation guide](https://kudzujs.cloud/docs#install)
@@ -79,12 +79,13 @@ ordinary React-shaped TSX
 
 - Function components execute at build time and do not survive as browser components.
 - `useState` and reduced `useReducer`, including directly serializable lazy initialization, compile to synchronous logical state and batched direct DOM writes; top-level `useId` and direct intrinsic `forwardRef` authoring erase to static HTML without a component runtime.
-- Conditions, keyed collections, attributes, events, refs, effects, and supported component boundaries compile to route-specific capabilities. Inline or simple `const` setter callbacks and object refs may cross one ordinary component boundary into a direct intrinsic root.
+- Conditions, keyed collections, attributes, events, refs, effects, and supported component boundaries compile to route-specific capabilities. A direct setter may cross one ordinary component boundary through one value-adapter event call; inline or simple `const` setter callbacks and object refs may cross the same direct intrinsic boundary.
 - Build-known data and routes become complete HTML through async components and `getStaticPaths()`.
 - Native document navigation is the default; static routes do not load a client runtime.
 - A named or aliased React Router `Link` with a static root-relative `to` erases to a base-aware native anchor; no router package or runtime is emitted.
 - A direct named or aliased React Router `useParams()` call on a `runtimeParams` bracket route reuses Kudzu's route-specific pathname reader.
 - Read-only React Router `useSearchParams()` with direct static `get("name")` locals lowers to nullable signals initialized by a minimal route-specific query reader.
+- A named or aliased React Router `useNavigate()` top-level binding lowers direct nested-callback calls with safe static root-relative destinations to native `location.assign()` or `location.replace()` navigation.
 - Unsupported nearby patterns fail during the build with a source location and actionable boundary.
 
 Migration input may retain supported imports from `react`; Kudzu erases those references and never emits or executes React. New Kudzu source should import framework APIs from `@kudzujs/core`.

package/RELEASES.md

@@ -1,5 +1,58 @@
 # Kudzu Releases
 
+## 0.7.26 - React-shaped migration and faster lists
+
+Kudzu 0.7.26 broadens ordinary React-shaped migration input and removes repeated keyed-row cleanup scans, making the matched 500-card search faster than React without adding a VDOM, hydration, or a retained component tree.
+
+### New in 0.7.26
+
+- JSX typing accepts React 19 `ReactNode`-shaped component output while preserving Kudzu's compile-time element model.
+- Intrinsic DOM handlers retain contextual event typing through migration-compatible JSX declarations.
+- A direct setter or one-call value-adapter callback may cross one supported component boundary, covering ordinary controlled search inputs without serializing a function.
+- Imported static collections wrapped in TypeScript-only assertions such as `as const` remain analyzable and erase normally.
+- Collection selector execution caches state reads and avoids recursive rest-array, `slice()`, and `map()` allocation in hot expression paths.
+- Safe keyed rows with local state but no row effects, nested lists, or shared text targets release binding and condition registrations directly by state ID instead of rescanning every removed subtree.
+- Rows outside that proven boundary continue through the existing DOM-owned unmount path.
+- A 21-run alternating fresh-profile benchmark measured the 500-card filter at 13.5 ms for Kudzu and 13.9 ms for React, making Kudzu 2.88% faster and 52.30% faster than its preserved 28.3 ms baseline.
+- The same benchmark measured Kudzu's build 11.90% faster, keyed row toggle 7.02% faster, and emitted JavaScript 87.29% smaller by aggregate gzip.
+- The complete suite passes 118/118 tests, including remove-all, unseen-key remount, and fresh row-state coverage for the indexed release path.
+
+### Boundary
+
+Indexed row release is compiler-selected only when cleanup can be proven from row-owned state IDs and the row has no effects, nested lists, or shared text targets. Effectful, nested, and otherwise lifecycle-bearing rows retain the general ownership cleanup path. Setter adapters remain limited to one supported component boundary and one direct intrinsic handler call. React remains migration input only and is never emitted or executed.
+
+### Upgrade
+
+```bash
+npm install @kudzujs/core@^0.7.26
+```
+
+## 0.7.25 - Router-shaped native navigation
+
+Kudzu 0.7.25 accepts a narrow React Router `useNavigate()` source shape and lowers safe static destinations to native full-document navigation without shipping React Router or adding an SPA runtime.
+
+### New in 0.7.25
+
+- A named or aliased `useNavigate` import may initialize one top-level `const` identifier in a component.
+- Direct calls from nested browser callbacks with one safe static root-relative destination lower to `globalThis.location.assign()`.
+- Exactly `{ replace: true }` lowers to `globalThis.location.replace()`.
+- Configured `base` is applied while query strings and fragments are preserved.
+- The React Router import and navigate binding are erased from emitted component code.
+- Dynamic or relative destinations, render-time calls, passed aliases, optional calls, and other navigation options fail with source diagnostics.
+- Native document navigation remains deliberate even when enhanced navigation is configured.
+- Unaffected destination routes remain complete static documents with zero JavaScript.
+- The complete suite passes 117/117 tests with Chrome coverage for base-aware full-document navigation.
+
+### Boundary
+
+The supported migration shape is one top-level `const navigate = useNavigate()` and direct calls from nested browser callbacks. Destinations must be safe static root-relative strings. Only the absent options argument and exactly `{ replace: true }` are supported; dynamic values, relative paths, deltas, state, relative routing, scroll options, aliases, and render-time calls remain unsupported. No SPA router is included.
+
+### Upgrade
+
+```bash
+npm install @kudzujs/core@^0.7.25
+```
+
 ## 0.7.24 - Router-shaped query reads
 
 Kudzu 0.7.24 accepts a narrow read-only React Router `useSearchParams()` shape and lowers each static query read to a nullable route signal backed by native `URLSearchParams`, without adding a router runtime.

package/framework/README.md

@@ -2,7 +2,7 @@
 
 Kudzu specializes ordinary common React-shaped TSX so migrations need minimal source restructuring. Declarative components, collection pipelines, conditions, hooks, and handlers should be lowered at build time rather than replaced with application-owned imperative DOM code. This principle applies across migrations and is not Stay-specific; it does not imply a React package, VDOM, hydration, or ecosystem runtime.
 
-Migration source may retain conventional `react` imports for supported named or aliased hooks, direct members such as `React.useState`, same-file `memo`, inline `useCallback`, direct-state expression or analyzable collection-pipeline `useMemo`, direct intrinsic `forwardRef`, top-level `const` identifiers initialized by `useId()`, and default, namespace, or named `Fragment`. `forwardRef()` accepts one inline synchronous `(props, ref)` function and requires the object ref exactly once on its direct intrinsic root; the compiler removes `ref` from props/rest and erases the wrapper. `useId()` becomes a deterministic build-time HTML ID and emits no browser capability; keyed rows reject it because cloned row templates cannot safely duplicate HTML IDs. Collection memos may start from local array state or a named relative import of an exported JSON-safe `const` array and may read direct local state declared in their dependency array. `build.mjs` canonicalizes those forms and rewrites module references to `@kudzujs/core` before build-time evaluation. Memo wrappers are erased or inlined into existing bindings and keyed-list selectors because no browser component rerender or memo cache exists. Static routes remain JavaScript-free and emitted modules are checked for surviving React imports.
+Migration source may retain conventional `react` imports for supported named or aliased hooks, direct members such as `React.useState`, same-file `memo`, inline `useCallback`, direct-state expression or analyzable collection-pipeline `useMemo`, direct intrinsic `forwardRef`, top-level `const` identifiers initialized by `useId()`, and default, namespace, or named `Fragment`. Kudzu's JSX declarations accept ReactNode-shaped component returns and contextually type common intrinsic DOM events, so strict React component props do not need migration-only `unknown` or explicit event annotations. `forwardRef()` accepts one inline synchronous `(props, ref)` function and requires the object ref exactly once on its direct intrinsic root; the compiler removes `ref` from props/rest and erases the wrapper. `useId()` becomes a deterministic build-time HTML ID and emits no browser capability; keyed rows reject it because cloned row templates cannot safely duplicate HTML IDs. Collection memos may start from local array state or a named relative import of an exported JSON-safe `const` array, including type-only `as const` and `satisfies` wrappers, and may read direct local state declared in their dependency array. `build.mjs` canonicalizes those forms and rewrites module references to `@kudzujs/core` before build-time evaluation. Memo wrappers are erased or inlined into existing bindings and keyed-list selectors because no browser component rerender or memo cache exists. Static routes remain JavaScript-free and emitted modules are checked for surviving React imports.
 
 A named or aliased `Link` import from `react-router-dom` may render directly with one static root-relative `to` plus native anchor props. The compiler prefixes the configured `base`, changes the element to `<a href>`, and erases the import, so native navigation remains the default and configured navigation groups see an ordinary eligible anchor. Dynamic or relative destinations, `NavLink`, router-only props, spreads, default/namespace imports, and non-JSX uses fail with source diagnostics. No React Router package code or router runtime is emitted.
 
@@ -10,6 +10,8 @@ A named or aliased React Router `useParams` import may also be called directly w
 
 A named or aliased read-only React Router `useSearchParams` import may initialize one top-level `const [params]` binding. Each top-level `const value = params.get("literal")` lowers to one cached nullable `useSearchParam()` signal. The existing parameter asset initializes those signals with native `URLSearchParams.get()` semantics before route effects mount, including during configured same-document navigation. Missing keys remain `null`, direct text renders blank, and nullable attributes are removed. Setter destructuring, dynamic names, other methods, aliases, wrapped reads, and layout ownership are rejected. Routes without query reads do not emit this branch or a parameter asset.
 
+A named or aliased React Router `useNavigate` import may initialize one top-level `const` identifier. A direct call from a nested browser callback with one safe static root-relative string lowers to `location.assign()` after applying `base`; exactly `{ replace: true }` lowers to `location.replace()`. This deliberately performs native document navigation even when enhanced navigation is configured. Dynamic or relative destinations, render-time calls, aliases passed as values, and options such as `state`, `relative`, or `preventScrollReset` are rejected. Routes without an actual navigation handler emit no browser JavaScript.
+
 Direct `clsx` calls over literal strings, numbers, arrays, object conditions, and conditional expressions are similarly lowered to ordinary concatenation and conditional expressions. The package import is erased, and dynamic classes continue through the existing binding compiler without serializing or shipping the `clsx` function.
 
 Repeated ordinary same-file and relative-imported child components execute independently at build time, so each `useState` call receives a distinct concrete state ID while shared native handler modules retain per-element state maps and captures. A direct JSON-safe primitive parent state passed to a destructured child prop remains the same signal for child DOM bindings and effect dependencies; repeated calls own independent effect records, and conditional removal cleans up before remount recreates the effect. Multiple direct primitive dependencies share the existing commit batching path: every value is compared with `Object.is`, and one or more same-turn changes cause one cleanup and rerun. A top-level immutable local derived through a supported pure primitive expression from direct state may also be an effect dependency: source state commits schedule evaluation, the derived result is compared with `Object.is`, and the expression is substituted into setup and cleanup handlers. Effect setup and directly returned cleanup callbacks may each resolve one top-level simple `const` function in the same component; those functions are substituted into the existing handler graph rather than retained in a browser registry. Reactive conditional descriptors own state created by their direct branch: initial visible output reuses the rendered template IDs, removal deletes those slots, and remount recreates them from serialized initial values. Static sibling routes and branches without local state add no ownership metadata, component function, hook dispatcher, or rerender loop.
@@ -45,7 +47,7 @@ Rendered collection selectors compile immutable local aliases and inline `(item)
 
 The reduced `useReducer` form reuses ordinary state slots and React's pure reducer contract. An optional inline, same-file, or relative-imported synchronous one-parameter initializer may derive a directly serializable literal only from its directly serializable initial argument; the compiler substitutes that argument and lowers the call to the ordinary two-argument ownership path. 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 reducer row reads the latest item through the existing list scope and uses the same multiple serializable state, effect, condition, and object-ref specialization as other keyed rows. 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 directly serializable literal defaults and direct intrinsic rest props 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.
 
-An inline or simple `const` setter callback may cross one same-file or relative-imported component boundary when the child forwards it to an event on its direct intrinsic root. A `null`-initialized object ref may cross the same boundary to that root. Both remain compiler-owned descriptors: conditional removal drops the handler with the element and makes the ref resolve to `null`, while remount creates a fresh element without retaining a component instance.
+A direct setter may cross one same-file or relative-imported component boundary when the child invokes it exactly once inside an intrinsic event handler. Inline and simple `const` setter callbacks may use that adapter shape or direct event forwarding. Value adapters such as `event => onValueChange(event.currentTarget.value)` specialize into the parent setter graph instead of serializing a function. A `null`-initialized object ref may cross the same boundary to the direct intrinsic root. Both remain compiler-owned descriptors: conditional removal drops the handler with the element and makes the ref resolve to `null`, while remount creates a fresh element without retaining a component instance.
 
 `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

@@ -1,4 +1,4 @@
-import { browserState, mountDom, registerCommitter, registerMountHook, registerUnmountHook, unmountDom } from "./shared-runtime.js"
+import { browserState, mountDom, registerCommitter, registerMountHook, registerStateReleaseHook, registerUnmountHook, releaseState, unmountDom } from "./shared-runtime.js"
 import { deserialize } from "./serialization.js"
 import { serializeStyle } from "./style.js"
 
@@ -63,6 +63,7 @@ registerMountHook(mountBindings)
 registerMountHook(mountConditions)
 registerUnmountHook(unmountBindings)
 registerUnmountHook(unmountConditions)
+registerStateReleaseHook(releaseBindings)
 
 if (typeof document !== "undefined") mountDom(document)
 
@@ -195,6 +196,21 @@ function unmountConditions(root) {
   }
 }
 
+function releaseBindings(id) {
+  for (const binding of bindingTargets.get(id) ?? []) {
+    for (const [bindingId, entry] of bindingRegistrations.get(binding.node) ?? []) bindingTargets.get(bindingId)?.delete(entry)
+    bindingRegistrations.delete(binding.node)
+  }
+  bindingTargets.delete(id)
+  for (const condition of conditionTargets.get(id) ?? []) {
+    const registration = conditionRegistrations.get(condition.start)
+    for (const [conditionId, entry] of registration?.registrations ?? []) conditionTargets.get(conditionId)?.delete(entry)
+    unmountConditionStates(condition, condition.current === "true")
+    conditionRegistrations.delete(condition.start)
+  }
+  conditionTargets.delete(id)
+}
+
 function mountConditionStates(condition, truthy, replace) {
   for (const [id, initialValue] of condition.owned?.[truthy ? "true" : "false"] ?? []) {
     if (replace || !browserState.has(id)) browserState.set(id, initialValue !== null && typeof initialValue === "object" ? structuredClone(initialValue) : initialValue)
@@ -202,7 +218,7 @@ function mountConditionStates(condition, truthy, replace) {
 }
 
 function unmountConditionStates(condition, truthy) {
-  for (const [id] of condition.owned?.[truthy ? "true" : "false"] ?? []) browserState.delete(id)
+  for (const [id] of condition.owned?.[truthy ? "true" : "false"] ?? []) releaseState(id)
 }
 
 function removeConditionRange(start, end, mount) {

package/framework/build.mjs

@@ -1788,15 +1788,16 @@ function normalizeReactRouterSyntax(sourceFile, factory, context, base) {
   const links = new Set()
   const params = new Set()
   const searchHooks = new Set()
+  const navigateHooks = new Set()
   for (const statement of sourceFile.statements) {
     if ((ts.isExportDeclaration(statement) || ts.isImportDeclaration(statement)) && ts.isStringLiteral(statement.moduleSpecifier) && statement.moduleSpecifier.text === "react-router-dom") {
       if (ts.isExportDeclaration(statement)) throw sourceNodeError(statement, sourceFile, "React Router exports are not supported; import Link directly where it renders")
       const clause = statement.importClause
       if (clause?.isTypeOnly) continue
       if (!clause) throw sourceNodeError(statement, sourceFile, "Side-effect React Router imports are not supported")
-      if (clause.name) throw sourceNodeError(clause.name, sourceFile, "React Router default imports are not supported; use named Link, useParams, or useSearchParams imports")
+      if (clause.name) throw sourceNodeError(clause.name, sourceFile, "React Router default imports are not supported; use named Link, useParams, useSearchParams, or useNavigate imports")
       const bindings = clause.namedBindings
-      if (!bindings || ts.isNamespaceImport(bindings)) throw sourceNodeError(bindings ?? statement, sourceFile, "React Router namespace imports are not supported; use named Link, useParams, or useSearchParams imports")
+      if (!bindings || ts.isNamespaceImport(bindings)) throw sourceNodeError(bindings ?? statement, sourceFile, "React Router namespace imports are not supported; use named Link, useParams, useSearchParams, or useNavigate imports")
       for (const entry of bindings.elements) {
         if (entry.isTypeOnly) continue
         const imported = (entry.propertyName ?? entry.name).text
@@ -1804,11 +1805,12 @@ function normalizeReactRouterSyntax(sourceFile, factory, context, base) {
         if (imported === "Link") links.add(entry.name.text)
         else if (imported === "useParams") params.add(entry.name.text)
         else if (imported === "useSearchParams") searchHooks.add(entry.name.text)
-        else throw sourceNodeError(entry, sourceFile, `React Router ${imported} is not supported; only named Link, useParams, and useSearchParams imports can be lowered`)
+        else if (imported === "useNavigate") navigateHooks.add(entry.name.text)
+        else throw sourceNodeError(entry, sourceFile, `React Router ${imported} is not supported; only named Link, useParams, useSearchParams, and useNavigate imports can be lowered`)
       }
     }
   }
-  if (!links.size && !params.size && !searchHooks.size) return sourceFile
+  if (!links.size && !params.size && !searchHooks.size && !navigateHooks.size) return sourceFile
 
   let searchHelper = "__kUseSearchParam"
   while (sourceFile.text.includes(searchHelper)) searchHelper += "_"
@@ -1831,7 +1833,7 @@ function normalizeReactRouterSyntax(sourceFile, factory, context, base) {
     ts.forEachChild(node, collectSearchHooks)
   }
   collectSearchHooks(sourceFile)
-  const searchObjectShadowed = (node, entry) => {
+  const localBindingShadowed = (node, entry) => {
     for (let current = node.parent; current && current !== entry.owner; current = current.parent) {
       if (isFunctionLike(current) && (current.parameters.some(parameter => bindingNames(parameter.name).includes(entry.name)) || functionVarDeclaresName(current, entry.name))) return true
       if (ts.isBlock(current) && current.statements.some(statement => statement !== entry.statement && statementDeclaresName(statement, entry.name))) return true
@@ -1843,7 +1845,7 @@ function normalizeReactRouterSyntax(sourceFile, factory, context, base) {
   }
   for (const entry of searchObjects) {
     const collectReads = node => {
-      if (ts.isIdentifier(node) && node.text === entry.name && isReferenceIdentifier(node) && !searchObjectShadowed(node, entry)) {
+      if (ts.isIdentifier(node) && node.text === entry.name && isReferenceIdentifier(node) && !localBindingShadowed(node, entry)) {
         const property = node.parent
         const call = property?.parent
         const declaration = call?.parent
@@ -1862,6 +1864,55 @@ function normalizeReactRouterSyntax(sourceFile, factory, context, base) {
     collectReads(entry.owner.body)
   }
 
+  const navigateDeclarations = new Set()
+  const navigateCalls = new Map()
+  const navigateFunctions = []
+  const collectNavigateHooks = node => {
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && navigateHooks.has(node.expression.text) && !isShadowedIdentifier(node.expression, sourceFile)) {
+      const declaration = node.parent
+      const statement = declaration?.parent?.parent
+      const owner = nearestFunction(node)
+      if (node.questionDotToken || node.arguments.length || node.typeArguments?.length || !ts.isVariableDeclaration(declaration) || declaration.initializer !== node || !ts.isIdentifier(declaration.name) || !isLocalConst(declaration) || !owner || statement?.parent !== owner.body) {
+        throw sourceNodeError(node, sourceFile, "React Router useNavigate must initialize one top-level const identifier in a component")
+      }
+      const entry = { name: declaration.name.text, declaration, statement, owner }
+      navigateDeclarations.add(declaration)
+      navigateFunctions.push(entry)
+    }
+    ts.forEachChild(node, collectNavigateHooks)
+  }
+  collectNavigateHooks(sourceFile)
+  for (const entry of navigateFunctions) {
+    const collectCalls = node => {
+      if (ts.isIdentifier(node) && node.text === entry.name && isReferenceIdentifier(node) && !localBindingShadowed(node, entry)) {
+        const call = node.parent
+        if (!ts.isCallExpression(call) || call.expression !== node || call.questionDotToken || call.typeArguments?.length || nearestFunction(call) === entry.owner) {
+          throw sourceNodeError(node, sourceFile, "React Router navigate bindings may only be called directly from a nested browser callback")
+        }
+        if (call.arguments.length < 1 || call.arguments.length > 2 || !ts.isStringLiteral(call.arguments[0])) {
+          throw sourceNodeError(call, sourceFile, 'React Router useNavigate requires a static root-relative navigate("/path") destination')
+        }
+        const destination = call.arguments[0].text
+        const pathname = destination.match(/^[^?#]*/)[0]
+        let decoded
+        try { decoded = decodeURIComponent(pathname) } catch { throw sourceNodeError(call.arguments[0], sourceFile, 'React Router useNavigate requires a safe static root-relative navigate("/path") destination') }
+        if (!destination.startsWith("/") || destination.startsWith("//") || /%(?:2f|5c)/i.test(pathname) || /[\\\0]/.test(decoded) || decoded.split("/").includes("..") || [...decoded].some(character => character.charCodeAt(0) < 32 || character.charCodeAt(0) >= 127 && character.charCodeAt(0) <= 159)) throw sourceNodeError(call.arguments[0], sourceFile, 'React Router useNavigate requires a safe static root-relative navigate("/path") destination')
+        let method = "assign"
+        if (call.arguments.length === 2) {
+          const options = unwrapExpression(call.arguments[1])
+          const property = ts.isObjectLiteralExpression(options) && options.properties.length === 1 ? options.properties[0] : undefined
+          const name = property && ts.isPropertyAssignment(property) && !ts.isComputedPropertyName(property.name) && (ts.isIdentifier(property.name) || ts.isStringLiteral(property.name)) ? property.name.text : undefined
+          if (name !== "replace" || property.initializer.kind !== ts.SyntaxKind.TrueKeyword) throw sourceNodeError(call.arguments[1], sourceFile, 'React Router useNavigate only supports exactly { replace: true } as a second argument')
+          method = "replace"
+        }
+        navigateCalls.set(call, { method, destination: withBase(base, destination) })
+        return
+      }
+      ts.forEachChild(node, collectCalls)
+    }
+    collectCalls(entry.owner.body)
+  }
+
   const routerProps = new Set(["discover", "end", "prefetch", "preventScrollReset", "relative", "reloadDocument", "replace", "state", "viewTransition"])
   const attributes = attributesNode => {
     const output = []
@@ -1889,12 +1940,16 @@ function normalizeReactRouterSyntax(sourceFile, factory, context, base) {
   }
   const importedLink = tag => ts.isIdentifier(tag) && links.has(tag.text) && !isShadowedIdentifier(tag, sourceFile)
   const visitor = node => {
-    if (ts.isVariableStatement(node) && node.declarationList.declarations.some(declaration => searchDeclarations.has(declaration))) {
-      const declarations = node.declarationList.declarations.filter(declaration => !searchDeclarations.has(declaration))
+    if (ts.isVariableStatement(node) && node.declarationList.declarations.some(declaration => searchDeclarations.has(declaration) || navigateDeclarations.has(declaration))) {
+      const declarations = node.declarationList.declarations.filter(declaration => !searchDeclarations.has(declaration) && !navigateDeclarations.has(declaration))
       if (!declarations.length) return undefined
       return factory.updateVariableStatement(node, node.modifiers, factory.updateVariableDeclarationList(node.declarationList, declarations.map(declaration => ts.visitEachChild(declaration, visitor, context))))
     }
     if (ts.isCallExpression(node) && searchReads.has(node)) return factory.createCallExpression(factory.createIdentifier(searchHelper), undefined, [searchReads.get(node)])
+    if (ts.isCallExpression(node) && navigateCalls.has(node)) {
+      const { method, destination } = navigateCalls.get(node)
+      return factory.createCallExpression(factory.createPropertyAccessExpression(factory.createPropertyAccessExpression(factory.createIdentifier("globalThis"), "location"), method), undefined, [factory.createStringLiteral(destination)])
+    }
     if (ts.isJsxElement(node) && importedLink(node.openingElement.tagName)) {
       const opening = factory.updateJsxOpeningElement(node.openingElement, factory.createIdentifier("a"), node.openingElement.typeArguments, attributes(node.openingElement.attributes))
       const closing = factory.updateJsxClosingElement(node.closingElement, factory.createIdentifier("a"))
@@ -1908,12 +1963,13 @@ function normalizeReactRouterSyntax(sourceFile, factory, context, base) {
     if (ts.isIdentifier(node) && links.has(node.text) && isReferenceIdentifier(node) && !isShadowedIdentifier(node, sourceFile)) throw sourceNodeError(node, sourceFile, "React Router Link imports may only be used as direct JSX elements")
     if (ts.isIdentifier(node) && params.has(node.text) && isReferenceIdentifier(node) && !isShadowedIdentifier(node, sourceFile)) throw sourceNodeError(node, sourceFile, "React Router useParams imports may only be called directly")
     if (ts.isIdentifier(node) && searchHooks.has(node.text) && isReferenceIdentifier(node) && !isShadowedIdentifier(node, sourceFile)) throw sourceNodeError(node, sourceFile, "React Router useSearchParams imports may only be used by the supported read-only pattern")
+    if (ts.isIdentifier(node) && navigateHooks.has(node.text) && isReferenceIdentifier(node) && !isShadowedIdentifier(node, sourceFile)) throw sourceNodeError(node, sourceFile, "React Router useNavigate imports may only initialize the supported top-level navigate binding")
     if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text === "react-router-dom") {
       const clause = node.importClause
       if (!clause || clause.isTypeOnly) return node
       const bindings = clause.namedBindings
       if (!bindings || !ts.isNamedImports(bindings)) return node
-      const elements = bindings.elements.filter(entry => entry.isTypeOnly || !["Link", "useParams", "useSearchParams"].includes((entry.propertyName ?? entry.name).text))
+      const elements = bindings.elements.filter(entry => entry.isTypeOnly || !["Link", "useParams", "useSearchParams", "useNavigate"].includes((entry.propertyName ?? entry.name).text))
       if (!elements.length) return undefined
       return factory.updateImportDeclaration(node, node.modifiers, factory.updateImportClause(clause, clause.isTypeOnly, undefined, factory.updateNamedImports(bindings, elements)), node.moduleSpecifier, node.attributes)
     }
@@ -2786,6 +2842,45 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         stateBackedComponentRoots.push(specialization.root)
       }
     }
+    const specializeSetterCallbacks = (call, component, callbackProps, imported) => {
+      if (componentSpecializations.has(call)) fail(call, "Setter callback props cannot be combined with another component specialization")
+      if (component.parameters.length !== 1 || !ts.isObjectBindingPattern(component.parameters[0].name)) fail(component, "Setter-callback components must use one destructured props parameter")
+      for (const prop of callbackProps) {
+        const element = component.parameters[0].name.elements.find(entry => !entry.dotDotDotToken && (entry.propertyName ?? entry.name).getText() === prop)
+        if (!element || !ts.isIdentifier(element.name)) fail(call, `Setter-callback component must destructure callback prop ${JSON.stringify(prop)}`)
+        const references = []
+        const collectReferences = node => {
+          if (ts.isIdentifier(node) && node.text === element.name.text && isReferenceIdentifier(node)) references.push(node)
+          ts.forEachChild(node, collectReferences)
+        }
+        collectReferences(component.body)
+        if (references.length !== 1) fail(element, `Setter-callback prop ${JSON.stringify(prop)} must be used exactly once in the component`)
+      }
+      const specialization = specializeComponentCall(call, component, sourceFile, factory, context, fail, "Setter-callback")
+      if (specialization.effects.length || specialization.hookDeclarations.length) fail(call, "Setter-callback components cannot declare hooks")
+      if (imported) synthesizeTree(specialization.root = mergeSpecializedImports(specialization.root, component.getSourceFile(), call, specialization.effects))
+      componentSpecializations.set(call, specialization)
+    }
+    for (const [name, component] of components) {
+      for (const call of jsxTagUses(sourceFile, name)) {
+        const callbackProps = jsxSetterCallbackProps(call, settersByFunction.get(nearestFunction(call)) ?? new Map(), functions, reducersForNode(call, reducersByFunction))
+        if (callbackProps.length) specializeSetterCallbacks(call, component.function, callbackProps, false)
+      }
+    }
+    for (const [name, binding] of importBindings) {
+      if (binding.kind === "namespace") continue
+      const calls = jsxTagUses(sourceFile, name)
+      const callbackCalls = calls.map(call => ({ call, callbackProps: jsxSetterCallbackProps(call, settersByFunction.get(nearestFunction(call)) ?? new Map(), functions, reducersForNode(call, reducersByFunction)) })).filter(entry => entry.callbackProps.length)
+      if (!callbackCalls.length) continue
+      const imported = binding.kind === "default" ? "default" : binding.imported
+      let component
+      try {
+        component = resolveComponentExport(binding.target, imported, importedSource, sourceFiles)
+      } catch {
+        fail(callbackCalls[0].call, "Setter callback props require a component imported from a relative TypeScript module")
+      }
+      for (const { call, callbackProps } of callbackCalls) specializeSetterCallbacks(call, component, callbackProps, true)
+    }
     for (const [name, component] of components) {
       const calls = jsxTagUses(sourceFile, name)
       const dispatchCalls = calls.filter(call => jsxCallHasDirectReducerProp(call, reducersForNode(call, reducersByFunction)))
@@ -3663,6 +3758,17 @@ function jsxCallHasDirectStateProp(call, setters) {
   })
 }
 
+function jsxSetterCallbackProps(call, setters, functions, reducers) {
+  const attributes = ts.isJsxElement(call) ? call.openingElement.attributes : call.attributes
+  return attributes.properties.flatMap(attribute => {
+    if (!ts.isJsxAttribute(attribute) || !/^on[A-Z]/.test(attribute.name.text) || !attribute.initializer || !ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression) return []
+    const value = unwrapExpression(attribute.initializer.expression)
+    if (ts.isIdentifier(value) && setters.has(value.text)) return [attribute.name.text]
+    const callback = ts.isArrowFunction(value) || ts.isFunctionExpression(value) ? value : ts.isIdentifier(value) ? functions.get(value.text) : undefined
+    return callback && !nativeCaptureNames(callback, setters).size && !referencedReducerDispatches(callback.body, reducers, callback).size && referencedStateNames(callback.body, setters, callback).size ? [attribute.name.text] : []
+  })
+}
+
 function jsxCallHasDirectReducerProp(call, reducers) {
   const attributes = ts.isJsxElement(call) ? call.openingElement.attributes : call.attributes
   return attributes.properties.some(attribute => {
@@ -4348,7 +4454,7 @@ function identifierReferences(root, name) {
 }
 
 function unwrapExpression(node) {
-  return ts.isParenthesizedExpression(node) ? unwrapExpression(node.expression) : node
+  return ts.isParenthesizedExpression(node) || ts.isAsExpression(node) || ts.isTypeAssertionExpression(node) || ts.isNonNullExpression(node) || ts.isSatisfiesExpression(node) ? unwrapExpression(node.expression) : node
 }
 
 function isLocalConst(node) {
@@ -4656,6 +4762,7 @@ function isReferenceIdentifier(node) {
       (ts.isVariableDeclaration(parent) && parent.name === node) ||
       (ts.isParameter(parent) && parent.name === node) ||
       (ts.isFunctionDeclaration(parent) && parent.name === node) ||
+      (ts.isJsxAttribute(parent) && parent.name === node) ||
       (ts.isBindingElement(parent) && (parent.name === node || parent.propertyName === node)) ||
       ts.isImportSpecifier(parent) || ts.isImportClause(parent)) return false
   return true

package/framework/collection-selector.js

@@ -1,13 +1,18 @@
 export function selectCollection(anchor, selector = [], readState) {
   let values = anchor == null ? [] : anchor
+  const state = readState ? new Map() : undefined
+  const read = state ? name => {
+    if (!state.has(name)) state.set(name, readState(name))
+    return state.get(name)
+  } : undefined
   for (const operation of selector) {
-    if (operation[0] === "from") values = Array.from(values, operation[1] ? (item, index) => evaluateCollectionExpression(operation[1], item, index, readState) : undefined)
+    if (operation[0] === "from") values = Array.from(values, operation[1] ? (item, index) => evaluateCollectionExpression(operation[1], item, index, read) : undefined)
     else {
       if (!Array.isArray(values)) throw new Error("Rendered collection source must remain an array")
-      if (operation[0] === "filter") values = values.filter((item, index) => evaluateCollectionExpression(operation[1], item, index, readState))
+      if (operation[0] === "filter") values = values.filter((item, index) => evaluateCollectionExpression(operation[1], item, index, read))
       else if (operation[0] === "flatMap") values = values.flatMap(item => item?.[operation[1]] ?? [])
-      else if (operation[0] === "slice") values = values.slice(evaluateCollectionExpression(operation[1], undefined, undefined, readState), operation[2] && evaluateCollectionExpression(operation[2], undefined, undefined, readState))
-      else if (operation[0] === "sort") values = [...values].sort((left, right) => evaluateCollectionExpression(operation[1], left, right, readState))
+      else if (operation[0] === "slice") values = values.slice(evaluateCollectionExpression(operation[1], undefined, undefined, read), operation[2] && evaluateCollectionExpression(operation[2], undefined, undefined, read))
+      else if (operation[0] === "sort") values = [...values].sort((left, right) => evaluateCollectionExpression(operation[1], left, right, read))
     }
   }
   if (!Array.isArray(values)) throw new Error("Rendered collection source must remain an array")
@@ -15,55 +20,63 @@ export function selectCollection(anchor, selector = [], readState) {
 }
 
 export function evaluateCollectionExpression(expression, item, index, readState) {
-  const [kind, ...parts] = expression
-  if (kind === "value") return parts[0]
+  const kind = expression[0]
+  if (kind === "value") return expression[1]
   if (kind === "undefined") return undefined
   if (kind === "item") return item
   if (kind === "index") return index
   if (kind === "state") {
-    if (!readState) throw new Error(`Rendered collection state ${JSON.stringify(parts[0])} is not available`)
-    return readState(parts[0])
+    if (!readState) throw new Error(`Rendered collection state ${JSON.stringify(expression[1])} is not available`)
+    return readState(expression[1])
   }
   if (kind === "get") {
-    const object = evaluateCollectionExpression(parts[0], item, index, readState)
-    return object == null && parts[2] ? undefined : object[parts[1]]
+    const object = evaluateCollectionExpression(expression[1], item, index, readState)
+    return object == null && expression[3] ? undefined : object[expression[2]]
   }
   if (kind === "unary") {
-    const value = evaluateCollectionExpression(parts[1], item, index, readState)
-    if (parts[0] === "!") return !value
-    if (parts[0] === "+") return +value
-    if (parts[0] === "-") return -value
-    if (parts[0] === "typeof") return typeof value
+    const value = evaluateCollectionExpression(expression[2], item, index, readState)
+    if (expression[1] === "!") return !value
+    if (expression[1] === "+") return +value
+    if (expression[1] === "-") return -value
+    if (expression[1] === "typeof") return typeof value
   }
   if (kind === "binary") {
-    const left = evaluateCollectionExpression(parts[1], item, index, readState)
-    if (parts[0] === "&&") return left && evaluateCollectionExpression(parts[2], item, index, readState)
-    if (parts[0] === "||") return left || evaluateCollectionExpression(parts[2], item, index, readState)
-    if (parts[0] === "??") return left ?? evaluateCollectionExpression(parts[2], item, index, readState)
-    const right = evaluateCollectionExpression(parts[2], item, index, readState)
-    if (parts[0] === "===") return left === right
-    if (parts[0] === "!==") return left !== right
-    if (parts[0] === "==") return left == right
-    if (parts[0] === "!=") return left != right
-    if (parts[0] === "<") return left < right
-    if (parts[0] === "<=") return left <= right
-    if (parts[0] === ">") return left > right
-    if (parts[0] === ">=") return left >= right
-    if (parts[0] === "+") return left + right
-    if (parts[0] === "-") return left - right
-    if (parts[0] === "*") return left * right
-    if (parts[0] === "/") return left / right
-    if (parts[0] === "%") return left % right
+    const operator = expression[1]
+    const left = evaluateCollectionExpression(expression[2], item, index, readState)
+    if (operator === "&&") return left && evaluateCollectionExpression(expression[3], item, index, readState)
+    if (operator === "||") return left || evaluateCollectionExpression(expression[3], item, index, readState)
+    if (operator === "??") return left ?? evaluateCollectionExpression(expression[3], item, index, readState)
+    const right = evaluateCollectionExpression(expression[3], item, index, readState)
+    if (operator === "===") return left === right
+    if (operator === "!==") return left !== right
+    if (operator === "==") return left == right
+    if (operator === "!=") return left != right
+    if (operator === "<") return left < right
+    if (operator === "<=") return left <= right
+    if (operator === ">") return left > right
+    if (operator === ">=") return left >= right
+    if (operator === "+") return left + right
+    if (operator === "-") return left - right
+    if (operator === "*") return left * right
+    if (operator === "/") return left / right
+    if (operator === "%") return left % right
   }
-  if (kind === "conditional") return evaluateCollectionExpression(parts[0], item, index, readState) ? evaluateCollectionExpression(parts[1], item, index, readState) : evaluateCollectionExpression(parts[2], item, index, readState)
-  if (kind === "array") return parts.map(value => evaluateCollectionExpression(value, item, index, readState))
-  if (kind === "object") return Object.fromEntries(parts.map(([key, value]) => [key, evaluateCollectionExpression(value, item, index, readState)]))
-  if (kind === "template") return parts[0].map((text, offset) => text + (offset < parts[1].length ? evaluateCollectionExpression(parts[1][offset], item, index, readState) : "")).join("")
+  if (kind === "conditional") return evaluateCollectionExpression(expression[1], item, index, readState) ? evaluateCollectionExpression(expression[2], item, index, readState) : evaluateCollectionExpression(expression[3], item, index, readState)
+  if (kind === "array") return expression.slice(1).map(value => evaluateCollectionExpression(value, item, index, readState))
+  if (kind === "object") return Object.fromEntries(expression.slice(1).map(([key, value]) => [key, evaluateCollectionExpression(value, item, index, readState)]))
+  if (kind === "template") return expression[1].map((text, offset) => text + (offset < expression[2].length ? evaluateCollectionExpression(expression[2][offset], item, index, readState) : "")).join("")
   if (kind === "call") {
-    const receiver = evaluateCollectionExpression(parts[0], item, index, readState)
-    return receiver[parts[1]](...parts.slice(2).map(value => evaluateCollectionExpression(value, item, index, readState)))
+    const receiver = evaluateCollectionExpression(expression[1], item, index, readState)
+    if (expression.length === 3) return receiver[expression[2]]()
+    if (expression.length === 4) return receiver[expression[2]](evaluateCollectionExpression(expression[3], item, index, readState))
+    const arguments_ = new Array(expression.length - 3)
+    for (let offset = 3; offset < expression.length; offset++) arguments_[offset - 3] = evaluateCollectionExpression(expression[offset], item, index, readState)
+    return receiver[expression[2]](...arguments_)
+  }
+  if (kind === "global" || kind === "math") {
+    const arguments_ = new Array(expression.length - 2)
+    for (let offset = 2; offset < expression.length; offset++) arguments_[offset - 2] = evaluateCollectionExpression(expression[offset], item, index, readState)
+    return (kind === "global" ? globalThis : Math)[expression[1]](...arguments_)
   }
-  if (kind === "global") return globalThis[parts[0]](...parts.slice(1).map(value => evaluateCollectionExpression(value, item, index, readState)))
-  if (kind === "math") return Math[parts[0]](...parts.slice(1).map(value => evaluateCollectionExpression(value, item, index, readState)))
   throw new Error(`Unsupported rendered collection expression: ${String(kind)}`)
 }

package/framework/core.mjs

@@ -908,6 +908,7 @@ async function renderList(node, namespace, selectValue) {
       descriptor.rowRefs = renderContext.listRowRefs.map(({ id }) => id)
       descriptor.mount = true
     }
+    if (descriptor.rowStates && !descriptor.effects && !descriptor.nested && !template.includes("data-k-text")) descriptor.fastRelease = true
     const seed = node.ownerField || node.selector.length || node.keyField === null ? undefined : listSeed(node.values, renderContext.listFields)
     if (seed) descriptor.seed = seed
     let current = ""

package/framework/jsx-runtime.d.ts

@@ -1,12 +1,33 @@
 export namespace JSX {
-  type Element = unknown
+  type Element = any
   type Children = unknown
 
+  type TargetedEvent<Target extends EventTarget, NativeEvent extends Event = Event> = NativeEvent & {
+    currentTarget: Target
+    target: EventTarget & Target
+  }
+
+  type IntrinsicProps<Target extends EventTarget> = Record<string, unknown> & {
+    children?: Children
+    onBlur?: (event: TargetedEvent<Target, FocusEvent>) => unknown
+    onChange?: (event: TargetedEvent<Target>) => unknown
+    onClick?: (event: TargetedEvent<Target, MouseEvent>) => unknown
+    onFocus?: (event: TargetedEvent<Target, FocusEvent>) => unknown
+    onInput?: (event: TargetedEvent<Target, InputEvent>) => unknown
+    onKeyDown?: (event: TargetedEvent<Target, KeyboardEvent>) => unknown
+    onKeyUp?: (event: TargetedEvent<Target, KeyboardEvent>) => unknown
+    onSubmit?: (event: TargetedEvent<Target, SubmitEvent>) => unknown
+  }
+
   interface IntrinsicAttributes {
     key?: string | number
   }
 
-  interface IntrinsicElements {
+  type IntrinsicElements = {
+    [Name in keyof HTMLElementTagNameMap]: IntrinsicProps<HTMLElementTagNameMap[Name]>
+  } & {
+    [Name in keyof SVGElementTagNameMap]: IntrinsicProps<SVGElementTagNameMap[Name]>
+  } & {
     [elementName: string]: Record<string, unknown>
   }
 }

package/framework/list-runtime.js

@@ -1,4 +1,4 @@
-import { browserState, mountDom, notifyListItem, registerCommitter, registerMountHook, registerUnmountHook, unmountDom } from "./shared-runtime.js"
+import { browserState, mountDom, notifyListItem, registerCommitter, registerMountHook, registerUnmountHook, releaseState, unmountDom } from "./shared-runtime.js"
 import { selectCollection } from "./collection-selector.js"
 
 const listTargets = new Map()
@@ -219,7 +219,8 @@ function updateList(list) {
   }
   for (const [token, node] of list.roots) {
     if (keys.has(token)) continue
-    if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) {
+    if (list.descriptor.fastRelease) node.remove()
+    else if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) {
       unmountDom(node)
       node.remove()
     } else node.remove()
@@ -565,7 +566,7 @@ function addListRoot(list, { item, index = list.roots.size, key, token, value })
 
 function removeListRoot(list, token) {
   const node = list.roots.get(token)
-  if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) unmountDom(node)
+  if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount && !list.descriptor.fastRelease) unmountDom(node)
   node.remove()
   if (__KUDZU_LIST_ROW_HOOKS__ && list.descriptor.rowStates) deleteRowStates(list.descriptor, ownershipPaths.get(node))
   list.roots.delete(token)
@@ -1035,7 +1036,7 @@ function initializeRowStates(descriptor, key, root) {
 }
 
 function deleteFlatRowStates(descriptor, token) {
-  for (const state of descriptor.rowStates) browserState.delete(flatRowStateId(state.id, token))
+  for (const state of descriptor.rowStates) releaseState(flatRowStateId(state.id, token))
 }
 
 function flatRowStateId(id, token) {
@@ -1044,7 +1045,7 @@ function flatRowStateId(id, token) {
 
 function deleteRowStates(descriptor, path) {
   const statePath = descriptor.ownerField ? path : [path.at(-1).slice(path.at(-1).indexOf("=") + 1)]
-  for (const state of descriptor.rowStates) browserState.delete(rowStateId(state.id, statePath))
+  for (const state of descriptor.rowStates) releaseState(rowStateId(state.id, statePath))
 }
 function rowStateId(id, path) {
   return id.replace("$k", encodeURIComponent(path.join("/")))

package/framework/shared-runtime.js

@@ -26,6 +26,7 @@ export const browserState = new Map()
 const committers = []
 const mountHooks = []
 const unmountHooks = []
+const stateReleaseHooks = []
 const textTargets = new Map()
 const mountedText = new WeakSet()
 
@@ -59,6 +60,15 @@ export function registerUnmountHook(unmount) {
   unmountHooks.push(unmount)
 }
 
+export function registerStateReleaseHook(release) {
+  stateReleaseHooks.push(release)
+}
+
+export function releaseState(id) {
+  for (const release of stateReleaseHooks) release(id)
+  browserState.delete(id)
+}
+
 export function commitDom(id, value) {
   for (const node of textTargets.get(id) ?? []) {
     if (node.isConnected) node.textContent = value

package/package.json

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