@kudzujs/core 0.7.20 → 0.7.22

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.20 - Computed child collections.** A block-bodied keyed `map` callback may compute one direct child collection through the supported pure selector pipeline and use it as a nested keyed list source. Read the [release notes](./RELEASES.md#0720---computed-child-collections) or open the [release page](https://kudzujs.cloud/releases/0.7.20).
+**Latest release: 0.7.22 - SVG structures and native links.** Reactive SVG conditionals and flat keyed lists preserve their namespace, while supported React Router `Link` authoring erases to base-aware native anchors with zero router runtime. Read the [release notes](./RELEASES.md#0722---svg-structures-and-native-links) or open the [release page](https://kudzujs.cloud/releases/0.7.22).
 
 - [Documentation](https://kudzujs.cloud/docs)
 - [Installation guide](https://kudzujs.cloud/docs#install)
@@ -82,6 +82,7 @@ ordinary React-shaped TSX
 - 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.
 - 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.
 - 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.22 - SVG structures and native links
+
+Kudzu 0.7.22 extends ordinary React-shaped structural authoring into SVG and erases the common React Router `Link` form to native navigation without adding an SVG renderer or router runtime.
+
+### New in 0.7.22
+
+- Reactive conditional branches inside SVG parse replacement markup in the actual SVG parent context and retain existing DOM ownership semantics.
+- Flat intrinsic keyed lists inside SVG support add, update, reorder, and removal while preserving keyed identity and the SVG namespace.
+- SVG fragment construction is compiled out of HTML-only condition and list builds; the measured matched fixture added 333 B raw / 79 B aggregate gzip JavaScript.
+- A named or aliased `Link` import from `react-router-dom` with one static root-relative `to` lowers to a native `<a href>`, receives the configured `base`, and erases the package import.
+- Dynamic or relative Link destinations, traversal, `NavLink`, router-only props, spreads, default/namespace imports, and non-JSX uses fail with source diagnostics.
+- Effect dependency arrays are explicitly proven for multiple direct primitive states or supported props through existing commit batching and `Object.is` comparison.
+- The complete suite passes 111/111 tests with Chrome coverage for SVG namespace, conditional replacement, keyed identity, Link erasure, and zero-JavaScript static output.
+
+### Measured fixture
+
+On the recorded Intel i5-9500 / Chrome 142 environment, 1,000-row SVG medians were 0.8 ms conditional, 1.9 ms update, 8.3 ms reverse, 2.4 ms remove, and 3.5 ms add. The matched HTML control measured 0.7, 1.8, 8.3, 2.5, and 3.6 ms. Link and native-anchor controls emitted byte-identical 248 B HTML and zero JavaScript. Full methodology and raw arrays are in `PERFORMANCE.md`.
+
+### Boundary
+
+Structural SVG currently supports reactive conditionals and flat intrinsic keyed lists. Keyed-item conditions, nested SVG lists, reactive MathML, and namespaced attributes remain unsupported. React Router lowering accepts only direct named or aliased `Link` JSX with one safe static root-relative destination and native anchor props. Native document navigation remains the default; no SPA router is included.
+
+### Upgrade
+
+```bash
+npm install @kudzujs/core@^0.7.22
+```
+
+## 0.7.21 - Composable collections and effects
+
+Kudzu 0.7.21 expands ordinary React-shaped collection pipelines and effect authoring while preserving keyed identity, derived dependency semantics, and capability-specific browser output.
+
+### New in 0.7.21
+
+- A relative-imported named or default synchronous one-parameter function may directly return a supported pure collection pipeline; Kudzu composes its selector without executing or shipping the function.
+- Immutable `slice(start, end?)` accepts numeric literals and supported direct primitive state expressions for bounded pagination.
+- Pure `filter` predicates may combine direct primitive state with supported string methods for reactive search.
+- Expression-bodied `toSorted((left, right) => ...)` comparators compile into immutable selector sorting; mutating `sort()` fails with a source diagnostic.
+- A top-level immutable primitive local derived from direct state may appear in an effect dependency array. Source commits schedule comparison, but unchanged derived results do not rerun the effect.
+- Derived expressions are substituted into setup and cleanup handlers, so reruns and final disposal observe the latest value.
+- Same-component top-level simple `const` setup and directly returned cleanup functions are statically substituted into effect handlers; indirect aliases remain unsupported.
+- The complete suite passes 107/107 tests with browser coverage for pagination, search, sorted identity, derived equality, cleanup order, and named effect functions.
+
+### Boundary
+
+Collection transforms must be relative, synchronous, capture-free, one-parameter functions with one returned supported pipeline. Slice bounds and sort comparators reject arbitrary calls; `sort()` remains unsupported. Derived effect locals must be pure primitive expressions over direct state. Effect function references must be direct top-level `const` functions in the same component; dynamic selection, parameters, and cross-component references remain unsupported.
+
+### Upgrade
+
+```bash
+npm install @kudzujs/core@^0.7.21
+```
+
 ## 0.7.20 - Computed child collections
 
 Kudzu 0.7.20 accepts a common block-bodied keyed `map` callback that computes one direct child collection before returning JSX, without executing arbitrary callback code or adding a browser runtime path.

package/framework/README.md

@@ -4,9 +4,11 @@ Kudzu specializes ordinary common React-shaped TSX so migrations need minimal so
 
 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.
 
+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.
+
 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. 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.
+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.
 
 Reduced Zustand migration stores lower to one ordinary layout-lifetime state slot. The compiler accepts one exported `create(set => ({ data, ...actions }))` store with one serializable data property, direct property selectors, and synchronous capture-free actions using one-argument merge-form `set`; selected actions reuse the reducer-style functional update compiler, so same-turn calls observe current logical state and DOM writes still batch. The shared layout must initialize the store before route consumers, outside keyed rows. No Zustand import, store subscription runtime, React hook, or generic external-store capability is emitted.
 
@@ -31,11 +33,11 @@ Exact relative `.worker.ts` constructors in inline effects are validated and bun
 
 Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime. Source CSS and global `kudzu.config` styles are emitted in document heads before `afterBuild()` runs; static stylesheet links in component JSX fail compilation instead of loading from the body.
 
-Inline SVG rendering normalizes an explicit set of common React presentation aliases before static serialization and binding descriptor creation. Reactive aliases therefore use the existing generic `setAttribute` path; static SVG adds no JavaScript and reactive SVG adds no SVG-specific runtime.
+Inline SVG rendering normalizes an explicit set of common React presentation aliases before static serialization and binding descriptor creation. Reactive aliases use the existing generic `setAttribute` path. Reactive conditionals and flat intrinsic keyed lists store inert branch or row markup on SVG markers and parse it in the actual parent namespace only when replacement nodes are needed; existing condition/list ownership then handles insertion, identity, updates, and removal. Builds without structural SVG compile out that fragment path, and static SVG adds no JavaScript. Keyed-item conditions, nested SVG lists, MathML structures, and namespaced attributes remain unsupported.
 
 Same-file, directly exported same-file, and relative-imported component chains receiving a direct local-state array or keyed item are recursively specialized to intrinsic JSX before keyed-list analysis, so their component functions are not retained in the browser. A directly exported row may be reused across static and keyed JSX sites; export-list/default aliases and non-JSX references remain rejected. Missing destructured props use directly serializable primitive, plain-object, or array literal defaults during specialization. One final identifier rest binding may be expanded exactly once at the direct intrinsic root. Rows may own multiple direct-property child maps recursively, nested conditions, latest-item handlers, multiple directly serializable state slots, effects, and `null`-initialized object refs. A block-bodied keyed `map` callback may declare one top-level `const` computed from a direct child collection through the supported pure selector pipeline and then return JSX; the alias must feed exactly one nested keyed list source. Structural list sites and ancestor key paths scope hooks across updates and reorder and release them on removal. Handler modules are emitted only when a rendered descriptor references them. 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 and unrelated fields do nothing. Builds without item dependencies emit no item reader or list-state subscription code.
 
-Rendered collection selectors compile immutable local aliases and inline `(item)` or `(item, index)` pipelines over local array state or supported static named imports. One alias may feed multiple keyed list sites when every reference is a statically analyzable collection source; mixed non-collection reads fail during compilation. Supported selectors are pure `filter` with direct local-state reads, direct-property `flatMap`, and `Array.from` before a final keyed `map`; dependency commits re-evaluate the selector against the immutable build-time collection while field keys retain item identity and `key={index}` retains positional identity. Compiler-owned static filters over structural keyed rows validate source references and keys once, retain removed rows as detached prototypes, clone fresh restoration nodes, and insert only new runs without moving retained DOM. Specialized collection wrappers and keyed rows inline direct object-literal or calling-component `const` object prop spreads in source order and forward JSX children into intrinsic output. Anonymous zero-argument lazy state initializers that return a directly serializable literal lower to the same ownership path. This route-specific path is compiled out elsewhere. Compiler-owned collection state is excluded from development snapshot restoration. Dynamic/computed prop spreads, arbitrary callbacks, mutation, asynchronous selectors, imported callback functions, prototype-sensitive reads, dynamic row state initializers, non-`null` or callback refs, and recursive component cycles fail during compilation.
+Rendered collection selectors compile immutable local aliases and inline `(item)` or `(item, index)` pipelines over local array state or supported static named imports. One alias may feed multiple keyed list sites when every reference is a statically analyzable collection source; mixed non-collection reads fail during compilation. A relative-imported named or default synchronous function may accept one supported collection and directly return one pure selector pipeline; the compiler composes its selector without executing or shipping the function. Supported selectors are pure `filter` with direct local-state reads, direct-property `flatMap`, `Array.from`, immutable `slice(start, end?)`, and `toSorted((left, right) => expression)` before a final keyed `map`. Filter predicates may combine supported pure string methods such as `toLowerCase()` and `includes()` with direct primitive state for reactive search. Slice bounds may be direct numeric literals or supported expressions over direct primitive state. The two-parameter synchronous `toSorted` comparator may read item properties and direct primitive state; it sorts a copy in build and browser selectors, while mutating `sort()` is rejected. Dependency commits re-evaluate the selector against the immutable build-time collection while field keys retain item identity and `key={index}` retains positional identity. Compiler-owned static filters over structural keyed rows validate source references and keys once, retain removed row prototypes, clone fresh restoration nodes, and insert only new runs without moving retained DOM. Specialized collection wrappers and keyed rows inline direct object-literal or calling-component `const` object prop spreads in source order and forward JSX children into intrinsic output. Anonymous zero-argument lazy state initializers that return a directly serializable literal lower to the same ownership path. This route-specific path is compiled out elsewhere. Compiler-owned collection state is excluded from development snapshot restoration. Dynamic/computed prop spreads, arbitrary or captured imported callbacks, arbitrary slice-bound calls or sort comparators, package/namespace transforms, mutation, asynchronous selectors, prototype-sensitive reads, dynamic row state initializers, non-`null` or callback refs, and recursive component cycles fail during compilation.
 
 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.
 

package/framework/binding-runtime.js

@@ -122,10 +122,10 @@ function mountConditions(root) {
     mountedConditions.add(start)
     const descriptor = JSON.parse(start.dataset.kIf)
     const end = findEnd(start, descriptor.id)
-    const truthy = start.content.querySelector("template[data-k-true]")
-    const falsy = start.content.querySelector("template[data-k-false]")
+    const truthy = globalThis.__KUDZU_SVG_CONDITIONS__ && descriptor.svg ? start.dataset.kSvgTrue : start.content.querySelector("template[data-k-true]")
+    const falsy = globalThis.__KUDZU_SVG_CONDITIONS__ && descriptor.svg ? start.dataset.kSvgFalse : 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), mount: descriptor.mount, owned: descriptor.owned }
+    const condition = { start, end, truthy, falsy, svg: globalThis.__KUDZU_SVG_CONDITIONS__ && descriptor.svg, kind: descriptor.kind, current: conditionKey(descriptor.kind, descriptor.initial), mount: descriptor.mount, owned: descriptor.owned }
     mountConditionStates(condition, Boolean(descriptor.initial), false)
     const mount = evaluator => {
       if (!start.isConnected) return
@@ -154,7 +154,9 @@ function updateCondition(condition) {
   const falseText = condition.kind === "and" && !truthy ? renderFalsy(value) : ""
   const fragment = falseText
     ? textFragment(condition.end.ownerDocument, falseText)
-    : (truthy ? condition.truthy : condition.falsy).content.cloneNode(true)
+    : globalThis.__KUDZU_SVG_CONDITIONS__ && condition.svg
+      ? svgFragment(condition.start, truthy ? condition.truthy : condition.falsy)
+      : (truthy ? condition.truthy : condition.falsy).content.cloneNode(true)
   const nodes = condition.mount ? [...fragment.childNodes] : undefined
   mountConditionStates(condition, truthy, true)
   condition.end.parentNode.insertBefore(fragment, condition.end)
@@ -230,6 +232,12 @@ function textFragment(document, value) {
   return fragment
 }
 
+function svgFragment(marker, markup) {
+  const range = marker.ownerDocument.createRange()
+  range.selectNode(marker)
+  return range.createContextualFragment(markup)
+}
+
 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

package/framework/build.mjs

@@ -199,7 +199,9 @@ export async function build({ quiet = false, minify = true } = {}) {
   const commandEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.commands).map(event => event.event)))].sort()
   const nativeEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.native).map(event => event.event)))].sort()
   const hasTextBindings = plans.some(plan => plan.bindings.some(binding => binding.target === "text"))
+  const hasSvgConditions = plans.some(plan => plan.conditions.some(condition => condition.svg))
   const hasListConditions = plans.some(plan => plan.lists.some(list => list.conditions))
+  const hasSvgLists = plans.some(plan => plan.lists.some(list => list.svg))
   const hasDeepListConditions = plans.some(plan => plan.lists.some(list => list.conditionHandlers))
   const hasListTextRanges = plans.some(plan => plan.lists.some(list => list.textRanges))
   const hasListAttributes = plans.some(plan => plan.lists.some(list => list.attributes))
@@ -213,6 +215,7 @@ export async function build({ quiet = false, minify = true } = {}) {
   const hasComplexListRowState = plans.some(plan => plan.lists.some(list => list.rowStates?.some(state => state.initialValue !== null && typeof state.initialValue === "object")))
   const hasNestedLists = plans.some(plan => plan.lists.some(list => list.ownerField))
   const hasCollectionSelectors = plans.some(plan => plan.lists.some(list => list.selector))
+  const hasDerivedEffectDependencies = plans.some(plan => plan.effects.some(effect => effect.dependencyExpressions?.length))
   const hasStaticCollections = plans.some(plan => plan.lists.some(list => list.static))
   const hasListIndexes = plans.some(plan => plan.lists.some(list => list.indexed))
   const hasListStableFastPaths = plans.some(plan => plan.lists.some(list => !list.children && !list.ownerField && list.key !== null && !list.indexed && !list.reducer && !list.selector))
@@ -271,11 +274,13 @@ export async function build({ quiet = false, minify = true } = {}) {
     if (navigationRoutes.length) bindingRuntime = specializeNavigationTextDescriptors(bindingRuntime)
     await writeBundledJavaScript(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime, minify, {
       "globalThis.__KUDZU_TEXT_BINDINGS__": String(hasTextBindings),
+      "globalThis.__KUDZU_SVG_CONDITIONS__": String(hasSvgConditions),
       "globalThis.__KUDZU_CAPTURE_STATE__": String(hasNestedStateCaptures)
     })
   }
+  if (hasDerivedEffectDependencies) await writeJavaScript(join(assetsDirectory, "kudzu-collection-selector.js"), await readFile(new URL("./collection-selector.js", import.meta.url), "utf8"), minify)
   if (listCount) {
-    if (hasCollectionSelectors) await writeJavaScript(join(assetsDirectory, "kudzu-collection-selector.js"), await readFile(new URL("./collection-selector.js", import.meta.url), "utf8"), minify)
+    if (hasCollectionSelectors && !hasDerivedEffectDependencies) await writeJavaScript(join(assetsDirectory, "kudzu-collection-selector.js"), await readFile(new URL("./collection-selector.js", import.meta.url), "utf8"), minify)
     let listRuntime = (await readFile(new URL("./list-runtime.js", import.meta.url), "utf8"))
       .replace('"./shared-runtime.js"', '"./kudzu.js"')
     listRuntime = hasCollectionSelectors
@@ -347,9 +352,10 @@ export async function build({ quiet = false, minify = true } = {}) {
       __KUDZU_COLLECTION_SELECTORS__: String(hasCollectionSelectors),
       __KUDZU_STATIC_COLLECTIONS__: String(hasStaticCollections),
       __KUDZU_LIST_INDEXES__: String(hasListIndexes),
-      __KUDZU_LIST_STABLE_FAST_PATHS__: String(hasListStableFastPaths)
+      __KUDZU_LIST_STABLE_FAST_PATHS__: String(hasListStableFastPaths),
+      __KUDZU_SVG_LISTS__: String(hasSvgLists)
     })
-    if (hasCollectionSelectors) await rm(join(assetsDirectory, "kudzu-collection-selector.js"))
+    if (hasCollectionSelectors && !hasDerivedEffectDependencies) await rm(join(assetsDirectory, "kudzu-collection-selector.js"))
   }
   if (hasNativeHandlers) {
     const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
@@ -522,6 +528,7 @@ function printEffectEntry(effects, output, handlerModules, assetsDirectory, base
   const hasCleanup = effects.some(effect => effect.cleanup)
   const hasDependencies = effects.some(effect => effect.dependencies?.length || effect.itemDependencies?.length)
   const hasOwners = effects.some(effect => effect.owner)
+  const hasDependencyExpressions = effects.some(effect => effect.dependencyExpressions?.length)
   const moduleUrls = [...new Set(effects.map(effect => effect.module))]
   const modules = moduleUrls.map(url => {
     const module = handlerModules.find(entry => assetPath(base, `assets/${entry.path}`) === url)
@@ -533,12 +540,13 @@ function printEffectEntry(effects, output, handlerModules, assetsDirectory, base
       ? `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, runtimeName)))}\nconst { browserState, commitDom } = __kRuntime`
       : `import { browserState, commitDom } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, runtimeName)))}`,
     `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-effect.js")))}`,
+    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-collection-selector.js")))}`] : []),
     ...(paramPath ? [`import ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, paramPath)))}`] : []),
     ...modules.map((module, index) => `import * as __kEffectModule${index} from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, module.path)))}`)
   ]
   const entries = moduleUrls.map((url, index) => `[${JSON.stringify(url)}, __kEffectModule${index}]`).join(",")
   if (hasOwners) return printOwnedEffectEntry(imports, effects, entries)
-  if (effects.length === 1 && effects[0].dependencies?.length === 1) return printSingleDependencyEffect(imports, effects[0], hasCleanup)
+  if (effects.length === 1 && effects[0].dependencies?.length === 1 && !hasDependencyExpressions) return printSingleDependencyEffect(imports, effects[0], hasCleanup)
   const disposal = hasCleanup ? `
 let disposed = false
 const dispose = root => {
@@ -616,6 +624,7 @@ async function flush() {
   }
 }
 function readDependencies(record) {
+${hasDependencyExpressions ? printDerivedDependencyRead("browserState") : ""}
   return (record.effect.dependencies ?? []).map(id => {
     const value = browserState.get(id)
     if (value !== null && typeof value !== "string" && typeof value !== "boolean" && !(typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0))) throw new Error("useEffect() dependency state must remain a JSON-safe primitive")
@@ -689,6 +698,7 @@ addEventListener("pagehide", event => {
 }
 
 function printNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, base) {
+  const hasDependencyExpressions = effects.some(effect => effect.dependencyExpressions?.length)
   const moduleUrls = [...new Set(effects.map(effect => effect.module))]
   const modules = moduleUrls.map(url => {
     const module = handlerModules.find(entry => assetPath(base, `assets/${entry.path}`) === url)
@@ -698,6 +708,7 @@ function printNavigableEffectEntry(effects, output, handlerModules, assetsDirect
   const imports = [
     `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu.js")))}`,
     `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-effect.js")))}`,
+    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-collection-selector.js")))}`] : []),
     ...modules.map((module, index) => `import * as __kEffectModule${index} from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, module.path)))}`)
   ]
   const entries = moduleUrls.map((url, index) => `[${JSON.stringify(url)}, __kEffectModule${index}]`).join(",")
@@ -765,6 +776,7 @@ function mount(lifetime) {
     }
   }
   function readDependencies(record) {
+${hasDependencyExpressions ? printDerivedDependencyRead("__kRuntime.browserState") : ""}
     return (record.effect.dependencies ?? []).map(id => {
       const value = __kRuntime.browserState.get(id)
       if (value !== null && typeof value !== "string" && typeof value !== "boolean" && !(typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0))) throw new Error("useEffect() dependency state must remain a JSON-safe primitive")
@@ -809,6 +821,7 @@ function mount(lifetime) {
 
 function printOwnedNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, base) {
   const hasItemDependencies = effects.some(effect => effect.itemDependencies?.length)
+  const hasDependencyExpressions = effects.some(effect => effect.dependencyExpressions?.length)
   const moduleUrls = [...new Set(effects.map(effect => effect.module))]
   const modules = moduleUrls.map(url => {
     const module = handlerModules.find(entry => assetPath(base, `assets/${entry.path}`) === url)
@@ -818,6 +831,7 @@ function printOwnedNavigableEffectEntry(effects, output, handlerModules, assetsD
   const imports = [
     `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu.js")))}`,
     `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-effect.js")))}`,
+    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-collection-selector.js")))}`] : []),
     ...modules.map((module, index) => `import * as __kEffectModule${index} from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, module.path)))}`)
   ]
   const entries = moduleUrls.map((url, index) => `[${JSON.stringify(url)}, __kEffectModule${index}]`).join(",")
@@ -986,6 +1000,7 @@ function mount(lifetime) {
     }
   }
   function readDependencies(record) {
+${hasDependencyExpressions ? printDerivedDependencyRead("__kRuntime.browserState") : ""}
     const values = (record.effect.dependencies ?? []).map(id => {
       const value = __kRuntime.browserState.get(id)
       if (value !== null && typeof value !== "string" && typeof value !== "boolean" && !(typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0))) throw new Error("useEffect() dependency state must remain a JSON-safe primitive")
@@ -1063,6 +1078,7 @@ function runtimeEffects(effects, lifetimes = false) {
     module: effect.module,
     handler: effect.handler,
     ...(effect.dependencies ? { dependencies: effect.dependencies } : {}),
+    ...(effect.dependencyExpressions ? { dependencyExpressions: effect.dependencyExpressions, dependencyStates: effect.dependencyStates } : {}),
     ...(effect.itemDependencies ? { itemDependencies: effect.itemDependencies, listState: effect.listState } : {}),
     ...(effect.cleanup ? { cleanup: true } : {}),
     ...(effect.owner ? { owner: effect.owner } : {}),
@@ -1073,10 +1089,19 @@ function runtimeEffects(effects, lifetimes = false) {
   }))
 }
 
+function printDerivedDependencyRead(state) {
+  return `    if (record.effect.dependencyExpressions) return record.effect.dependencyExpressions.map(expression => {
+      const value = __kEvaluateDependency(expression, undefined, undefined, name => ${state}.get(record.effect.dependencyStates[name]))
+      if (value !== null && typeof value !== "string" && typeof value !== "boolean" && !(typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0))) throw new Error("useEffect() derived dependency must remain a JSON-safe primitive")
+      return value
+    })`
+}
+
 function printOwnedEffectEntry(imports, effects, entries) {
   const hasItemDependencies = effects.some(effect => effect.itemDependencies?.length)
   const hasOrdinaryDependencies = effects.some(effect => effect.dependencies?.length)
-  const hasRowState = effects.some(effect => JSON.stringify([effect.dependencies, effect.states, effect.scope]).includes("$k"))
+  const hasDependencyExpressions = effects.some(effect => effect.dependencyExpressions?.length)
+  const hasRowState = effects.some(effect => JSON.stringify([effect.dependencies, effect.dependencyStates, effect.states, effect.scope]).includes("$k"))
   return `${imports.join("\n")}
 const effects = ${inlineJson(effects)}
 const modules = new Map([${entries}])
@@ -1098,7 +1123,7 @@ ${hasRowState ? `function specializeRowEffect(effect, marker) {
   const path = marker.dataset.kRowPath
   const id = value => typeof value === "string" ? value.replace("$k", path) : value
   const capture = value => value?.type === "state" || value?.type === "setter" || value?.type === "ref" ? { ...value, id: id(value.id) } : value?.type === "array" ? { ...value, value: value.value.map(capture) } : value?.type === "object" ? { ...value, value: value.value.map(([key, entry]) => [key, capture(entry)]) } : value
-  return { ...effect, dependencies: effect.dependencies?.map(id), states: Object.fromEntries(Object.entries(effect.states).map(([name, value]) => [name, id(value)])), scope: Object.fromEntries(Object.entries(effect.scope).map(([name, value]) => [name, capture(value)])) }
+  return { ...effect, dependencies: effect.dependencies?.map(id), dependencyStates: effect.dependencyStates && Object.fromEntries(Object.entries(effect.dependencyStates).map(([name, value]) => [name, id(value)])), states: Object.fromEntries(Object.entries(effect.states).map(([name, value]) => [name, id(value)])), scope: Object.fromEntries(Object.entries(effect.scope).map(([name, value]) => [name, capture(value)])) }
 }
 ` : ""}
 function registerDependencies(record) {
@@ -1240,6 +1265,7 @@ async function flush() {
   }
 }
 function readDependencies(record) {
+${hasDependencyExpressions ? printDerivedDependencyRead("browserState") : ""}
   const values = (record.effect.dependencies ?? []).map(id => {
     const value = browserState.get(id)
     if (value !== null && typeof value !== "string" && typeof value !== "boolean" && !(typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0))) throw new Error("useEffect() dependency state must remain a JSON-safe primitive")
@@ -1712,7 +1738,8 @@ async function compile(file, sourceFiles, sourceIndex, staticFiles, importedAsse
   if (errors.length) {
     throw new Error(errors.map(error => ts.flattenDiagnosticMessageText(error.messageText, "\n")).join("\n"))
   }
-  if (hasReactModuleReference(result.outputText, file)) throw new Error(`${relative(root, file)} Runtime React module references are not supported`)
+  const packageReference = emittedPackageReference(result.outputText, file, new Set(["react", "react-router-dom"]))
+  if (packageReference) throw new Error(`${relative(root, file)} Runtime ${packageReference} module references are not supported`)
 
   const output = compiledPath(file)
   await mkdir(resolve(output, ".."), { recursive: true })
@@ -1735,18 +1762,88 @@ async function compile(file, sourceFiles, sourceIndex, staticFiles, importedAsse
   return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0, hasEffects: effectHandlers.length > 0, clientImports: [...clientImports] }
 }
 
-function hasReactModuleReference(source, file) {
+function emittedPackageReference(source, file, packages) {
   const sourceFile = ts.createSourceFile(file, source, ts.ScriptTarget.ES2022, true, ts.ScriptKind.JS)
-  let found = false
+  let found
   const visit = node => {
-    if ((ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text === "react") found = true
-    if (ts.isCallExpression(node) && (node.expression.kind === ts.SyntaxKind.ImportKeyword || ts.isIdentifier(node.expression) && node.expression.text === "require") && ts.isStringLiteral(node.arguments[0]) && node.arguments[0].text === "react") found = true
+    if ((ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier) && packages.has(node.moduleSpecifier.text)) found = node.moduleSpecifier.text
+    if (ts.isCallExpression(node) && (node.expression.kind === ts.SyntaxKind.ImportKeyword || ts.isIdentifier(node.expression) && node.expression.text === "require") && ts.isStringLiteral(node.arguments[0]) && packages.has(node.arguments[0].text)) found = node.arguments[0].text
     if (!found) ts.forEachChild(node, visit)
   }
   visit(sourceFile)
   return found
 }
 
+function normalizeReactRouterSyntax(sourceFile, factory, context, base) {
+  const links = 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 a named Link import")
+      const bindings = clause.namedBindings
+      if (!bindings || ts.isNamespaceImport(bindings)) throw sourceNodeError(bindings ?? statement, sourceFile, "React Router namespace imports are not supported; use a named Link import")
+      for (const entry of bindings.elements) {
+        if (entry.isTypeOnly) continue
+        const imported = (entry.propertyName ?? entry.name).text
+        if (imported === "NavLink") throw sourceNodeError(entry, sourceFile, "React Router NavLink active-route semantics cannot be erased to a native anchor")
+        if (imported !== "Link") throw sourceNodeError(entry, sourceFile, `React Router ${imported} is not supported; only named Link imports can be erased to native anchors`)
+        links.add(entry.name.text)
+      }
+    }
+  }
+  if (!links.size) return sourceFile
+
+  const routerProps = new Set(["discover", "end", "prefetch", "preventScrollReset", "relative", "reloadDocument", "replace", "state", "viewTransition"])
+  const attributes = attributesNode => {
+    const output = []
+    let destination
+    for (const property of attributesNode.properties) {
+      if (ts.isJsxSpreadAttribute(property)) throw sourceNodeError(property, sourceFile, "React Router Link does not support spread attributes during native anchor lowering")
+      const name = property.name.text
+      if (name === "href") throw sourceNodeError(property, sourceFile, "React Router Link must not declare href; Kudzu derives it from to")
+      if (routerProps.has(name)) throw sourceNodeError(property, sourceFile, `React Router Link prop ${JSON.stringify(name)} cannot be erased to a native anchor`)
+      if (name !== "to") {
+        output.push(ts.visitEachChild(property, visitor, context))
+        continue
+      }
+      if (destination !== undefined) throw sourceNodeError(property, sourceFile, "React Router Link requires exactly one to attribute")
+      if (!property.initializer || !ts.isStringLiteral(property.initializer)) throw sourceNodeError(property, sourceFile, 'React Router Link requires a static root-relative to="/path"')
+      destination = property.initializer.text
+      const pathname = destination.match(/^[^?#]*/)[0]
+      let decoded
+      try { decoded = decodeURIComponent(pathname) } catch { throw sourceNodeError(property.initializer, sourceFile, 'React Router Link requires a safe static root-relative to="/path"') }
+      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(property.initializer, sourceFile, 'React Router Link requires a safe static root-relative to="/path"')
+      output.push(factory.createJsxAttribute(factory.createIdentifier("href"), factory.createStringLiteral(withBase(base, destination))))
+    }
+    if (destination === undefined) throw sourceNodeError(attributesNode.parent, sourceFile, "React Router Link requires exactly one static root-relative to attribute")
+    return factory.updateJsxAttributes(attributesNode, output)
+  }
+  const importedLink = tag => ts.isIdentifier(tag) && links.has(tag.text) && !isShadowedIdentifier(tag, sourceFile)
+  const visitor = node => {
+    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"))
+      return factory.updateJsxElement(node, opening, ts.visitNodes(node.children, visitor), closing)
+    }
+    if (ts.isJsxSelfClosingElement(node) && importedLink(node.tagName)) return factory.updateJsxSelfClosingElement(node, factory.createIdentifier("a"), node.typeArguments, attributes(node.attributes))
+    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.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 || (entry.propertyName ?? entry.name).text !== "Link")
+      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)
+    }
+    return ts.visitEachChild(node, visitor, context)
+  }
+  return ts.visitNode(sourceFile, visitor)
+}
+
 function normalizeClsxSyntax(sourceFile, factory, context) {
   const names = new Set()
   for (const statement of sourceFile.statements) {
@@ -2222,7 +2319,7 @@ function lowerReactMemoCollectionExpression(expression, factory) {
     if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === "map" && node.arguments.length === 1) {
       return factory.createCallExpression(factory.createPropertyAccessExpression(factory.createIdentifier("Array"), "from"), undefined, [visit(node.expression.expression), node.arguments[0]])
     }
-    if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && ["filter", "flatMap"].includes(node.expression.name.text)) {
+    if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && ["filter", "flatMap", "slice", "toSorted"].includes(node.expression.name.text)) {
       return factory.updateCallExpression(node, factory.updatePropertyAccessExpression(node.expression, visit(node.expression.expression), node.expression.name), node.typeArguments, node.arguments)
     }
     if (isArrayFromCall(node)) return factory.updateCallExpression(node, node.expression, node.typeArguments, [visit(node.arguments[0]), ...node.arguments.slice(1)])
@@ -2276,6 +2373,8 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
     const factory = context.factory
     const hasLinkElements = /<link/i.test(sourceFile.text)
     const importedCollections = importedSerializableCollectionNames(sourceFile, file, sourceFiles, sourceIndex)
+    sourceFile = normalizeReactRouterSyntax(sourceFile, factory, context, base)
+    ts.setParentRecursive(sourceFile, false)
     sourceFile = normalizeClsxSyntax(sourceFile, factory, context)
     ts.setParentRecursive(sourceFile, false)
     sourceFile = normalizeReactMigrationSyntax(sourceFile, factory, context, importedCollections)
@@ -2294,7 +2393,9 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
     const importedSource = target => {
       let imported = importedSources.get(target)
       if (!imported) {
-        imported = normalizeClsxSyntax(parseSourceFile(target, sourceIndex.get(target)), factory, context)
+        imported = normalizeReactRouterSyntax(parseSourceFile(target, sourceIndex.get(target)), factory, context, base)
+        ts.setParentRecursive(imported, false)
+        imported = normalizeClsxSyntax(imported, factory, context)
         ts.setParentRecursive(imported, false)
         imported = normalizeReactMigrationSyntax(imported, factory, context, importedSerializableCollectionNames(imported, target, sourceFiles, sourceIndex))
         ts.setParentRecursive(imported, false)
@@ -2309,6 +2410,13 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
       }
       return imported
     }
+    const importedCollectionTransforms = new Map()
+    for (const [name, binding] of importBindings) {
+      if (binding.kind === "namespace") continue
+      try {
+        importedCollectionTransforms.set(name, resolveComponentExport(binding.target, binding.kind === "default" ? "default" : binding.imported, target => parseSourceFile(target, sourceIndex.get(target)), sourceFiles))
+      } catch {}
+    }
     const settersByFunction = new Map()
     const reducersByFunction = new Map()
     const zustandStores = new Map()
@@ -2446,7 +2554,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
       const setters = settersByFunction.get(owner) ?? new Map()
       for (const [name, entries] of declarations) {
         for (const declaration of entries) {
-          const parts = keyedListParts(declaration.initializer, setters, declarations, (target, message) => { throw sourceNodeError(target, sourceFile, message) }, new Set(), importedCollections, factory, context)
+          const parts = keyedListParts(declaration.initializer, setters, declarations, (target, message) => { throw sourceNodeError(target, sourceFile, message) }, new Set(), importedCollections, factory, context, importedCollectionTransforms)
           if (!parts) continue
           const uses = []
           const collectUses = node => {
@@ -2640,7 +2748,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         return
       }
       if (ts.isJsxExpression(node) && node.initializer === undefined && node.expression && (ts.isJsxElement(node.parent) || ts.isJsxFragment(node.parent))) {
-        const parts = listLocalUses.get(node) ?? keyedListParts(node.expression, settersForNode(node, settersByFunction), jsxLocalDeclarations.get(nearestFunction(node)), fail, new Set(), importedCollections, factory, context)
+        const parts = listLocalUses.get(node) ?? keyedListParts(node.expression, settersForNode(node, settersByFunction), jsxLocalDeclarations.get(nearestFunction(node)), fail, new Set(), importedCollections, factory, context, importedCollectionTransforms)
         if (parts) {
           for (const declaration of parts.aliasDeclarations ?? []) listLocalDeclarations.add(declaration)
           rawRenderedLists.push({ node, parts })
@@ -2855,14 +2963,24 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
           fail(target, message)
         }
         if (node.arguments.length !== 2) effectFail(node, "useEffect() requires exactly a callback and literal dependency array")
-        const [callback, dependencies] = node.arguments
-        if (!ts.isArrowFunction(callback) && !ts.isFunctionExpression(callback)) effectFail(callback, "useEffect() callback must be an inline function")
+        const [callbackArgument, dependencies] = node.arguments
+        const effectOwner = nearestFunction(node)
+        const resolveEffectFunction = expression => {
+          if (!ts.isIdentifier(expression)) return undefined
+          const entries = jsxLocalDeclarations.get(effectOwner)?.get(expression.text)
+          if (entries?.length !== 1 || entries[0].node.parent?.parent?.parent !== effectOwner?.body) return undefined
+          const initializer = entries[0].initializer
+          return ts.isArrowFunction(initializer) || ts.isFunctionExpression(initializer) ? initializer : undefined
+        }
+        let callback = ts.isArrowFunction(callbackArgument) || ts.isFunctionExpression(callbackArgument) ? callbackArgument : resolveEffectFunction(callbackArgument)
+        if (!callback) effectFail(callbackArgument, "useEffect() callback must be inline or one top-level const function")
         if (ts.isFunctionExpression(callback) && callback.name) effectFail(callback, "useEffect() callback function must be anonymous")
         if (callback.asteriskToken) effectFail(callback, "useEffect() callback cannot be a generator")
         if (callback.parameters.length) effectFail(callback, "useEffect() callback cannot declare parameters")
         if (!ts.isArrayLiteralExpression(dependencies)) effectFail(dependencies, "useEffect() dependencies must be a literal array")
         const itemDependencies = []
         const ordinaryDependencies = []
+        const setters = settersForNode(node, settersByFunction)
         let dependencyItem = listEffect?.item
         for (const dependency of dependencies.elements) {
           const value = unwrapExpression(dependency)
@@ -2879,24 +2997,74 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         }
         const invalidDependency = ordinaryDependencies.find(dependency => !ts.isIdentifier(dependency))
         if (invalidDependency) effectFail(invalidDependency, "useEffect() dependencies must be direct state or runtime parameter identifiers")
-        if (!nearestFunction(node)) fail(node, "useEffect() cannot be used outside a Kudzu component")
+        const dependencyExpressions = []
+        const dependencyStates = new Map()
+        const dependencySubstitutions = new Map()
+        const subscriptionDependencies = []
+        let hasDerivedDependency = false
+        const stateNames = new Set(setters.values())
+        const localDeclarations = jsxLocalDeclarations.get(nearestFunction(node))
+        for (const dependency of ordinaryDependencies) {
+          const entries = localDeclarations?.get(dependency.text)
+          const initializer = entries?.length === 1 ? entries[0].initializer : undefined
+          const directAlias = initializer && ts.isIdentifier(unwrapExpression(initializer)) && stateNames.has(unwrapExpression(initializer).text)
+          const derivedStates = initializer && !directAlias ? referencedStateNames(initializer, setters) : new Set()
+          if (derivedStates.size) {
+            const usedStates = new Set()
+            const expression = collectionExpression(initializer, {}, effectFail, stateNames, usedStates)
+            if (!usedStates.size) effectFail(dependency, `useEffect() derived dependency "${dependency.text}" must read direct primitive state`)
+            dependencyExpressions.push(expression)
+            for (const name of usedStates) {
+              subscriptionDependencies.push(factory.createIdentifier(name))
+              dependencyStates.set(name, factory.createIdentifier(name))
+            }
+            dependencySubstitutions.set(dependency.text, initializer)
+            hasDerivedDependency = true
+          } else {
+            subscriptionDependencies.push(dependency)
+            dependencyExpressions.push(["state", dependency.text])
+            dependencyStates.set(dependency.text, dependency)
+          }
+        }
+        if (!hasDerivedDependency) {
+          dependencyExpressions.length = 0
+          dependencyStates.clear()
+        }
+        if (!effectOwner) fail(node, "useEffect() cannot be used outside a Kudzu component")
         if (!ts.isBlock(callback.body)) effectFail(callback, "useEffect() callback must use a block body")
+        const cleanupSubstitutions = new Map()
+        const collectNamedCleanups = current => {
+          if (current !== callback && isFunctionLike(current)) return
+          if (ts.isReturnStatement(current) && current.expression && ts.isIdentifier(unwrapExpression(current.expression))) {
+            const cleanup = resolveEffectFunction(unwrapExpression(current.expression))
+            if (cleanup) cleanupSubstitutions.set(unwrapExpression(current.expression).text, cleanup)
+          }
+          ts.forEachChild(current, collectNamedCleanups)
+        }
+        collectNamedCleanups(callback.body)
+        if (cleanupSubstitutions.size) {
+          callback = substituteClone(callback, cleanupSubstitutions, factory, context)
+          ts.setParentRecursive(callback, false)
+          callback.parent = callbackArgument.parent
+        }
         const returns = effectReturns(callback)
         if (returns.invalid) effectFail(returns.invalid, "useEffect() return values must be inline cleanup functions")
         const invalidCleanup = returns.cleanups.find(cleanup => cleanup.parameters.length || cleanup.asteriskToken)
         if (invalidCleanup) effectFail(invalidCleanup, "useEffect() cleanup functions cannot declare parameters or be generators")
         if (returns.cleanup && callback.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.AsyncKeyword)) effectFail(callback, "useEffect() async callbacks cannot return cleanup functions")
-        const setters = settersForNode(node, settersByFunction)
         const callbackSource = listEffect?.sourceFile ?? sourceFile
         const callbackFile = callbackSource.fileName
         const workerStart = workerReferences.length
-        let compiledCallback
+        let compiledCallback = dependencySubstitutions.size ? substituteClone(callback, dependencySubstitutions, factory, context) : callback
+        if (compiledCallback !== callback) {
+          ts.setParentRecursive(compiledCallback, false)
+          compiledCallback.parent = callback.parent
+        }
         if (listEffect && callbackFile !== file) {
           const originalCallback = listEffect.source.arguments[0]
           rejectWorkerConstructions(originalCallback, callbackSource, "Relative TypeScript Worker construction in imported keyed-row effects is not supported; construct the Worker in a directly compiled page or local component effect")
-          compiledCallback = callback
         } else {
-          compiledCallback = rewriteEffectWorkers(callback, callbackFile, callbackSource, sourceFiles, workerReferences, factory, context)
+          compiledCallback = rewriteEffectWorkers(compiledCallback, callbackFile, callbackSource, sourceFiles, workerReferences, factory, context)
         }
         const descriptor = compileNativeCallback(compiledCallback, setters, reducersForNode(node, reducersByFunction), factory, effectHandlers, listEffect?.imports ?? importBindings, clientImports, "effect", dependencyItem, true, returns.cleanup)
         for (const reference of workerReferences.slice(workerStart)) Object.assign(reference, { module: handlerUrl, handler: descriptor.exportName })
@@ -2904,14 +3072,16 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         usesBehavior = true
         return factory.updateCallExpression(node, node.expression, node.typeArguments, [
           callback,
-          factory.createArrayLiteralExpression(ordinaryDependencies),
+          factory.createArrayLiteralExpression(hasDerivedDependency ? subscriptionDependencies : ordinaryDependencies),
           factory.createStringLiteral(handlerUrl),
           factory.createStringLiteral(descriptor.exportName),
           descriptor.states,
           descriptor.scope,
           factory.createStringLiteral(listEffect ? sourceLocation(listEffect.source, listEffect.sourceFile) : sourceLocation(node, sourceFile)),
           returns.cleanup ? factory.createTrue() : factory.createFalse(),
-          factory.createArrayLiteralExpression(itemDependencies.map(field => factory.createStringLiteral(field)))
+          factory.createArrayLiteralExpression(itemDependencies.map(field => factory.createStringLiteral(field))),
+          hasDerivedDependency ? jsonExpression(dependencyExpressions, factory) : factory.createArrayLiteralExpression(),
+          factory.createArrayLiteralExpression([...dependencyStates].map(([name, state]) => factory.createArrayLiteralExpression([factory.createStringLiteral(name), state])))
         ])
       }
 
@@ -3157,11 +3327,11 @@ function containsRenderControl(root, knownLocals) {
   return found
 }
 
-function keyedListParts(expression, setters, declarations, fail, aliases = new Set(), importedCollections = new Set(), factory = ts.factory, context) {
+function keyedListParts(expression, setters, declarations, fail, aliases = new Set(), importedCollections = new Set(), factory = ts.factory, context, importedCollectionTransforms = new Map()) {
   const value = unwrapExpression(expression)
   const directFrom = isArrayFromCall(value) && value.arguments.length === 2 && containsJsx(value.arguments[1])
   if (!directFrom && (!ts.isCallExpression(value) || value.arguments.length !== 1 || !ts.isPropertyAccessExpression(value.expression) || value.expression.name.text !== "map")) return undefined
-  const collection = renderedCollectionSource(directFrom ? value.arguments[0] : value.expression.expression, setters, declarations, fail, aliases, importedCollections, new Set(setters.values()))
+  const collection = renderedCollectionSource(directFrom ? value.arguments[0] : value.expression.expression, setters, declarations, fail, aliases, importedCollections, new Set(setters.values()), importedCollectionTransforms, factory, context)
   if (!collection?.state) return undefined
   if (directFrom) collection.selector.push(["from", undefined])
   let callback = directFrom ? value.arguments[1] : value.arguments[0]
@@ -3171,7 +3341,7 @@ function keyedListParts(expression, setters, declarations, fail, aliases = new S
     if (!context || root.statements.length !== 2 || !ts.isVariableStatement(root.statements[0]) || (root.statements[0].declarationList.flags & ts.NodeFlags.Const) === 0 || root.statements[0].declarationList.declarations.length !== 1 || !ts.isReturnStatement(root.statements[1]) || !root.statements[1].expression) fail(root, "Block-bodied keyed list map callbacks require one computed child collection const and a final JSX return")
     const declaration = root.statements[0].declarationList.declarations[0]
     if (!ts.isIdentifier(declaration.name) || !declaration.initializer) fail(declaration, "Computed child collections must initialize one const identifier")
-    const computed = renderedCollectionSource(declaration.initializer, new Map(), undefined, fail, new Set())
+    const computed = renderedCollectionSource(declaration.initializer, new Map(), undefined, fail, new Set(), new Set(), new Set(), importedCollectionTransforms, factory, context)
     if (!computed?.ownerField || computed.parentItem !== parameters.item) fail(declaration.initializer, `Computed child collections must start from ${parameters.item}.<field>`)
     const returned = root.statements[1].expression
     if (identifierReferenceCount(returned, declaration.name.text) !== 1) fail(declaration.name, `Computed child collection alias "${declaration.name.text}" must be used exactly once`)
@@ -3208,7 +3378,7 @@ function nestedKeyedListParts(expression, parentItem, fail) {
   return { ...collection, callback, root, item: parameters.item, index: parameters.index, indexed: Boolean(parameters.index), keyField: positional ? null : keyField }
 }
 
-function renderedCollectionSource(expression, setters, declarations, fail, aliases, importedCollections = new Set(), stateNames = new Set()) {
+function renderedCollectionSource(expression, setters, declarations, fail, aliases, importedCollections = new Set(), stateNames = new Set(), importedCollectionTransforms = new Map(), factory = ts.factory, context) {
   const value = unwrapExpression(expression)
   if (ts.isIdentifier(value)) {
     if ([...setters.values()].includes(value.text)) return { state: value, selector: [], selectorStates: new Set() }
@@ -3217,16 +3387,30 @@ function renderedCollectionSource(expression, setters, declarations, fail, alias
     if (!entries) return undefined
     if (entries.length !== 1 || aliases.has(value.text) || entries[0].node.parent?.parent?.parent !== nearestFunction(entries[0].node)?.body) fail(value, `Rendered collection alias "${value.text}" must be one top-level immutable local`)
     aliases.add(value.text)
-    const source = renderedCollectionSource(entries[0].initializer, setters, declarations, fail, aliases, importedCollections, stateNames)
+    const source = renderedCollectionSource(entries[0].initializer, setters, declarations, fail, aliases, importedCollections, stateNames, importedCollectionTransforms, factory, context)
     aliases.delete(value.text)
     return source && { ...source, aliasDeclarations: [...(source.aliasDeclarations ?? []), entries[0].node], aliasUses: [...(source.aliasUses ?? []), value] }
   }
   if (ts.isPropertyAccessExpression(value) && ts.isIdentifier(value.expression)) return { state: undefined, ownerField: value.name.text, selector: [], parentItem: value.expression.text }
+  if (ts.isCallExpression(value) && ts.isIdentifier(value.expression) && importedCollectionTransforms.has(value.expression.text)) {
+    const transform = importedCollectionTransforms.get(value.expression.text)
+    const parameter = transform.parameters[0]
+    if (value.arguments.length !== 1 || transform.parameters.length !== 1 || transform.asteriskToken || transform.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.AsyncKeyword) || !parameter || !ts.isIdentifier(parameter.name) || parameter.dotDotDotToken || parameter.initializer || parameter.questionToken) fail(value, `Imported collection transform "${value.expression.text}" must be synchronous with exactly one identifier parameter and one argument`)
+    const returned = ts.isBlock(transform.body)
+      ? transform.body.statements.length === 1 && ts.isReturnStatement(transform.body.statements[0]) ? transform.body.statements[0].expression : undefined
+      : transform.body
+    if (!returned) fail(value, `Imported collection transform "${value.expression.text}" must contain only one returned collection expression`)
+    const transformSource = renderedCollectionSource(returned, new Map([[parameter.name.text, parameter.name.text]]), undefined, fail, new Set(), new Set(), new Set([parameter.name.text]))
+    if (!transformSource?.state || transformSource.state.text !== parameter.name.text || transformSource.selectorStates.size) fail(value, `Imported collection transform "${value.expression.text}" must return a supported pure pipeline rooted only in its parameter`)
+    const source = renderedCollectionSource(value.arguments[0], setters, declarations, fail, aliases, importedCollections, stateNames, importedCollectionTransforms, factory, context)
+    if (!source) fail(value.arguments[0], `Imported collection transform "${value.expression.text}" requires a supported collection argument`)
+    return { ...source, selector: [...source.selector, ...transformSource.selector] }
+  }
   if (ts.isCallExpression(value) && ts.isPropertyAccessExpression(value.expression)) {
     const method = value.expression.name.text
     if (method === "filter") {
       if (value.arguments.length !== 1) fail(value, "Rendered collection filter() requires one inline predicate")
-      const source = renderedCollectionSource(value.expression.expression, setters, declarations, fail, aliases, importedCollections, stateNames)
+      const source = renderedCollectionSource(value.expression.expression, setters, declarations, fail, aliases, importedCollections, stateNames, importedCollectionTransforms, factory, context)
       if (!source) return undefined
       const parameters = collectionParameters(value.arguments[0], "Rendered collection filter()", fail)
       const selectorStates = new Set(source.selectorStates)
@@ -3234,7 +3418,7 @@ function renderedCollectionSource(expression, setters, declarations, fail, alias
     }
     if (method === "flatMap") {
       if (value.arguments.length !== 1) fail(value, "Rendered collection flatMap() requires one inline projector")
-      const source = renderedCollectionSource(value.expression.expression, setters, declarations, fail, aliases, importedCollections, stateNames)
+      const source = renderedCollectionSource(value.expression.expression, setters, declarations, fail, aliases, importedCollections, stateNames, importedCollectionTransforms, factory, context)
       if (!source) return undefined
       const parameters = collectionParameters(value.arguments[0], "Rendered collection flatMap()", fail)
       const field = directProperty(value.arguments[0].body, parameters.item)
@@ -3242,10 +3426,31 @@ function renderedCollectionSource(expression, setters, declarations, fail, alias
       if (["__proto__", "constructor", "prototype"].includes(field)) fail(value.arguments[0].body, `Rendered collection property "${field}" is not supported`)
       return { ...source, selector: [...source.selector, ["flatMap", field]] }
     }
+    if (method === "slice") {
+      if (value.arguments.length < 1 || value.arguments.length > 2) fail(value, "Rendered collection slice() requires a start and optional end")
+      const source = renderedCollectionSource(value.expression.expression, setters, declarations, fail, aliases, importedCollections, stateNames, importedCollectionTransforms, factory, context)
+      if (!source) return undefined
+      const selectorStates = new Set(source.selectorStates)
+      const start = collectionExpression(value.arguments[0], {}, fail, stateNames, selectorStates)
+      const end = value.arguments[1] && collectionExpression(value.arguments[1], {}, fail, stateNames, selectorStates)
+      return { ...source, selector: [...source.selector, ["slice", start, end]], selectorStates }
+    }
+    if (method === "toSorted") {
+      if (value.arguments.length !== 1) fail(value, "Rendered collection toSorted() requires one inline comparator")
+      const source = renderedCollectionSource(value.expression.expression, setters, declarations, fail, aliases, importedCollections, stateNames, importedCollectionTransforms, factory, context)
+      if (!source) return undefined
+      const comparator = value.arguments[0]
+      const parameters = collectionParameters(comparator, "Rendered collection toSorted()", fail)
+      if (comparator.parameters.length !== 2 || ts.isBlock(comparator.body)) fail(comparator, "Rendered collection toSorted() comparator must be a synchronous expression arrow with (left, right) identifier parameters")
+      const selectorStates = new Set(source.selectorStates)
+      const expression = collectionExpression(comparator.body, parameters, fail, stateNames, selectorStates)
+      return { ...source, selector: [...source.selector, ["sort", expression]], selectorStates }
+    }
+    if (method === "sort") fail(value, "Rendered collections cannot use mutating sort(); use toSorted()")
   }
   if (isArrayFromCall(value)) {
     if (value.arguments.length < 1 || value.arguments.length > 2) fail(value, "Rendered Array.from() requires an anchor and optional inline mapper")
-    const source = renderedCollectionSource(value.arguments[0], setters, declarations, fail, aliases, importedCollections, stateNames)
+    const source = renderedCollectionSource(value.arguments[0], setters, declarations, fail, aliases, importedCollections, stateNames, importedCollectionTransforms, factory, context)
     if (!source) return undefined
     let mapper
     if (value.arguments[1]) {
@@ -3932,7 +4137,7 @@ function jsxTagUses(root, name) {
   return uses
 }
 
-const pureListMethods = new Set(["at", "charAt", "charCodeAt", "concat", "endsWith", "includes", "indexOf", "join", "lastIndexOf", "padEnd", "padStart", "repeat", "replace", "replaceAll", "slice", "startsWith", "substring", "toLowerCase", "toUpperCase", "trim", "trimEnd", "trimStart"])
+const pureListMethods = new Set(["at", "charAt", "charCodeAt", "concat", "endsWith", "includes", "indexOf", "join", "lastIndexOf", "localeCompare", "padEnd", "padStart", "repeat", "replace", "replaceAll", "slice", "startsWith", "substring", "toLowerCase", "toUpperCase", "trim", "trimEnd", "trimStart"])
 const mutatingListMethods = new Set(["copyWithin", "fill", "pop", "push", "reverse", "shift", "sort", "splice", "unshift"])
 const pureMathMethods = new Set(["abs", "ceil", "floor", "max", "min", "pow", "round", "sign", "sqrt", "trunc"])
 const pureListGlobals = new Set(["Boolean", "Infinity", "Math", "NaN", "Number", "String", "undefined"])

package/framework/collection-selector.js

@@ -6,13 +6,15 @@ export function selectCollection(anchor, selector = [], readState) {
       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))
       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))
     }
   }
   if (!Array.isArray(values)) throw new Error("Rendered collection source must remain an array")
   return values
 }
 
-function evaluateCollectionExpression(expression, item, index, readState) {
+export function evaluateCollectionExpression(expression, item, index, readState) {
   const [kind, ...parts] = expression
   if (kind === "value") return parts[0]
   if (kind === "undefined") return undefined

package/framework/core.mjs

@@ -145,14 +145,18 @@ function createInternalState(initialValue) {
   return signal
 }
 
-export function useEffect(callback, dependencies, module, handler, states, scope, source, cleanup, itemDependencies = []) {
+export function useEffect(callback, dependencies, module, handler, states, scope, source, cleanup, itemDependencies = [], dependencyExpressions = [], dependencyStates = []) {
   if (!renderContext) throw new Error("useEffect() can only run while rendering a Kudzu component")
   if (typeof callback !== "function" || !Array.isArray(dependencies) || !module || !handler) throw new Error("useEffect() must be compiled with a literal dependency array")
   if (itemDependencies.length && !renderContext.listDepth) throw new Error(`${source} useEffect() item-property dependencies are only supported in direct keyed row components`)
-  const dependencyIds = dependencies.map(dependency => {
+  const dependencyIds = [...new Set(dependencies.map(dependency => {
     if (!dependency?.[signalMarker] || !validEffectDependency(dependency.value)) throw new Error(`${source} useEffect() dependencies must be primitive Kudzu state or runtime parameter identifiers`)
     return dependency.id
-  })
+  }))]
+  const dependencyStateIds = Object.fromEntries(dependencyStates.map(([name, dependency]) => {
+    if (!dependency?.[signalMarker] || !validEffectDependency(dependency.value)) throw new Error(`${source} useEffect() derived dependency state ${JSON.stringify(name)} must be primitive Kudzu state`)
+    return [name, dependency.id]
+  }))
   let owner
   let list = false
   if (renderContext.listDepth) {
@@ -178,7 +182,7 @@ export function useEffect(callback, dependencies, module, handler, states, scope
     owner = nextRenderId("e")
     owners.push(owner)
   }
-  if (!renderContext.listDepth || list) renderContext.effects.push({ module, handler, states, scope, source, renderScope: renderContext.renderScope, ...(dependencyIds.length ? { dependencies: dependencyIds } : {}), ...(itemDependencies.length ? { itemDependencies, listState: renderContext.listRoot.state } : {}), ...(cleanup ? { cleanup: true } : {}), ...(owner ? { owner } : {}), ...(list ? { list: true } : {}) })
+  if (!renderContext.listDepth || list) renderContext.effects.push({ module, handler, states, scope, source, renderScope: renderContext.renderScope, ...(dependencyIds.length ? { dependencies: dependencyIds } : {}), ...(dependencyExpressions.length ? { dependencyExpressions, dependencyStates: dependencyStateIds } : {}), ...(itemDependencies.length ? { itemDependencies, listState: renderContext.listRoot.state } : {}), ...(cleanup ? { cleanup: true } : {}), ...(owner ? { owner } : {}), ...(list ? { list: true } : {}) })
   renderContext.handlerModules.add(module)
   renderContext.hasBehaviors = true
   renderContext.hasEffects = true
@@ -424,6 +428,7 @@ export async function renderPage(component, metadata = {}, props = {}, layout) {
           module: effect.module,
           handler: effect.handler,
           ...(effect.dependencies ? { dependencies: effect.dependencies } : {}),
+          ...(effect.dependencyExpressions ? { dependencyExpressions: effect.dependencyExpressions, dependencyStates: effect.dependencyStates } : {}),
           ...(effect.itemDependencies ? { itemDependencies: effect.itemDependencies, listState: effect.listState } : {}),
           ...(effect.cleanup ? { cleanup: true } : {}),
           ...(effect.owner ? { owner: effect.owner } : {}),
@@ -583,7 +588,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     const descriptor = bindingDescriptor(node)
     const stateIds = reactiveStateIds(descriptor)
     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}`)
+    if (namespace === "math") throw new Error("Reactive conditional DOM is not supported inside math")
 
     const id = renderContext.listRoot || renderContext.listRowRoot ? nextRowRenderId("c") : nextRenderId("c")
     const renderBranch = async branch => {
@@ -604,14 +609,17 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     }
     const owned = truthy.states.length || falsy.states.length ? { true: truthy.states, false: falsy.states } : undefined
     const mount = Boolean(owned) || truthy.html.includes("data-k-") || falsy.html.includes("data-k-") || truthy.html.includes("<!--k-text:") || falsy.html.includes("<!--k-text:")
-    const metadata = { id, kind: node.kind, initial: node.value, ...descriptor, ...(owned ? { owned } : {}), ...(mount ? { mount: true } : {}) }
+    const metadata = { id, kind: node.kind, initial: node.value, ...descriptor, ...(namespace === "svg" ? { svg: true } : {}), ...(owned ? { owned } : {}), ...(mount ? { mount: true } : {}) }
     for (const stateId of stateIds) renderContext.conditionStates.add(stateId)
     renderContext.conditions.push(metadata)
     renderContext.hasBehaviors = true
     renderContext.hasBindings = true
     const encoded = escapeJsonAttribute(metadata)
     const current = node.value ? truthy.html : node.kind === "and" ? await renderNode(node.value, namespace, selectValue) : falsy.html
-    return `<template data-k-if='${encoded}'><template data-k-true>${truthy.html}</template><template data-k-false>${falsy.html}</template></template>${current}<template data-k-if-end="${id}"></template>`
+    const branches = namespace === "svg"
+      ? ` data-k-svg-true="${escapeAttribute(truthy.html)}" data-k-svg-false="${escapeAttribute(falsy.html)}"></template>`
+      : `><template data-k-true>${truthy.html}</template><template data-k-false>${falsy.html}</template></template>`
+    return `<template data-k-if='${encoded}'${branches}${current}<template data-k-if-end="${id}"></template>`
   }
   if (node?.[listMarker]) return renderList(node, namespace, selectValue)
   if (node?.[listFieldMarker]) {
@@ -639,6 +647,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     return `<!--k-text:${id}-->${escapeHtml(node.value ?? "")}<!--k-text-end-->`
   }
   if (node?.[listConditionalMarker]) {
+    if (namespace === "svg") throw new Error("Keyed row conditions are not supported inside svg")
     const descriptor = { kind: node.kind, module: node.module, handler: node.handler }
     const owner = renderContext.listRoot ?? renderContext.listRowRoot
     if (owner) owner.conditions = true
@@ -828,12 +837,13 @@ function sharedInitialListMarker() {
 }
 
 async function renderList(node, namespace, selectValue) {
-  if (namespace) throw new Error(`Reactive keyed lists are not supported inside ${namespace}`)
+  if (namespace === "math") throw new Error("Reactive keyed lists are not supported inside math")
+  if (namespace === "svg" && node.ownerField) throw new Error("Nested reactive keyed lists are not supported inside svg")
   const ownerRoot = node.ownerField ? renderContext.listRoot ?? renderContext.listRowRoot : undefined
   const ownerTemplate = Boolean(node.ownerField && renderContext.listTemplate)
   const rowList = node.ownerField ? nextRowList() : undefined
   const id = rowList?.id ?? nextRenderId("l")
-  const descriptor = { id, state: node.items.id, key: node.keyField, keys: node.values.map((item, index) => node.keyField === null ? index : item[node.keyField]), ...(node.items[internalStateMarker] ? { static: true } : {}), ...(node.ownerField ? { ownerField: node.ownerField } : {}), ...(node.selector.length ? { selector: node.selector } : {}), ...(node.selectorStates.length ? { selectorStates: Object.fromEntries(node.selectorStates.map(([name, state]) => [name, state.id])) } : {}), ...(node.indexed ? { indexed: true } : {}), ...(!node.selector.length && node.keyField !== null && node.items[reducerStateMarker] ? { reducer: true } : {}) }
+  const descriptor = { id, state: node.items.id, key: node.keyField, keys: node.values.map((item, index) => node.keyField === null ? index : item[node.keyField]), ...(namespace === "svg" ? { svg: true } : {}), ...(node.items[internalStateMarker] ? { static: true } : {}), ...(node.ownerField ? { ownerField: node.ownerField } : {}), ...(node.selector.length ? { selector: node.selector } : {}), ...(node.selectorStates.length ? { selectorStates: Object.fromEntries(node.selectorStates.map(([name, state]) => [name, state.id])) } : {}), ...(node.indexed ? { indexed: true } : {}), ...(!node.selector.length && node.keyField !== null && node.items[reducerStateMarker] ? { reducer: true } : {}) }
   if (ownerTemplate) {
     ownerRoot.descriptor.children ??= []
     ownerRoot.descriptor.children.push({ id, field: node.ownerField, key: node.keyField, ...(node.selector.length ? { selector: node.selector } : {}) })
@@ -899,7 +909,8 @@ async function renderList(node, namespace, selectValue) {
     renderContext.hasBehaviors = true
     renderContext.hasLists = true
     const prototype = node.ownerField && !ownerTemplate ? "" : template
-    return `<template data-k-list='${escapeJsonAttribute(descriptor)}'>${prototype}</template>${current}<template data-k-list-end="${id}"></template>`
+    const svgTemplate = namespace === "svg" ? ` data-k-svg-template="${escapeAttribute(prototype)}"` : ""
+    return `<template data-k-list='${escapeJsonAttribute(descriptor)}'${svgTemplate}>${namespace === "svg" ? "" : prototype}</template>${current}<template data-k-list-end="${id}"></template>`
   } finally {
     renderContext.listRoot = previousListRoot
     renderContext.listRowRoot = previousListRowRoot

package/framework/list-runtime.js

@@ -44,7 +44,7 @@ function mountLists(root) {
     const end = findEnd(start, descriptor.id)
     const roots = listRoots(start, end)
     const nested = __KUDZU_NESTED_LISTS__ ? mountNestedPrototype(start, descriptor, roots) : undefined
-    const templateRoot = __KUDZU_NESTED_LISTS__ ? nested.templateRoot : start.content.firstElementChild
+    const templateRoot = __KUDZU_NESTED_LISTS__ ? nested.templateRoot : listTemplateRoot(start, descriptor)
     if (__KUDZU_LIST_ROW_HOOKS__) for (let index = 0; index < roots.length; index++) initializeGeneralRowHooks(descriptor, descriptor.keys[index], roots[index], nested?.owner)
     const parts = listItemPartPlan(templateRoot, descriptor.nested)
     const staticRows = __KUDZU_STATIC_COLLECTIONS__ && descriptor.static && parts.directFill ? new Map() : undefined
@@ -63,7 +63,8 @@ function mountLists(root) {
     const list = {
       start,
       descriptor,
-      ...(__KUDZU_NESTED_LISTS__ ? { templateRoot, ...(nested.childPrototypes?.size ? { childPrototypes: nested.childPrototypes } : {}) } : {}),
+      templateRoot,
+      ...(__KUDZU_NESTED_LISTS__ && nested.childPrototypes?.size ? { childPrototypes: nested.childPrototypes } : {}),
       parts,
       ...(__KUDZU_STATIC_COLLECTIONS__ && staticRows ? { staticRows } : {}),
       ...(__KUDZU_STATIC_COLLECTIONS__ && staticEntries ? { staticEntries, staticPositions: staticEntries.positions } : {}),
@@ -196,7 +197,7 @@ function updateList(list) {
     let node = list.roots.get(token)
     if (!node) {
       const staticRoot = __KUDZU_STATIC_COLLECTIONS__ ? list.staticRows?.get(token)?.cloneNode(true) : undefined
-      node = staticRoot ?? (__KUDZU_NESTED_LISTS__ ? list.templateRoot : list.start.content.firstElementChild)?.cloneNode(true)
+      node = staticRoot ?? list.templateRoot?.cloneNode(true)
       if (!staticRoot && 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")
@@ -360,7 +361,7 @@ function updateStableList(list, items) {
     keys.add(token)
     if (index < previous.length && (key !== previous[index][keyField] || appending && item !== previous[index])) stable = false
     if (!stable || items.length === previous.length + 1 || index < previous.length) continue
-    let node = (__KUDZU_NESTED_LISTS__ ? list.templateRoot : list.start.content.firstElementChild)?.cloneNode(true)
+    let node = list.templateRoot?.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")
@@ -545,7 +546,7 @@ function updateReducerList(list, items) {
 }
 
 function addListRoot(list, { item, index = list.roots.size, key, token, value }) {
-  let node = (__KUDZU_NESTED_LISTS__ ? list.templateRoot : list.start.content.firstElementChild)?.cloneNode(true)
+  let node = list.templateRoot?.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")
@@ -862,7 +863,7 @@ function listOwner(start) {
 function mountNestedPrototype(start, descriptor, roots) {
   const owner = descriptor.ownerField ? listOwner(start) : undefined
   const prototypeStart = owner ? childPrototypes.get(owner)?.get(descriptor.id) : undefined
-  const templateRoot = prototypeStart?.content.firstElementChild ?? start.content.firstElementChild
+  const templateRoot = prototypeStart?.content.firstElementChild ?? listTemplateRoot(start, descriptor)
   if (!templateRoot) throw new Error("Nested keyed list has no shared row prototype")
   const prototypes = descriptor.children && new Map(descriptor.children.map(child => [child.id, findChildPrototype(templateRoot, child.id)]))
   if (prototypes && [...prototypes.values()].some(prototype => !prototype)) throw new Error("Keyed list template has no nested row prototype")
@@ -871,6 +872,13 @@ function mountNestedPrototype(start, descriptor, roots) {
   return { owner, childPrototypes: prototypes, templateRoot }
 }
 
+function listTemplateRoot(start, descriptor) {
+  if (!__KUDZU_SVG_LISTS__ || !descriptor.svg) return start.content.firstElementChild
+  const range = start.ownerDocument.createRange()
+  range.selectNode(start)
+  return range.createContextualFragment(start.dataset.kSvgTemplate).firstElementChild
+}
+
 function findChildPrototype(root, id) {
   for (const element of root.children) {
     if (element.matches("template[data-k-list]")) {

package/package.json

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