@barefootjs/jsx 0.33.6 → 0.35.0

package/dist/index.js

@@ -184,6 +184,56 @@ import ts10 from "typescript";
 
 // src/expression-parser.ts
 import ts2 from "typescript";
+
+// src/lowering-registry.ts
+var plugins = [];
+function registerLoweringPlugin(plugin) {
+  const existing = plugins.findIndex((p) => p.name === plugin.name);
+  if (existing >= 0)
+    plugins[existing] = plugin;
+  else
+    plugins.push(plugin);
+}
+function getLoweringPlugins() {
+  return [...plugins];
+}
+function prepareLoweringMatchers(metadata) {
+  const matchers = [];
+  for (const plugin of plugins) {
+    const matcher = plugin.prepare(metadata);
+    if (matcher)
+      matchers.push(matcher);
+  }
+  return matchers;
+}
+function matchLoweringCall(callee, args, metadata) {
+  for (const matcher of prepareLoweringMatchers(metadata)) {
+    const node = matcher(callee, args);
+    if (node)
+      return node;
+  }
+  return null;
+}
+function loweringNodeChildren(node) {
+  if (node.kind === "helper-call")
+    return [...node.args];
+  const children = [node.base];
+  for (const t of node.triples) {
+    if (t.guard)
+      children.push(t.guard);
+    children.push(t.value);
+  }
+  return children;
+}
+function isValidHelperId(helper) {
+  return /^[A-Za-z_][A-Za-z0-9_]*$/.test(helper);
+}
+function __resetLoweringPluginsForTest(next = []) {
+  plugins.length = 0;
+  plugins.push(...next);
+}
+
+// src/expression-parser.ts
 var PARSED_EXPR_KINDS = [
   "identifier",
   "literal",
@@ -526,7 +576,7 @@ function convertNode(node, raw) {
           }
           if (n === undefined || Number.isNaN(n)) {
             const parsedDepth = convertNode(depthNode, raw);
-            if (checkSupport(parsedDepth, "rendered").supported) {
+            if (checkSupport(parsedDepth, "rendered", []).supported) {
               depthExpr = parsedDepth;
               flatDepth = 1;
             } else {
@@ -1304,13 +1354,13 @@ function getUnaryOperatorString(op) {
       return "unknown";
   }
 }
-function isSupported(expr) {
-  return checkSupport(expr, "rendered");
+function isSupported(expr, opts) {
+  return checkSupport(expr, "rendered", opts?.loweringMatchers ?? []);
 }
-function isSupportedValue(expr) {
-  return checkSupport(expr, "value");
+function isSupportedValue(expr, opts) {
+  return checkSupport(expr, "value", opts?.loweringMatchers ?? []);
 }
-function checkSupport(expr, pos) {
+function checkSupport(expr, pos, matchers) {
   switch (expr.kind) {
     case "unsupported":
       return { supported: false, reason: expr.reason };
@@ -1319,7 +1369,7 @@ function checkSupport(expr, pos) {
         return { supported: false, reason: "Unsupported syntax: ObjectLiteralExpression" };
       }
       for (const prop of expr.properties) {
-        const propSupport = checkSupport(prop.kind === "spread" ? prop.expr : prop.value, pos);
+        const propSupport = checkSupport(prop.kind === "spread" ? prop.expr : prop.value, pos, matchers);
         if (!propSupport.supported)
           return propSupport;
       }
@@ -1334,7 +1384,7 @@ function checkSupport(expr, pos) {
       return { supported: false, reason: "Standalone arrow functions / regex literals are not supported" };
     case "array-literal": {
       for (const el of expr.elements) {
-        const elSupport = checkSupport(el, pos);
+        const elSupport = checkSupport(el, pos, matchers);
         if (!elSupport.supported)
           return elSupport;
       }
@@ -1347,28 +1397,39 @@ function checkSupport(expr, pos) {
           reason: `String.prototype.${expr.method} supports only a string pattern + string replacement (the regex form is deferred); use a string pattern or wrap the expression in /* @client */`
         };
       }
-      const objSupport = checkSupport(expr.object, pos);
+      const objSupport = checkSupport(expr.object, pos, matchers);
       if (!objSupport.supported)
         return objSupport;
       for (const arg of expr.args) {
-        const argSupport = checkSupport(arg, pos);
+        const argSupport = checkSupport(arg, pos, matchers);
         if (!argSupport.supported)
           return argSupport;
       }
       if (expr.method === "flat" && expr.depthExpr) {
-        const depthSupport = checkSupport(expr.depthExpr, pos);
+        const depthSupport = checkSupport(expr.depthExpr, pos, matchers);
         if (!depthSupport.supported)
           return depthSupport;
       }
       return { supported: true, level: "L2" };
     }
     case "call": {
+      for (const matcher of matchers) {
+        const node = matcher(expr.callee, expr.args);
+        if (!node)
+          continue;
+        for (const child of loweringNodeChildren(node)) {
+          const childSupport = checkSupport(child, pos, matchers);
+          if (!childSupport.supported)
+            return childSupport;
+        }
+        return { supported: true, level: "L2" };
+      }
       const cb = asCallbackMethodCall(expr);
       if (cb) {
-        const objSupport = checkSupport(cb.object, pos);
+        const objSupport = checkSupport(cb.object, pos, matchers);
         if (!objSupport.supported)
           return objSupport;
-        const bodySupport = checkSupport(cb.arrow.body, pos);
+        const bodySupport = checkSupport(cb.arrow.body, pos, matchers);
         if (!bodySupport.supported) {
           return {
             supported: false,
@@ -1377,13 +1438,13 @@ function checkSupport(expr, pos) {
           };
         }
         for (const rest of cb.args) {
-          const restSupport = checkSupport(rest, pos);
+          const restSupport = checkSupport(rest, pos, matchers);
           if (!restSupport.supported)
             return restSupport;
         }
         return { supported: true, level: "L5" };
       }
-      const calleeSupport = checkSupport(expr.callee, pos);
+      const calleeSupport = checkSupport(expr.callee, pos, matchers);
       if (!calleeSupport.supported) {
         return calleeSupport;
       }
@@ -1402,7 +1463,7 @@ function checkSupport(expr, pos) {
         return { supported: true, level: "L1" };
       }
       for (const arg of expr.args) {
-        const argSupport = checkSupport(arg, pos);
+        const argSupport = checkSupport(arg, pos, matchers);
         if (!argSupport.supported) {
           return argSupport;
         }
@@ -1410,7 +1471,7 @@ function checkSupport(expr, pos) {
       return { supported: true, level: "L2" };
     }
     case "member": {
-      const objSupport = checkSupport(expr.object, pos);
+      const objSupport = checkSupport(expr.object, pos, matchers);
       if (!objSupport.supported) {
         return objSupport;
       }
@@ -1420,19 +1481,19 @@ function checkSupport(expr, pos) {
       return { supported: true, level: "L2" };
     }
     case "index-access": {
-      const objSupport = checkSupport(expr.object, pos);
+      const objSupport = checkSupport(expr.object, pos, matchers);
       if (!objSupport.supported)
         return objSupport;
-      const indexSupport = checkSupport(expr.index, pos);
+      const indexSupport = checkSupport(expr.index, pos, matchers);
       if (!indexSupport.supported)
         return indexSupport;
       return { supported: true, level: "L2" };
     }
     case "binary": {
-      const leftSupport = checkSupport(expr.left, pos);
+      const leftSupport = checkSupport(expr.left, pos, matchers);
       if (!leftSupport.supported)
         return leftSupport;
-      const rightSupport = checkSupport(expr.right, pos);
+      const rightSupport = checkSupport(expr.right, pos, matchers);
       if (!rightSupport.supported)
         return rightSupport;
       if (["===", "==", "!==", "!=", ">", "<", ">=", "<="].includes(expr.op)) {
@@ -1444,7 +1505,7 @@ function checkSupport(expr, pos) {
       return { supported: false, reason: `Unknown operator: ${expr.op}` };
     }
     case "unary": {
-      const argSupport = checkSupport(expr.argument, pos);
+      const argSupport = checkSupport(expr.argument, pos, matchers);
       if (!argSupport.supported)
         return argSupport;
       if (expr.op === "!") {
@@ -1456,25 +1517,25 @@ function checkSupport(expr, pos) {
       return { supported: false, reason: `Unsupported unary operator: ${expr.op}` };
     }
     case "logical": {
-      const leftSupport = checkSupport(expr.left, pos);
+      const leftSupport = checkSupport(expr.left, pos, matchers);
       if (!leftSupport.supported)
         return leftSupport;
       if (expr.op === "??" && expr.right.kind === "object-literal" && expr.right.properties.length === 0) {
         return { supported: true, level: "L4" };
       }
-      const rightSupport = checkSupport(expr.right, pos);
+      const rightSupport = checkSupport(expr.right, pos, matchers);
       if (!rightSupport.supported)
         return rightSupport;
       return { supported: true, level: "L4" };
     }
     case "conditional": {
-      const testSupport = checkSupport(expr.test, pos);
+      const testSupport = checkSupport(expr.test, pos, matchers);
       if (!testSupport.supported)
         return testSupport;
-      const consSupport = checkSupport(expr.consequent, pos);
+      const consSupport = checkSupport(expr.consequent, pos, matchers);
       if (!consSupport.supported)
         return consSupport;
-      const altSupport = checkSupport(expr.alternate, pos);
+      const altSupport = checkSupport(expr.alternate, pos, matchers);
       if (!altSupport.supported)
         return altSupport;
       return { supported: true, level: "L4" };
@@ -1482,7 +1543,7 @@ function checkSupport(expr, pos) {
     case "template-literal": {
       for (const part of expr.parts) {
         if (part.type === "expression") {
-          const partSupport = checkSupport(part.expr, pos);
+          const partSupport = checkSupport(part.expr, pos, matchers);
           if (!partSupport.supported)
             return partSupport;
         }
@@ -2628,12 +2689,22 @@ function renderLoopBindingAccess(b, base) {
   }
   return parent;
 }
-function wrapLoopParamAsAccessor(expr, paramName, bindings) {
+function wrapLoopParamAsAccessor(expr, paramName, bindings, indexParam) {
+  let result;
   if (bindings && bindings.length > 0) {
-    return rewriteLoopBindingRefs(expr, bindings, "__bfItem()");
+    result = rewriteLoopBindingRefs(expr, bindings, "__bfItem()");
+  } else {
+    const re = new RegExp(`${ID_BOUNDARY_BEFORE}${escapeIdentifierForRegex(paramName)}(?!\\s*\\()(?!-)${ID_BOUNDARY_AFTER}`, "gu");
+    result = replaceInExprContexts(expr, re, () => `${paramName}()`);
   }
-  const re = new RegExp(`${ID_BOUNDARY_BEFORE}${escapeIdentifierForRegex(paramName)}(?!\\s*\\()(?!-)${ID_BOUNDARY_AFTER}`, "gu");
-  return replaceInExprContexts(expr, re, () => `${paramName}()`);
+  if (indexParam && indexParam !== paramName) {
+    result = wrapIndexParamAsAccessor(result, indexParam);
+  }
+  return result;
+}
+function wrapIndexParamAsAccessor(expr, indexParam) {
+  const re = new RegExp(`${ID_BOUNDARY_BEFORE}${escapeIdentifierForRegex(indexParam)}(?!\\s*\\()(?!-)${ID_BOUNDARY_AFTER}`, "gu");
+  return replaceInExprContexts(expr, re, () => `${indexParam}()`);
 }
 function rewriteLoopBindingRefs(expr, bindings, accessor) {
   const byName = new Map;
@@ -2680,7 +2751,7 @@ function wrapExprWithLoopParams(expr, loopParams) {
   let result = expr;
   for (const p of loopParams) {
     const spec = typeof p === "string" ? { param: p } : p;
-    result = wrapLoopParamAsAccessor(result, spec.param, spec.bindings);
+    result = wrapLoopParamAsAccessor(result, spec.param, spec.bindings, spec.index);
   }
   return result;
 }
@@ -2967,6 +3038,20 @@ function buildPropAliasMap(params) {
   }
   return map;
 }
+function resolveBodyDestructuredPropAliases(localConstants, propsObjectName) {
+  const aliases = new Map;
+  if (propsObjectName === null)
+    return aliases;
+  for (const c of localConstants) {
+    if (c.isModule)
+      continue;
+    const m = c.parsed;
+    if (m?.kind === "member" && !m.computed && m.object.kind === "identifier" && m.object.name === propsObjectName) {
+      aliases.set(c.name, m.property);
+    }
+  }
+  return aliases;
+}
 function boundPropLocalNames(b) {
   if (b.propsObjectName !== null)
     return EMPTY_SET;
@@ -3199,6 +3284,18 @@ function resolveGetterAliases(localConstants, isGetter) {
   }
   return aliases;
 }
+function collectAliasableGetterNames(signals, memos) {
+  const getterNames = new Set;
+  for (const sig of signals) {
+    if (sig.getter && !sig.isModule && !sig.envReader)
+      getterNames.add(sig.getter);
+  }
+  for (const memo of memos) {
+    if (!memo.isModule)
+      getterNames.add(memo.name);
+  }
+  return getterNames;
+}
 function buildSignalMemoEnv(signals, memos, propsObjectName, localConstants = []) {
   const substitutions = new Map;
   for (const s of signals) {
@@ -3378,6 +3475,65 @@ class BindingScope {
   }
 }
 
+// src/ir-to-client-js/safe-html.ts
+function safeHtml(expr) {
+  return expr;
+}
+function interp(span) {
+  return `\${${span}}`;
+}
+function escapedText(expr) {
+  return safeHtml(`escapeText(${expr})`);
+}
+function escapedTextOrMarkup(expr) {
+  return safeHtml(`escapeTextOrMarkup(${expr})`);
+}
+function branchSlotValue(expr, slotsVar) {
+  return safeHtml(`__bfSlot(${expr}, ${slotsVar})`);
+}
+function childrenMarkup(expr) {
+  return safeHtml(`markupOrEmpty(${expr})`);
+}
+function joinedMarkup(expr) {
+  return safeHtml(`Array.isArray(${expr}) ? ${expr}.join('') : (${expr} ?? '')`);
+}
+function renderChildCall(registryName, propsExpr, tailArgs) {
+  return safeHtml(`renderChild('${registryName}', ${propsExpr}${tailArgs})`);
+}
+function dangerousInnerHtml(expr) {
+  return safeHtml(`((${expr}) ?? {}).__html ?? ''`);
+}
+function conditionalMarkup(condition, whenTrue, whenFalse) {
+  return safeHtml(`${condition} ? \`${whenTrue}\` : \`${whenFalse}\``);
+}
+function mappedRowsMarkup(arrayExpr, method, params, body) {
+  return safeHtml(`${arrayExpr}.${method}(${params} => ${body}).join('')`);
+}
+var EMPTY_MARKUP = safeHtml("''");
+function isChildrenPassthroughExpr(expr) {
+  return /^([A-Za-z_$][\w$]*\.)?children$/.test(expr.trim());
+}
+function spliceChildValue(node, valueExpr, cx) {
+  if (node.joinArrayChild)
+    return joinedMarkup(valueExpr);
+  if (cx.branchSlotsVar)
+    return branchSlotValue(valueExpr, cx.branchSlotsVar);
+  if (node.slotId) {
+    return cx.markupSlotIds?.has(node.slotId) ? escapedTextOrMarkup(valueExpr) : escapedText(valueExpr);
+  }
+  const resolved = valueExpr.trim().replace(/^\(+|\)+$/g, "");
+  if (isChildrenPassthroughExpr(node.expr) || isChildrenPassthroughExpr(resolved)) {
+    return childrenMarkup(valueExpr);
+  }
+  return escapedText(valueExpr);
+}
+
+// src/ir-to-client-js/markup-slots.ts
+var DYNAMIC_ELEMENT_WRITER_KIND = "markup";
+function markupSlotIdsOf(ctx) {
+  return new Set(ctx.dynamicElements.map((e) => e.slotId));
+}
+
 // src/ir-to-client-js/html-template.ts
 function createStringProtector() {
   const strings = [];
@@ -3547,22 +3703,11 @@ function templateAttrExpr(attrName, valExpr, presenceOrUndefined) {
 function escapeAttrValueExpr(valExpr) {
   return `escapeAttr(${valExpr})`;
 }
-function escapeTextSlotExpr(innerExpr, isMarkup = false) {
-  return `${isMarkup ? "escapeTextOrMarkup" : "escapeText"}(${innerExpr})`;
-}
-function isChildrenPassthroughExpr(expr) {
-  return /^([A-Za-z_$][\w$]*\.)?children$/.test(expr.trim());
-}
-function bareSpliceExpr(node, valueExpr) {
-  const resolved = valueExpr.trim().replace(/^\(+|\)+$/g, "");
-  const isChildren = isChildrenPassthroughExpr(node.expr) || isChildrenPassthroughExpr(resolved);
-  return !node.joinArrayChild && isChildren ? `markupOrEmpty(${valueExpr})` : valueExpr;
-}
 function dangerouslyHtmlChildren(attrs, toExpr) {
   const attr = attrs.find((a) => a.name === "dangerouslySetInnerHTML");
   if (!attr || attr.value.kind !== "expression")
     return null;
-  return `\${((${toExpr(attr.value)}) ?? {}).__html ?? ''}`;
+  return interp(dangerousInnerHtml(toExpr(attr.value)));
 }
 function transformKeyValue(value, transformExpr) {
   switch (value.kind) {
@@ -3678,7 +3823,7 @@ function buildSpreadAttrsMergeCall(args) {
   return `\${spreadAttrs({${objMembers.join(", ")}})}`;
 }
 function itemAnchorTemplate(keyExpr) {
-  return `<!--${loopItemMarker("${" + keyExpr + "}")}-->`;
+  return `<!--${loopItemMarker("${escapeCommentText(" + keyExpr + ")}")}-->`;
 }
 function renderPreamble(preamble, opts) {
   let out = "";
@@ -3687,9 +3832,9 @@ function renderPreamble(preamble, opts) {
       const text = opts.textVariant === "template" ? seg.templateText ?? seg.text : seg.text;
       out += opts.transformJs ? opts.transformJs(text) : text;
     } else if (opts.rawLeaf) {
-      out += opts.renderLeaf(escapeLeafTextExpressions(seg.ir));
+      out += opts.renderLeaf(seg.ir);
     } else {
-      out += "`" + opts.renderLeaf(escapeLeafTextExpressions(seg.ir)) + "`";
+      out += "`" + opts.renderLeaf(seg.ir) + "`";
     }
   }
   return out;
@@ -3734,36 +3879,12 @@ function renderFlatMapProjectionClientBody(inner, restSpreadNames) {
   const chained = applyLoopChain(inner);
   const params = inner.index ? `(${inner.param}, ${inner.index})` : `(${inner.param})`;
   const key = inner.key ? `(${inner.key})` : "undefined";
-  const html = inner.children.map((c) => irToHtmlTemplate(escapeLeafTextExpressions(c), restSpreadNames, 1, undefined, undefined)).join("");
+  const html = inner.children.map((c) => irToHtmlTemplate(c, restSpreadNames, 1, undefined, undefined)).join("");
   return `${chained}.map(${params} => ({ k: ${key}, h: \`${html}\` }))`;
 }
-function escapeLeafTextExpressions(ir) {
-  switch (ir.type) {
-    case "element":
-      return { ...ir, children: ir.children.map(escapeLeafTextExpressions) };
-    case "fragment":
-      return { ...ir, children: ir.children.map(escapeLeafTextExpressions) };
-    case "expression": {
-      if (ir.expr === "null" || ir.expr === "undefined")
-        return ir;
-      if (ir.slotId || ir.expr.trimStart().startsWith("escapeText("))
-        return ir;
-      return { ...ir, expr: `escapeText((${ir.expr}))`, templateExpr: ir.templateExpr ? `escapeText((${ir.templateExpr}))` : ir.templateExpr };
-    }
-    case "conditional":
-      return {
-        ...ir,
-        whenTrue: escapeLeafTextExpressions(ir.whenTrue),
-        whenFalse: ir.whenFalse ? escapeLeafTextExpressions(ir.whenFalse) : ir.whenFalse
-      };
-    default:
-      return ir;
-  }
-}
 function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, branchSlotsVar, inHoistedChildren = false) {
   const recurse = (n) => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, inHoistedChildren);
   const wrapExpr = (expr) => wrapExprWithLoopParams(expr, loopParams);
-  const wrapInterpolation = (expr) => branchSlotsVar ? `__bfSlot(${expr}, ${branchSlotsVar})` : expr;
   switch (node.type) {
     case "element": {
       const mergeCtx = {
@@ -3809,25 +3930,17 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
     case "expression": {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
-      const escapeForClient = (e) => node.escapeInClientTemplate ? `escapeText(${e})` : e;
-      if (node.markerless) {
-        const bare = escapeForClient(wrapInterpolation(wrapExpr(node.expr)));
-        return `\${${bare}}`;
-      }
-      const inner = escapeForClient(wrapInterpolation(wrapExpr(node.expr)));
-      const valueExpr = node.joinArrayChild ? `Array.isArray(${inner}) ? ${inner}.join('') : (${inner} ?? '')` : inner;
-      if (node.slotId) {
-        const slotted = branchSlotsVar || node.joinArrayChild ? valueExpr : escapeTextSlotExpr(valueExpr);
-        return `<!--bf:${node.slotId}-->\${${slotted}}<!--/-->`;
-      }
-      return `\${${bareSpliceExpr(node, valueExpr)}}`;
+      const hole = interp(spliceChildValue(node, wrapExpr(node.expr), { branchSlotsVar }));
+      if (node.markerless)
+        return hole;
+      return node.slotId ? `<!--bf:${node.slotId}-->${hole}<!--/-->` : hole;
     }
     case "conditional": {
       const trueBranch = recurse(node.whenTrue);
       const falseBranch = recurse(node.whenFalse);
       const trueHtml = node.slotId ? addCondAttrToTemplate(trueBranch, node.slotId) : trueBranch;
       const falseHtml = node.slotId ? addCondAttrToTemplate(falseBranch, node.slotId) : falseBranch;
-      return `\${${wrapExpr(node.condition)} ? \`${trueHtml}\` : \`${falseHtml}\`}`;
+      return interp(conditionalMarkup(wrapExpr(node.condition), trueHtml, falseHtml));
     }
     case "fragment":
       return node.children.map(recurse).join("");
@@ -3864,7 +3977,7 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       const propsExpr = propsEntries.length > 0 ? `{${propsEntries.join(", ")}}` : "{}";
       const keyProp = node.props.find((p) => p.name === "key");
       const keyArg = keyProp ? `, ${attrValueToString(keyProp.value) ?? "undefined"}` : "";
-      return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${renderChildScopeArgs(node, keyArg)})}`;
+      return interp(renderChildCall(nameForRegistryRef(node.name), propsExpr, renderChildScopeArgs(node, keyArg)));
     }
     case "loop": {
       const innerRecurse = (n) => irToHtmlTemplate(n, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar);
@@ -3882,12 +3995,12 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
         const body = renderPreamble(node.flatMapCallback, {
           renderLeaf: (ir) => irToHtmlTemplate(stripLeafKeyAttr(ir), restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar)
         });
-        mapExpr = `\${${wrappedArray}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(wrappedArray, "flatMap", node.flatMapCallback.params, body));
       } else if (node.preamble) {
         const preamble = renderPreamble(node.preamble, { textVariant: "client", renderLeaf: (ir) => irToHtmlTemplate(ir, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar) });
-        mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => { ${preamble} return \`${childTemplate}\` }).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(wrappedArray, iterMethod, callbackParam, `{ ${preamble} return \`${childTemplate}\` }`));
       } else {
-        mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => \`${childTemplate}\`).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(wrappedArray, iterMethod, callbackParam, `\`${childTemplate}\``));
       }
       return `<!--${loopStartMarker(node.markerId)}-->${mapExpr}<!--${loopEndMarker(node.markerId)}-->`;
     }
@@ -4146,20 +4259,15 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
     case "expression": {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
-      const wrapped = wrapExpr(node.expr);
-      const value = node.joinArrayChild ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')` : wrapped;
-      if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped)}}<!--/-->`;
-      }
-      const spliced = bareSpliceExpr(node, value);
-      return `\${${node.escapeInClientTemplate ? `escapeText(${spliced})` : spliced}}`;
+      const hole = interp(spliceChildValue(node, wrapExpr(node.expr), {}));
+      return node.slotId ? `<!--bf:${node.slotId}-->${hole}<!--/-->` : hole;
     }
     case "conditional": {
       const trueBranch = recurse(node.whenTrue);
       const falseBranch = recurse(node.whenFalse);
       const trueHtml = node.slotId ? addCondAttrToTemplate(trueBranch, node.slotId) : trueBranch;
       const falseHtml = node.slotId ? addCondAttrToTemplate(falseBranch, node.slotId) : falseBranch;
-      return `\${${wrapExpr(node.condition)} ? \`${trueHtml}\` : \`${falseHtml}\`}`;
+      return interp(conditionalMarkup(wrapExpr(node.condition), trueHtml, falseHtml));
     }
     case "fragment":
       return node.children.map(recurse).join("");
@@ -4183,12 +4291,12 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
         const body = renderPreamble(node.flatMapCallback, {
           renderLeaf: (ir) => irToPlaceholderTemplate(stripLeafKeyAttr(ir), restSpreadNames, loopDepth + 1, loopParams)
         });
-        mapExpr = `\${${wrappedArray}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(wrappedArray, "flatMap", node.flatMapCallback.params, body));
       } else if (node.preamble) {
         const preamble = renderPreamble(node.preamble, { textVariant: "client", renderLeaf: (ir) => irToPlaceholderTemplate(ir, restSpreadNames, loopDepth + 1, loopParams) });
-        mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => { ${preamble} return \`${childTemplate}\` }).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(wrappedArray, iterMethod, callbackParam, `{ ${preamble} return \`${childTemplate}\` }`));
       } else {
-        mapExpr = `\${${wrappedArray}.${iterMethod}(${callbackParam} => \`${childTemplate}\`).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(wrappedArray, iterMethod, callbackParam, `\`${childTemplate}\``));
       }
       return `<!--${loopStartMarker(node.markerId)}-->${mapExpr}<!--${loopEndMarker(node.markerId)}-->`;
     }
@@ -4390,13 +4498,8 @@ function irToComponentTemplateWithOpts(node, opts) {
           return "";
         return `<!--bf:${node.slotId}--><!--/-->`;
       }
-      const wrapped = transformExpr(node.expr, node.templateExpr);
-      const value = node.joinArrayChild ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')` : wrapped;
-      if (node.slotId) {
-        const isMarkup = opts.markupSlotIds?.has(node.slotId) ?? false;
-        return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped, isMarkup)}}<!--/-->`;
-      }
-      return `\${${bareSpliceExpr(node, value)}}`;
+      const hole = interp(spliceChildValue(node, transformExpr(node.expr, node.templateExpr), { markupSlotIds: opts.markupSlotIds }));
+      return node.slotId ? `<!--bf:${node.slotId}-->${hole}<!--/-->` : hole;
     }
     case "conditional": {
       if (node.clientOnly && node.slotId) {
@@ -4406,7 +4509,7 @@ function irToComponentTemplateWithOpts(node, opts) {
       const falseBranch = recurse(node.whenFalse);
       const trueHtml = node.slotId ? addCondAttrToTemplate(trueBranch, node.slotId) : trueBranch;
       const falseHtml = node.slotId ? addCondAttrToTemplate(falseBranch, node.slotId) : falseBranch;
-      return `\${${transformExpr(node.condition, node.templateCondition)} ? \`${trueHtml}\` : \`${falseHtml}\`}`;
+      return interp(conditionalMarkup(transformExpr(node.condition, node.templateCondition), trueHtml, falseHtml));
     }
     case "fragment":
       return node.children.map(recurse).join("");
@@ -4444,7 +4547,7 @@ function irToComponentTemplateWithOpts(node, opts) {
       const propsExpr = propsEntries.length > 0 ? `{${propsEntries.join(", ")}}` : "{}";
       const keyProp = node.props.find((p) => p.name === "key");
       const keyArg = keyProp ? `, ${transformKeyValue(keyProp.value, transformExpr)}` : "";
-      return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${keyArg})}`;
+      return interp(renderChildCall(nameForRegistryRef(node.name), propsExpr, keyArg));
     }
     case "loop": {
       const innerOpts = { ...opts, loopDepth: loopDepth + 1 };
@@ -4454,7 +4557,7 @@ function irToComponentTemplateWithOpts(node, opts) {
     case "if-statement": {
       const consequent = recurse(node.consequent);
       const alternate = node.alternate ? recurse(node.alternate) : "";
-      return `\${${transformExpr(node.condition, node.templateCondition)} ? \`${consequent}\` : \`${alternate}\`}`;
+      return interp(conditionalMarkup(transformExpr(node.condition, node.templateCondition), consequent, alternate));
     }
     case "provider":
     case "async":
@@ -4542,7 +4645,7 @@ function generateCsrTemplate(node, inlinableConstants, ctx, restSpreadNames, pro
     }
   }
   const effectiveUnsafeLocalNames = mergeCsrNullUnsafe(ctx, unsafeLocalNames);
-  const markupSlotIds = new Set(ctx.dynamicElements.map((e) => e.slotId));
+  const markupSlotIds = markupSlotIdsOf(ctx);
   return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1, markupSlotIds, restPropsName: ctx.restPropsName });
 }
 function mergeCsrNullUnsafe(ctx, unsafeLocalNames) {
@@ -4741,13 +4844,8 @@ function generateCsrTemplateWithOpts(node, opts) {
       }
       {
         const transformed = transformExpr(node.expr, node.templateExpr);
-        const expr = transformed === UNSAFE_TEMPLATE_EXPR ? "''" : transformed;
-        const value = node.joinArrayChild ? `Array.isArray(${expr}) ? ${expr}.join('') : (${expr} ?? '')` : expr;
-        if (node.slotId) {
-          const isMarkup = opts.markupSlotIds?.has(node.slotId) ?? false;
-          return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(expr, isMarkup)}}<!--/-->`;
-        }
-        return `\${${bareSpliceExpr(node, value)}}`;
+        const hole = interp(transformed === UNSAFE_TEMPLATE_EXPR ? EMPTY_MARKUP : spliceChildValue(node, transformed, { markupSlotIds: opts.markupSlotIds }));
+        return node.slotId ? `<!--bf:${node.slotId}-->${hole}<!--/-->` : hole;
       }
     case "conditional": {
       if (node.clientOnly && node.slotId) {
@@ -4757,7 +4855,7 @@ function generateCsrTemplateWithOpts(node, opts) {
       const falseBranch = recurse(node.whenFalse);
       const trueHtml = node.slotId ? addCondAttrToTemplate(trueBranch, node.slotId) : trueBranch;
       const falseHtml = node.slotId ? addCondAttrToTemplate(falseBranch, node.slotId) : falseBranch;
-      return `\${${transformExpr(node.condition, node.templateCondition)} ? \`${trueHtml}\` : \`${falseHtml}\`}`;
+      return interp(conditionalMarkup(transformExpr(node.condition, node.templateCondition), trueHtml, falseHtml));
     }
     case "fragment":
       return node.children.map(recurse).join("");
@@ -4806,7 +4904,7 @@ function generateCsrTemplateWithOpts(node, opts) {
       const propsExpr = propsEntries.length > 0 ? `{${propsEntries.join(", ")}}` : "{}";
       const keyProp = node.props.find((p) => p.name === "key");
       const keyArg = keyProp ? `, ${transformKeyValue(keyProp.value, transformExpr)}` : "";
-      return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${renderChildScopeArgs(node, keyArg)})}`;
+      return interp(renderChildCall(nameForRegistryRef(node.name), propsExpr, renderChildScopeArgs(node, keyArg)));
     }
     case "loop": {
       const childScope = (opts.scope ?? BindingScope.EMPTY).enterLoopRow(node);
@@ -4839,19 +4937,19 @@ function generateCsrTemplateWithOpts(node, opts) {
           transformJs: (t) => rewritePropsObjectRef(t, propsObjectName ?? null, restPropsName ?? null, { enclosingScope: childScope }),
           renderLeaf: (ir) => recurseInLoopBody(stripLeafKeyAttr(ir))
         });
-        mapExpr = `\${${iterArrayExpr}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(iterArrayExpr, "flatMap", node.flatMapCallback.params, body));
       } else if (node.preamble) {
         const preamble = renderPreamble(node.preamble, { textVariant: "template", transformJs: (t) => rewritePropsObjectRef(t, propsObjectName ?? null, restPropsName ?? null, { enclosingScope: childScope }), renderLeaf: (ir) => recurseInLoopBody(ir) });
-        mapExpr = `\${${iterArrayExpr}.${iterMethod}(${callbackParam} => { ${preamble} return \`${childTemplate}\` }).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(iterArrayExpr, iterMethod, callbackParam, `{ ${preamble} return \`${childTemplate}\` }`));
       } else {
-        mapExpr = `\${${iterArrayExpr}.${iterMethod}(${callbackParam} => \`${childTemplate}\`).join('')}`;
+        mapExpr = interp(mappedRowsMarkup(iterArrayExpr, iterMethod, callbackParam, `\`${childTemplate}\``));
       }
       return `<!--${loopStartMarker(node.markerId)}-->${mapExpr}<!--${loopEndMarker(node.markerId)}-->`;
     }
     case "if-statement": {
       const consequent = recurse(node.consequent);
       const alternate = node.alternate ? recurse(node.alternate) : "";
-      return `\${${transformExpr(node.condition, node.templateCondition)} ? \`${consequent}\` : \`${alternate}\`}`;
+      return interp(conditionalMarkup(transformExpr(node.condition, node.templateCondition), consequent, alternate));
     }
     case "provider":
     case "async":
@@ -4952,8 +5050,6 @@ function collectAstPropRefs(node, propNames, out) {
   walkWithScope(node, (n, parent, shadowed) => {
     if (shadowed || !propNames.has(n.text))
       return;
-    if (parent && ts7.isShorthandPropertyAssignment(parent) && parent.name === n)
-      return;
     if (isNonValuePosition(n, parent))
       return;
     out.add(n.text);
@@ -7179,6 +7275,7 @@ var CLIENT_EXPORTS = new Set([
   "isSSRPortal",
   "findSiblingSlot",
   "cleanupPortalPlaceholder",
+  "trackPosition",
   "createSearchParams",
   "queryHref",
   "formatDate",
@@ -8498,7 +8595,8 @@ var BROWSER_ONLY_CLIENT_APIS = new Set([
   "createPortal",
   "isSSRPortal",
   "findSiblingSlot",
-  "cleanupPortalPlaceholder"
+  "cleanupPortalPlaceholder",
+  "trackPosition"
 ]);
 function importsBrowserOnlyClientApi(ctx) {
   for (const imp of ctx.imports) {
@@ -10734,9 +10832,8 @@ function collectBranchLocalPropRefsViaSubstitution(node, ctx) {
   function visit2(n, parent) {
     if (ts14.isIdentifier(n) && propDepsMap.has(n.text)) {
       const isObjectKey = parent && ts14.isPropertyAssignment(parent) && parent.name === n;
-      const isShorthand = parent && ts14.isShorthandPropertyAssignment(parent) && parent.name === n;
       const isAccessName = parent && ts14.isPropertyAccessExpression(parent) && parent.name === n;
-      if (!isObjectKey && !isShorthand && !isAccessName) {
+      if (!isObjectKey && !isAccessName) {
         const deps = propDepsMap.get(n.text);
         if (deps && deps.size > 0) {
           if (!acc)
@@ -11214,8 +11311,7 @@ function lowerFormControlValueSsr(tagName, attrs, children) {
     children.push({
       type: "expression",
       expr,
-      templateExpr: `escapeText(${templateExpr ?? expr})`,
-      escapeInClientTemplate: true,
+      templateExpr,
       typeInfo: null,
       reactive: false,
       slotId: null,
@@ -11226,26 +11322,76 @@ function lowerFormControlValueSsr(tagName, attrs, children) {
   }
   const selectedForLiteral = (optValue) => AttrValueOf.expression(`(${expr}) === ${JSON.stringify(optValue)}`, templateExpr !== undefined ? { templateExpr: `(${templateExpr}) === ${JSON.stringify(optValue)}` } : undefined);
   const selectedForExpr = (optExpr, optTemplateExpr) => AttrValueOf.expression(`(${expr}) === (${optExpr})`, templateExpr !== undefined || optTemplateExpr !== undefined ? { templateExpr: `(${templateExpr ?? expr}) === (${optTemplateExpr ?? optExpr})` } : undefined);
+  const matchConditions = [];
+  let optionSetIsDynamic = false;
   const distribute = (nodes) => {
     for (const n of nodes) {
+      if (n.type === "text")
+        continue;
       if (n.type === "element" && n.tag === "option") {
-        if (n.attrs.some((a) => a.name === "selected"))
+        if (n.attrs.some((a) => a.name === "selected")) {
+          optionSetIsDynamic = true;
           continue;
+        }
         const optValue = n.attrs.find((a) => a.name === "value");
-        if (!optValue)
+        if (!optValue) {
+          optionSetIsDynamic = true;
           continue;
+        }
         if (optValue.value.kind === "literal") {
-          n.attrs.push({ name: "selected", value: selectedForLiteral(optValue.value.value), loc: n.loc });
+          const selected = selectedForLiteral(optValue.value.value);
+          n.attrs.push({ name: "selected", value: selected, loc: n.loc });
+          matchConditions.push(selected);
         } else if (optValue.value.kind === "expression") {
           const selected = selectedForExpr(optValue.value.expr, optValue.value.templateExpr);
           n.attrs.push({ name: "selected", value: selected, loc: n.loc });
+          matchConditions.push(selected);
+        } else {
+          optionSetIsDynamic = true;
         }
-      } else if (n.type === "fragment" || n.type === "loop" || n.type === "element" && n.tag === "optgroup") {
+      } else if (n.type === "fragment" || n.type === "element" && n.tag === "optgroup") {
         distribute(n.children);
+      } else if (n.type === "loop") {
+        optionSetIsDynamic = true;
+        distribute(n.children);
+      } else {
+        optionSetIsDynamic = true;
       }
     }
   };
   distribute(children);
+  if (optionSetIsDynamic || matchConditions.length === 0)
+    return;
+  if (isMultiSelection(attrs))
+    return;
+  const orExpr = matchConditions.map((c) => `(${c.expr})`).join(" || ");
+  const orTemplateExpr = matchConditions.some((c) => c.templateExpr !== undefined) ? matchConditions.map((c) => `(${c.templateExpr ?? c.expr})`).join(" || ") : undefined;
+  children.unshift({
+    type: "element",
+    tag: "option",
+    attrs: [
+      { name: "value", value: AttrValueOf.literal(""), loc: valueAttr.loc },
+      { name: "disabled", value: AttrValueOf.booleanAttr(), loc: valueAttr.loc },
+      { name: "hidden", value: AttrValueOf.booleanAttr(), loc: valueAttr.loc },
+      {
+        name: "selected",
+        value: AttrValueOf.expression(`!(${orExpr})`, orTemplateExpr !== undefined ? { templateExpr: `!(${orTemplateExpr})` } : undefined),
+        loc: valueAttr.loc
+      }
+    ],
+    events: [],
+    ref: null,
+    children: [],
+    slotId: null,
+    needsScope: false,
+    loc: valueAttr.loc
+  });
+}
+function isMultiSelection(attrs) {
+  if (attrs.some((a) => a.name === "multiple"))
+    return true;
+  const sizeAttr = attrs.find((a) => a.name === "size");
+  return sizeAttr?.value.kind === "literal" && Number(sizeAttr.value.value) > 1;
 }
 function transformHtmlElement(node, ctx, tagName) {
   const { attrs, events, ref } = processAttributes(node.openingElement.attributes, ctx);
@@ -15608,7 +15754,7 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
       },
       loop: ({ node: n, scope, descend }) => {
         const emitDepth = fixedDepth ?? scope.depth + 1;
-        const loopParamsForTemplate = outerLoopParam ? [outerLoopParam, { param: n.param, bindings: n.paramBindings }] : undefined;
+        const loopParamsForTemplate = outerLoopParam ? [outerLoopParam, { param: n.param, bindings: n.paramBindings, index: n.index }] : undefined;
         const template = n.children.map((c) => irToPlaceholderTemplate(c, undefined, emitDepth, loopParamsForTemplate)).join("");
         const refsOuter = outerLoopParam ? identifierPattern(outerLoopParam).test(n.array) : false;
         const bindings = emptyLoopChildBindings();
@@ -16205,7 +16351,7 @@ function collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loop
       const readsPreamble = preambleNames !== undefined && preambleNames.size > 0 && anyNameIn(expanded.freeIds ?? extractFreeIdentifiersFromText(expanded.expr), preambleNames);
       if (!readsPreamble && classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === "none")
         return;
-      const loopParamsForCond = loopParam ? [{ param: loopParam, bindings: loopParamBindings }] : undefined;
+      const loopParamsForCond = loopParam ? [{ param: loopParam, bindings: loopParamBindings, index: loopIndex }] : undefined;
       const whenTrueHtml = irToHtmlTemplate(n.whenTrue, undefined, 0, loopParamsForCond, "__slots");
       const whenFalseHtml = irToHtmlTemplate(n.whenFalse, undefined, 0, loopParamsForCond, "__slots");
       conditionals.push({
@@ -16789,6 +16935,7 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "escapeAttr",
   "escapeText",
   "escapeTextOrNode",
+  "escapeCommentText",
   "bfMarkup",
   "escapeTextOrMarkup",
   "markupOrEmpty",
@@ -17001,45 +17148,6 @@ function collectComponentNames(node) {
 
 // src/relocate.ts
 import ts18 from "typescript";
-
-// src/lowering-registry.ts
-var plugins = [];
-function registerLoweringPlugin(plugin) {
-  const existing = plugins.findIndex((p) => p.name === plugin.name);
-  if (existing >= 0)
-    plugins[existing] = plugin;
-  else
-    plugins.push(plugin);
-}
-function getLoweringPlugins() {
-  return [...plugins];
-}
-function prepareLoweringMatchers(metadata) {
-  const matchers = [];
-  for (const plugin of plugins) {
-    const matcher = plugin.prepare(metadata);
-    if (matcher)
-      matchers.push(matcher);
-  }
-  return matchers;
-}
-function matchLoweringCall(callee, args, metadata) {
-  for (const matcher of prepareLoweringMatchers(metadata)) {
-    const node = matcher(callee, args);
-    if (node)
-      return node;
-  }
-  return null;
-}
-function isValidHelperId(helper) {
-  return /^[A-Za-z_][A-Za-z0-9_]*$/.test(helper);
-}
-function __resetLoweringPluginsForTest(next = []) {
-  plugins.length = 0;
-  plugins.push(...next);
-}
-
-// src/relocate.ts
 function classify(name, env) {
   return env.bindings.get(name) ?? "global";
 }
@@ -17887,7 +17995,7 @@ function emitRegistrationAndHydration(lines, ctx, _ir, graph, inlinability) {
   const isCommentScope = isFragmentRoot || _ir.root.type === "component";
   const defParts = [`init: init${name}`];
   if (canGenerateStaticTemplate(_ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
-    const markupSlotIds = new Set(ctx.dynamicElements.map((e) => e.slotId));
+    const markupSlotIds = markupSlotIdsOf(ctx);
     const templateHtml = irToComponentTemplate(_ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds, ctx.restPropsName);
     if (templateHtml) {
       defParts.push(buildTemplateDefPart(ctx, templateHtml));
@@ -18912,12 +19020,12 @@ function nestedLoopIndexAlias(inner, syntheticIndexVar, paramHead, comps, events
     return null;
   return `const ${index} = ${syntheticIndexVar}`;
 }
-function buildChildRefBindings(refs, loopParam, loopParamBindings) {
+function buildChildRefBindings(refs, loopParam, loopParamBindings, loopIndex) {
   if (refs.length === 0)
     return [];
   return refs.map((r) => ({
     childSlotId: r.childSlotId,
-    callback: wrapLoopParamAsAccessor(r.callback, loopParam, loopParamBindings)
+    callback: wrapLoopParamAsAccessor(r.callback, loopParam, loopParamBindings, loopIndex)
   }));
 }
 function buildStaticChildRefBindings(refs) {
@@ -18950,17 +19058,17 @@ function destructureLoopParam(param, paramBindings) {
   }
   return { head: param, unwrap: "" };
 }
-function buildPreambleRegionPlans(regions, loopParam, loopParamBindings) {
+function buildPreambleRegionPlans(regions, loopParam, loopParamBindings, loopIndex) {
   if (!regions || regions.length === 0)
     return [];
   return regions.map((r) => {
-    const wrapped = wrapLoopParamAsAccessor(r.expr, loopParam, loopParamBindings);
-    const valueExpr = r.joinArrayChild ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')` : `escapeText(${wrapped})`;
+    const wrapped = wrapLoopParamAsAccessor(r.expr, loopParam, loopParamBindings, loopIndex);
+    const valueExpr = spliceChildValue({ expr: r.expr, slotId: r.slotId, joinArrayChild: r.joinArrayChild }, wrapped, {});
     return { slotId: r.slotId, valueExpr };
   });
 }
-function buildComponentPropsExpr2(comp, loopParam, loopParamBindings) {
-  const wrap = loopParam ? (expr) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings) : (expr) => expr;
+function buildComponentPropsExpr2(comp, loopParam, loopParamBindings, loopIndex) {
+  const wrap = loopParam ? (expr) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings, loopIndex) : (expr) => expr;
   const entries = comp.props.map((p) => {
     if (p.isEventHandler) {
       const handlerExpr = attrValueToString(p.value) ?? "undefined";
@@ -19004,8 +19112,8 @@ function buildDepthLevels(innerLoops, nestedComps, childEvents) {
     loopInfo: loop
   }));
 }
-function emitEventSetup(ls, indent, elVar, ev, loopParam, loopParamBindings, bodyIsMultiRoot = false) {
-  const handler = loopParam ? wrapLoopParamAsAccessor(ev.handler, loopParam, loopParamBindings) : ev.handler;
+function emitEventSetup(ls, indent, elVar, ev, loopParam, loopParamBindings, bodyIsMultiRoot = false, loopIndex) {
+  const handler = loopParam ? wrapLoopParamAsAccessor(ev.handler, loopParam, loopParamBindings, loopIndex) : ev.handler;
   emitListenerBlock(ls, indent, elVar, ev.childSlotId, "__e", ev.eventName, handler, "dom", bodyIsMultiRoot);
 }
 function buildCompSelector(comp) {
@@ -19017,15 +19125,15 @@ function isTextOnlyConditional(node) {
   const checkNode = (n) => n.type === "text" || n.type === "expression" || n.type === "conditional" && isTextOnlyConditional(n);
   return checkNode(node.whenTrue) && checkNode(node.whenFalse);
 }
-function emitComponentAndEventSetup(ls, indent, elVar, comps, events, loopParam, loopParamBindings, bodyIsMultiRoot = false) {
-  const wrap = loopParam ? (expr) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings) : (expr) => expr;
+function emitComponentAndEventSetup(ls, indent, elVar, comps, events, loopParam, loopParamBindings, bodyIsMultiRoot = false, loopIndex) {
+  const wrap = loopParam ? (expr) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings, loopIndex) : (expr) => expr;
   const upsertFn = bodyIsMultiRoot ? "upsertChildItem" : "upsertChild";
   for (const comp of comps) {
-    const propsExpr = buildComponentPropsExpr2(comp, loopParam, loopParamBindings);
+    const propsExpr = buildComponentPropsExpr2(comp, loopParam, loopParamBindings, loopIndex);
     const isTextOnly = comp.children?.length ? comp.children.every((c) => c.type === "expression" || c.type === "text" || isTextOnlyConditional(c)) : false;
     const rawChildrenExpr = isTextOnly ? irChildrenToJsExpr(comp.children) : null;
     const childrenFreeIds = isTextOnly && comp.children ? irChildrenFreeIds(comp.children) : undefined;
-    const childrenRefsLoop = loopParam != null && rawChildrenExpr != null && childrenFreeIds != null && exprRefsLoopBinding(childrenFreeIds, { param: loopParam, paramBindings: loopParamBindings });
+    const childrenRefsLoop = loopParam != null && rawChildrenExpr != null && childrenFreeIds != null && (exprRefsLoopBinding(childrenFreeIds, { param: loopParam, paramBindings: loopParamBindings }) || !!loopIndex && childrenFreeIds.has(loopIndex));
     const slotIdLit = comp.slotId ? `'${comp.slotId}'` : "null";
     const keyProp = comp.props.find((p) => p.name === "key");
     const keyArg = keyProp ? `, ${wrap(attrValueToString(keyProp.value) ?? "undefined")}` : ", undefined";
@@ -19038,7 +19146,7 @@ function emitComponentAndEventSetup(ls, indent, elVar, comps, events, loopParam,
     }
   }
   for (const ev of events) {
-    emitEventSetup(ls, indent, elVar, ev, loopParam, loopParamBindings, bodyIsMultiRoot);
+    emitEventSetup(ls, indent, elVar, ev, loopParam, loopParamBindings, bodyIsMultiRoot, loopIndex);
   }
 }
 
@@ -19419,12 +19527,12 @@ function buildBranchInnerLoopsPlan(args) {
     const inner = innerLoops[i];
     if (!inner.refsOuterParam || !inner.template)
       continue;
-    const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings);
-    const wrapBoth = (expr) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings);
+    const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings, inner.index);
+    const wrapBoth = (expr) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings, inner.index);
     const csl = inner.containerSlotId;
     const containerExpr = csl ? `(${scopeVar}.querySelector('[bf="${csl}"]') ?? ${scopeVar}.querySelector(\`[${BF_HOST2}="\${__scopeId}"][${BF_AT2}="${csl}"]\`) ?? ${scopeVar})` : `findCondContainer(${scopeVar}, '${condSlotId}')`;
     const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings);
-    const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings) : null;
+    const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings, inner.index) : null;
     const wrapIRNode = (node) => {
       if (node.type === "component") {
         return {
@@ -19586,8 +19694,8 @@ function buildLoopChildArmPlan(args) {
 
 // src/ir-to-client-js/control-flow/plan/build-reactive-effects.ts
 function buildReactiveEffectsPlan(args) {
-  const { attrs, texts, conditionals, loopParam, loopParamBindings, profileComponentName } = args;
-  const wrap = (expr) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings);
+  const { attrs, texts, conditionals, loopParam, loopParamBindings, loopIndex, profileComponentName } = args;
+  const wrap = (expr) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings, loopIndex);
   const attrsBySlot = new Map;
   for (const attr of attrs) {
     let bucket = attrsBySlot.get(attr.childSlotId);
@@ -19671,6 +19779,7 @@ function buildLoopReactiveEffectsPlan(elem, profileComponentName) {
     conditionals: elem.bindings.conditionals,
     loopParam: elem.param,
     loopParamBindings: elem.paramBindings,
+    loopIndex: elem.index,
     profileComponentName
   });
 }
@@ -19749,10 +19858,10 @@ function buildInnerLoopsPlan(args) {
   return plan;
 }
 function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, outerLoopParamBindings) {
-  const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings);
-  const wrapBoth = (expr) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings);
+  const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings, inner.index);
+  const wrapBoth = (expr) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings, inner.index);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings);
-  const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings) : null;
+  const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings, inner.index) : null;
   const wrapIRNode = (node) => {
     if (node.type === "component") {
       return {
@@ -19783,11 +19892,11 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, o
   }));
   const reactiveTexts = inner.bindings.reactiveTexts.map((text) => ({
     slotId: text.slotId,
-    wrappedExpression: wrapLoopParamAsAccessor(wrapOuter(text.expression), inner.param, inner.paramBindings),
+    wrappedExpression: wrapLoopParamAsAccessor(wrapOuter(text.expression), inner.param, inner.paramBindings, inner.index),
     insideConditional: !!text.insideConditional
   }));
   const reactiveAttrs = inner.bindings.reactiveAttrs.map((attr) => {
-    const wrapped = wrapLoopParamAsAccessor(wrapOuter(attr.expression), inner.param, inner.paramBindings);
+    const wrapped = wrapLoopParamAsAccessor(wrapOuter(attr.expression), inner.param, inner.paramBindings, inner.index);
     return {
       slotId: attr.childSlotId,
       attrName: attr.attrName,
@@ -19804,14 +19913,14 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, o
   if (inner.preamble) {
     const leafLoopParams = outerLoopParam ? [
       { param: outerLoopParam, bindings: outerLoopParamBindings },
-      { param: inner.param, bindings: inner.paramBindings }
-    ] : [{ param: inner.param, bindings: inner.paramBindings }];
+      { param: inner.param, bindings: inner.paramBindings, index: inner.index }
+    ] : [{ param: inner.param, bindings: inner.paramBindings, index: inner.index }];
     preludeStatements.push(renderPreamble(inner.preamble, {
       transformJs: (t) => wrapInner(wrapOuter(t)),
       renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, leafLoopParams, undefined)
     }));
   }
-  const childRefs = buildChildRefBindings(inner.bindings.refs, inner.param, inner.paramBindings);
+  const childRefs = buildChildRefBindings(inner.bindings.refs, inner.param, inner.paramBindings, inner.index);
   const conditionals = buildLoopChildConditionalsPlan({
     conditionals: inner.bindings.conditionals,
     scopeVar: `__innerEl${uidSuffix}`,
@@ -19860,7 +19969,7 @@ function buildTopLevelCompositePlan(elem, profileComponentName) {
   const nestedComps = elem.nestedComponents;
   const depthLevels = buildDepthLevels(elem.innerLoops ?? [], nestedComps, elem.bindings.events);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings);
-  const wrap = (expr) => wrapLoopParamAsAccessor(expr, elem.param, elem.paramBindings);
+  const wrap = (expr) => wrapLoopParamAsAccessor(expr, elem.param, elem.paramBindings, elem.index);
   const outerCompsByDepth = nestedComps.filter((c) => !c.loopDepth || c.loopDepth === 0);
   return {
     kind: "composite",
@@ -19874,12 +19983,12 @@ function buildTopLevelCompositePlan(elem, profileComponentName) {
     indexParam: elem.index || "__idx",
     mapPreambleWrapped: elem.preamble ? renderPreamble(elem.preamble, {
       transformJs: wrap,
-      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined)
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings, index: elem.index }], undefined)
     }) : "",
     template: elem.template,
     outerComps: filterCondCompsOut(outerCompsByDepth, elem.bindings.conditionals),
     outerEvents: elem.bindings.events.filter((ev) => ev.nestedLoops.length === 0),
-    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
+    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings, elem.index),
     innerLoops: buildInnerLoopsPlan({
       levels: depthLevels,
       parentElVar: "__el",
@@ -19888,12 +19997,14 @@ function buildTopLevelCompositePlan(elem, profileComponentName) {
     }),
     loopParam: elem.param,
     loopParamBindings: elem.paramBindings,
+    loopIndex: elem.index,
     reactiveEffects: hasReactive(elem) ? buildReactiveEffectsPlan({
       attrs: elem.bindings.reactiveAttrs,
       texts: elem.bindings.reactiveTexts,
       conditionals: elem.bindings.conditionals,
       loopParam: elem.param,
       loopParamBindings: elem.paramBindings,
+      loopIndex: elem.index,
       profileComponentName
     }) : null,
     branchClearChildren: false,
@@ -19910,7 +20021,7 @@ function buildBranchCompositePlan(loop, cv, profileComponentName) {
   const childEvents = loop.bindings.events;
   const depthLevels = buildDepthLevels(innerLoops, nestedComps, childEvents);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(loop.param, loop.paramBindings);
-  const wrap = (expr) => wrapLoopParamAsAccessor(expr, loop.param, loop.paramBindings);
+  const wrap = (expr) => wrapLoopParamAsAccessor(expr, loop.param, loop.paramBindings, loop.index);
   const outerCompsByDepth = nestedComps.filter((c) => !c.loopDepth || c.loopDepth === 0);
   return {
     kind: "composite",
@@ -19924,12 +20035,12 @@ function buildBranchCompositePlan(loop, cv, profileComponentName) {
     indexParam: loop.index || "__idx",
     mapPreambleWrapped: loop.preamble ? renderPreamble(loop.preamble, {
       transformJs: wrap,
-      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined)
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings, index: loop.index }], undefined)
     }) : "",
     template: loop.template,
     outerComps: filterCondCompsOut(outerCompsByDepth, loop.bindings.conditionals),
     outerEvents: childEvents.filter((ev) => ev.nestedLoops.length === 0),
-    childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings),
+    childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings, loop.index),
     innerLoops: buildInnerLoopsPlan({
       levels: depthLevels,
       parentElVar: "__el",
@@ -19938,12 +20049,14 @@ function buildBranchCompositePlan(loop, cv, profileComponentName) {
     }),
     loopParam: loop.param,
     loopParamBindings: loop.paramBindings,
+    loopIndex: loop.index,
     reactiveEffects: hasReactiveBranch(loop) ? buildReactiveEffectsPlan({
       attrs: loop.bindings.reactiveAttrs,
       texts: loop.bindings.reactiveTexts,
       conditionals: loop.bindings.conditionals,
       loopParam: loop.param,
       loopParamBindings: loop.paramBindings,
+      loopIndex: loop.index,
       profileComponentName
     }) : null,
     branchClearChildren: true,
@@ -20078,7 +20191,7 @@ function wiringOn(branch) {
     found.push("reactive text");
   return found;
 }
-function analyzeLazyConditional(cond, indexParam, arms) {
+function analyzeLazyConditional(cond, arms) {
   for (const [label, branch] of [["true", cond.whenTrue], ["false", cond.whenFalse]]) {
     const wiring = wiringOn(branch);
     if (wiring.length > 0) {
@@ -20099,9 +20212,6 @@ function analyzeLazyConditional(cond, indexParam, arms) {
   if (!cond.conditionFreeIdentifiers) {
     return NO(`conditional on slot ${cond.slotId}: condition has no analyzable identifier set`);
   }
-  if (cond.conditionFreeIdentifiers.has(indexParam)) {
-    return NO(`conditional on slot ${cond.slotId}: condition reads the loop index parameter '${indexParam}'`);
-  }
   return {
     lazySafe: true,
     facts: {
@@ -20120,7 +20230,7 @@ var NO_PREAMBLE = {
   facts: { declaredNames: new Set, freeNames: new Set }
 };
 var NO2 = (reason) => ({ lazySafe: false, reason });
-function analyzeLazyPreamble(preamble, indexParam, primableNames) {
+function analyzeLazyPreamble(preamble, primableNames) {
   if (!preamble)
     return NO_PREAMBLE;
   if (preamble.builderNames.length > 0) {
@@ -20159,9 +20269,6 @@ function analyzeLazyPreamble(preamble, indexParam, primableNames) {
     }
   }
   const readNames = extractFreeIdentifiersFromStatementText(text);
-  if (readNames.has(indexParam) && !declaredNames.has(indexParam)) {
-    return NO2(`map-callback preamble reads the loop index parameter '${indexParam}'`);
-  }
   const freeNames = new Set(readNames);
   for (const declared of declaredNames)
     freeNames.delete(declared);
@@ -20311,9 +20418,6 @@ function lazyRowEligibility(args) {
   if (shape.hasParamUnwrap)
     return NO3("destructured loop param without param bindings");
   for (const b of bindings) {
-    if (b.referencesIndex) {
-      return NO3(`binding on slot ${b.slotId} references the loop index parameter`);
-    }
     if (b.opaqueOuterNames.includes(UNKNOWN_IDENTIFIERS)) {
       return NO3(`binding on slot ${b.slotId} has no analyzable identifier set`);
     }
@@ -20398,6 +20502,7 @@ function classifyLazyBinding(args) {
     }
     if (name === indexParam) {
       referencesIndex = true;
+      readsItem = true;
       return;
     }
     if (INERT_BINDING_GLOBALS.has(name))
@@ -20447,12 +20552,12 @@ function decideLazyRow(args) {
   for (const b of loop.paramBindings ?? [])
     rowLocalNames.add(b.name);
   const primableNames = new Set([...scope.signals.keys(), ...scope.memos]);
-  const preambleAnalysis = analyzeLazyPreamble(loop.preamble, args.indexParam, primableNames);
+  const preambleAnalysis = analyzeLazyPreamble(loop.preamble, primableNames);
   const rawConditionals = loop.bindings.conditionals ?? [];
   const condFacts = [];
   let conditionalRefusal = null;
   for (const cond of rawConditionals) {
-    const verdict = analyzeLazyConditional(cond, args.indexParam, {
+    const verdict = analyzeLazyConditional(cond, {
       whenTrueHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
       whenFalseHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId)
     });
@@ -20594,7 +20699,8 @@ function decideLazyRow(args) {
       preambleStatements: args.mapPreambleWrapped,
       itemNeedsPreamble: [...attrs, ...texts, ...conditionals].some((b) => b.readsItem && b.readsPreamble),
       outerNeedsPreamble: [...attrs, ...texts, ...conditionals].some((b) => b.readsOuter && b.readsPreamble),
-      conditionals
+      conditionals,
+      readsIndex: classified.some((c) => c.referencesIndex)
     },
     decision
   };
@@ -20645,6 +20751,43 @@ function loopSourceIdentifiers(loop, arrayExpr) {
   return names;
 }
 
+// src/ir-to-client-js/control-flow/plan/build-plain-row.ts
+function buildPlainRowCore(inputs) {
+  const { loop, arrayExpr, callSite, flatMapLeafItem, anchored, scope } = inputs;
+  const wrapItem = (expr) => wrapLoopParamAsAccessor(expr, loop.param, loop.paramBindings);
+  const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(loop.param, loop.paramBindings);
+  const indexParam = loop.index || "__idx";
+  const mapPreambleWrapped = loop.preamble ? renderPreamble(loop.preamble, {
+    transformJs: wrapItem,
+    renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined)
+  }) : "";
+  const preambleRegions = buildPreambleRegionPlans(loop.preambleRegions, loop.param, loop.paramBindings, loop.index);
+  const lazyRow = buildLazyRowPlan({
+    loop,
+    arrayExpr,
+    indexParam,
+    paramUnwrap,
+    mapPreambleWrapped,
+    preambleRegionCount: preambleRegions.length,
+    callSite,
+    flatMapLeafItem,
+    anchored,
+    scope
+  }) ?? undefined;
+  const mapPreambleWrappedFinal = !lazyRow && loop.index ? wrapIndexParamAsAccessor(mapPreambleWrapped, loop.index) : mapPreambleWrapped;
+  const templateFinal = !lazyRow && loop.index ? wrapIndexParamAsAccessor(loop.template, loop.index) : loop.template;
+  return {
+    indexParam,
+    paramHead,
+    paramUnwrap,
+    preambleRegions,
+    lazyRow,
+    mapPreambleWrapped: mapPreambleWrappedFinal,
+    template: templateFinal,
+    wrapItem
+  };
+}
+
 // src/ir-to-client-js/control-flow/plan/build-branch-loop.ts
 function buildBranchLoopPlan(loop, profileComponentName, lazyScope) {
   const containerSlotId = loop.containerSlotId;
@@ -20659,16 +20802,18 @@ function buildBranchLoopPlan(loop, profileComponentName, lazyScope) {
     };
     return composite;
   }
-  const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(loop.param, loop.paramBindings);
   const hasReactiveEffects = loop.bindings.reactiveAttrs.length > 0 || loop.bindings.reactiveTexts.length > 0 || loop.bindings.conditionals.length > 0;
   const fm = loop.flatMapClient;
   const arrayExpr = fm ? `(${buildChainedArrayExpr(loop)}).flatMap(${fm.params} => ${fm.body})` : buildChainedArrayExpr(loop);
-  const indexParam = loop.index || "__idx";
-  const mapPreambleWrapped = loop.preamble ? renderPreamble(loop.preamble, {
-    transformJs: (t) => wrapLoopParamAsAccessor(t, loop.param, loop.paramBindings),
-    renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined)
-  }) : "";
-  const preambleRegions = buildPreambleRegionPlans(loop.preambleRegions, loop.param, loop.paramBindings);
+  const core = buildPlainRowCore({
+    loop,
+    arrayExpr,
+    callSite: "branch-plain",
+    flatMapLeafItem: Boolean(fm),
+    anchored: false,
+    scope: lazyScope
+  });
+  const { paramHead, paramUnwrap, indexParam, preambleRegions, lazyRow } = core;
   const plan = {
     kind: "plain",
     rowConstruction: "string-template",
@@ -20681,30 +20826,20 @@ function buildBranchLoopPlan(loop, profileComponentName, lazyScope) {
     paramHead,
     paramUnwrap,
     indexParam,
-    mapPreambleWrapped,
-    lazyRow: buildLazyRowPlan({
-      loop,
-      arrayExpr,
-      indexParam,
-      paramUnwrap,
-      mapPreambleWrapped,
-      preambleRegionCount: preambleRegions.length,
-      callSite: "branch-plain",
-      flatMapLeafItem: Boolean(fm),
-      anchored: false,
-      scope: lazyScope
-    }) ?? undefined,
-    template: loop.template,
+    mapPreambleWrapped: core.mapPreambleWrapped,
+    lazyRow,
+    template: core.template,
     reactiveEffects: hasReactiveEffects ? buildReactiveEffectsPlan({
       attrs: loop.bindings.reactiveAttrs,
       texts: loop.bindings.reactiveTexts,
       conditionals: loop.bindings.conditionals,
       loopParam: loop.param,
       loopParamBindings: loop.paramBindings,
+      loopIndex: loop.index,
       profileComponentName
     }) : null,
     eventDelegation: buildBranchLoopDelegationPlan(loop, cv, profileComponentName),
-    childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings),
+    childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings, loop.index),
     preambleRegions,
     bodyIsMultiRoot: loop.bodyIsMultiRoot ?? false,
     profileLoopId: profileComponentName ? `${profileComponentName}#binding:${containerSlotId}` : undefined
@@ -20989,7 +21124,7 @@ function emitDynamicTextUpdates(lines, ctx) {
       const __textSlot = (normalElems[0] ?? conditionalElems[0])?.slotId;
       let writer = "";
       if (normalElems.length > 0) {
-        const slots = normalElems.map((elem) => ({ id: elem.slotId, kind: "markup", path: [] }));
+        const slots = normalElems.map((elem) => ({ id: elem.slotId, kind: DYNAMIC_ELEMENT_WRITER_KIND, path: [] }));
         writer = claimWriterVarName(slots, varSlotId);
         lines.push(`  const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`);
       }
@@ -21527,6 +21662,8 @@ function stringifyLazyRowLoop(lines, o) {
   lines.push(`${indent}${o.guardContainer ? `if (${o.containerVar}) ` : ""}${call}`);
   const b1 = `${indent}  `;
   const b2 = `${indent}    `;
+  if (lazyRow.readsIndex)
+    lines.push(`${b1}indexDriven: true,`);
   lines.push(`${b1}createRow: (__e, ${o.indexParam}) => {`);
   lines.push(`${b2}const ${paramHead} = () => __e.item`);
   if (lazyRow.preambleStatements)
@@ -21556,6 +21693,8 @@ function stringifyLazyRowLoop(lines, o) {
   } else {
     lines.push(`${b1}applyItem: (__e) => {`);
     lines.push(`${b2}const ${paramHead} = () => __e.item`);
+    if (lazyRow.readsIndex)
+      lines.push(`${b2}const ${o.indexParam} = __e.index`);
     lines.push(`${b2}const __r = __e.refs ?? (__e.refs = [])`);
     lines.push(`${b2}const __l = __e.last ?? (__e.last = [])`);
     if (lazyRow.itemNeedsPreamble && lazyRow.preambleStatements) {
@@ -21582,6 +21721,8 @@ function stringifyLazyRowLoop(lines, o) {
       lines.push(`${b2}${g}()`);
     lines.push(`${b2}for (const __e of __es) {`);
     lines.push(`${b3}const ${paramHead} = () => __e.item`);
+    if (lazyRow.readsIndex)
+      lines.push(`${b3}const ${o.indexParam} = __e.index`);
     lines.push(`${b3}const __r = __e.refs ?? (__e.refs = [])`);
     lines.push(`${b3}const __l = __e.last ?? (__e.last = [])`);
     if (lazyRow.outerNeedsPreamble && lazyRow.preambleStatements) {
@@ -22106,6 +22247,7 @@ function stringifyCompositeLoop(lines, plan) {
     innerLoops,
     loopParam,
     loopParamBindings,
+    loopIndex,
     reactiveEffects,
     childRefs,
     branchClearChildren,
@@ -22138,7 +22280,7 @@ function stringifyCompositeLoop(lines, plan) {
     singleRootLayout: "multiline",
     mountRow: true
   });
-  emitComponentAndEventSetup(lines, bodyIndent, "__el", compsArr, eventsArr, loopParam, loopParamBindings, bodyIsMultiRoot);
+  emitComponentAndEventSetup(lines, bodyIndent, "__el", compsArr, eventsArr, loopParam, loopParamBindings, bodyIsMultiRoot, loopIndex);
   if (innerLoops.length > 0) {
     stringifyInnerLoops(lines, innerLoops, bodyIndent, pc);
   }
@@ -22560,11 +22702,11 @@ function scopeRefToVar(ref) {
 // src/ir-to-client-js/control-flow/plan/build-component-loop.ts
 function buildComponentLoopPlan(elem, profileComponentName) {
   const { name } = elem.childComponent;
-  const propsExpr = buildComponentPropsExpr2(elem.childComponent, elem.param);
-  const keyExpr = wrapLoopParamAsAccessor(elem.key || "__idx", elem.param, elem.paramBindings);
+  const propsExpr = buildComponentPropsExpr2(elem.childComponent, elem.param, undefined, elem.index);
+  const keyExpr = wrapLoopParamAsAccessor(elem.key || "__idx", elem.param, elem.paramBindings, elem.index);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings);
   const mapPreambleWrapped = elem.preamble ? renderPreamble(elem.preamble, {
-    transformJs: (text) => wrapLoopParamAsAccessor(text, elem.param, elem.paramBindings),
+    transformJs: (text) => wrapLoopParamAsAccessor(text, elem.param, elem.paramBindings, elem.index),
     renderLeaf: () => {
       internalInvariant(false, "component-root loop received a JSX-bearing preamble — Phase 1 should have refused it");
     }
@@ -22574,12 +22716,12 @@ function buildComponentLoopPlan(elem, profileComponentName) {
     const isTextOnly = comp.children?.length ? comp.children.every((c) => c.type === "expression" || c.type === "text" || isTextOnlyConditional(c)) : false;
     const rawChildrenExpr = isTextOnly ? irChildrenToJsExpr(comp.children) : null;
     const childrenFreeIds = isTextOnly && comp.children ? irChildrenFreeIds(comp.children) : undefined;
-    const childrenRefsLoop = rawChildrenExpr != null && childrenFreeIds != null && childrenFreeIds.has(elem.param);
+    const childrenRefsLoop = rawChildrenExpr != null && childrenFreeIds != null && (childrenFreeIds.has(elem.param) || !!elem.index && childrenFreeIds.has(elem.index));
     return {
       componentName: comp.name,
       selector: buildCompSelector(comp),
-      propsExpr: buildComponentPropsExpr2(comp, elem.param),
-      childrenTextEffect: childrenRefsLoop ? { wrappedChildren: wrapLoopParamAsAccessor(rawChildrenExpr, elem.param, elem.paramBindings) } : null
+      propsExpr: buildComponentPropsExpr2(comp, elem.param, undefined, elem.index),
+      childrenTextEffect: childrenRefsLoop ? { wrappedChildren: wrapLoopParamAsAccessor(rawChildrenExpr, elem.param, elem.paramBindings, elem.index) } : null
     };
   });
   const hasChildConds = elem.bindings.conditionals.length > 0;
@@ -22598,7 +22740,7 @@ function buildComponentLoopPlan(elem, profileComponentName) {
     componentPropsExpr: propsExpr,
     keyExpr,
     nestedComps,
-    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
+    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings, elem.index),
     profileLoopId: profileComponentName ? `${profileComponentName}#binding:${elem.slotId}` : undefined,
     childConditionalEffects: hasChildConds ? buildReactiveEffectsPlan({
       attrs: [],
@@ -22606,6 +22748,7 @@ function buildComponentLoopPlan(elem, profileComponentName) {
       conditionals: elem.bindings.conditionals,
       loopParam: elem.param,
       loopParamBindings: elem.paramBindings,
+      loopIndex: elem.index,
       profileComponentName
     }) : null
   };
@@ -22629,8 +22772,6 @@ function buildLoopPlan(elem, opts) {
   return buildPlainLoopPlan(elem, opts.profileComponentName, opts.lazyScope);
 }
 function buildPlainLoopPlan(elem, profileComponentName, lazyScope) {
-  const wrap = (expr) => wrapLoopParamAsAccessor(expr, elem.param, elem.paramBindings);
-  const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings);
   const hasReactive2 = elem.bindings.reactiveAttrs.length > 0 || elem.bindings.reactiveTexts.length > 0 || elem.bindings.conditionals.length > 0;
   if (elem.flatMapClient) {
     return {
@@ -22656,12 +22797,15 @@ function buildPlainLoopPlan(elem, profileComponentName, lazyScope) {
     };
   }
   const arrayExpr = buildChainedArrayExpr(elem);
-  const indexParam = elem.index || "__idx";
-  const mapPreambleWrapped = elem.preamble ? renderPreamble(elem.preamble, {
-    transformJs: wrap,
-    renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined)
-  }) : "";
-  const preambleRegions = buildPreambleRegionPlans(elem.preambleRegions, elem.param, elem.paramBindings);
+  const core = buildPlainRowCore({
+    loop: elem,
+    arrayExpr,
+    callSite: "plain",
+    flatMapLeafItem: false,
+    anchored: elem.bodyIsItemConditional ?? false,
+    scope: lazyScope
+  });
+  const { paramHead, paramUnwrap, indexParam, preambleRegions, lazyRow, wrapItem: wrap } = core;
   return {
     kind: "plain",
     rowConstruction: "string-template",
@@ -22673,28 +22817,17 @@ function buildPlainLoopPlan(elem, profileComponentName, lazyScope) {
     paramHead,
     paramUnwrap,
     indexParam,
-    lazyRow: buildLazyRowPlan({
-      loop: elem,
-      arrayExpr,
-      indexParam,
-      paramUnwrap,
-      mapPreambleWrapped,
-      preambleRegionCount: preambleRegions.length,
-      callSite: "plain",
-      flatMapLeafItem: false,
-      anchored: elem.bodyIsItemConditional ?? false,
-      scope: lazyScope
-    }) ?? undefined,
-    mapPreambleWrapped,
-    template: elem.template,
+    lazyRow,
+    mapPreambleWrapped: core.mapPreambleWrapped,
+    template: core.template,
     skeletonTemplate: elem.skeletonTemplate,
     skeletonPaths: elem.skeletonPaths,
     reactiveEffects: hasReactive2 ? buildLoopReactiveEffectsPlan(elem, profileComponentName) : null,
-    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
+    childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings, elem.index),
     preambleRegions,
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,
     anchored: elem.bodyIsItemConditional ?? false,
-    anchorKeyExpr: elem.key ? wrap(elem.key) : elem.index || "__idx"
+    anchorKeyExpr: elem.key ? wrap(elem.key) : `${indexParam}()`
   };
 }
 function buildStaticLoopPlan(elem, unsafeLocalNames, profileComponentName) {
@@ -22736,7 +22869,7 @@ function buildStaticLoopMaterialize(elem, unsafeLocalNames) {
   return {
     itemTemplate: elem.staticItemTemplate,
     mapPreamble: elem.preamble ? renderPreamble(elem.preamble, {
-      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined)
+      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings, index: elem.index }], undefined)
     }) : "",
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false
   };
@@ -23313,7 +23446,7 @@ function generateTemplateOnlyMount(ir, ctx) {
   const restSpreadNames = resolveRestSpreadNames(ctx);
   let templateHtml;
   if (canGenerateStaticTemplate(ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
-    const markupSlotIds = new Set(ctx.dynamicElements.map((e) => e.slotId));
+    const markupSlotIds = markupSlotIdsOf(ctx);
     templateHtml = irToComponentTemplate(ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds, ctx.restPropsName);
   }
   if (!templateHtml) {
@@ -24050,6 +24183,21 @@ function extractSsrDefaults(metadata) {
     }
     bindings[memo.name] = value;
   }
+  {
+    const getterNames = collectAliasableGetterNames(metadata.signals, metadata.memos);
+    for (const [alias, origin] of resolveGetterAliases(metadata.localConstants ?? [], (n) => getterNames.has(n))) {
+      if (alias in out)
+        continue;
+      out[alias] = out[origin];
+    }
+  }
+  for (const [local, callerKey] of resolveBodyDestructuredPropAliases(metadata.localConstants ?? [], metadata.propsObjectName)) {
+    if (local in out)
+      continue;
+    const origin = out[callerKey];
+    if (origin)
+      out[local] = origin;
+  }
   if (metadata.propsObjectName !== null) {
     const referenced = new Set;
     for (const sig of metadata.signals) {
@@ -26414,6 +26562,17 @@ function emitParsedExpr(expr, emitter) {
     case "literal":
       return emitter.literal(expr.value, expr.literalType);
     case "call": {
+      if (emitter.lowering) {
+        for (const matcher of emitter.lowering.matchers) {
+          const node = matcher(expr.callee, expr.args);
+          if (!node)
+            continue;
+          const rendered = emitter.lowering.render(node, emit);
+          if (rendered !== null)
+            return rendered;
+          break;
+        }
+      }
       const cb = asCallbackMethodCall(expr);
       if (cb)
         return emitter.callbackMethod(cb.method, cb.object, cb.arrow, cb.args, emit);
@@ -29717,7 +29876,9 @@ export {
   rewriteDynamicImportsInSource,
   resolveStaticLoopSource,
   resolveSetters,
+  resolveGetterAliases,
   resolveDangerousInnerHtml,
+  resolveBodyDestructuredPropAliases,
   resetCompilerCounters,
   registerLoweringPlugin,
   registerBuiltinLoweringPlugins,
@@ -29741,6 +29902,7 @@ export {
   matchQueryHrefCall,
   matchLoweringCall,
   makeIdCallRegex,
+  loweringNodeChildren,
   lookupStaticRecordLiteral,
   listComponentFunctions as listExportedComponents,
   listComponentFunctions,
@@ -29829,6 +29991,7 @@ export {
   collectModuleStringConsts,
   collectLoopBoundNames,
   collectContextConsumers,
+  collectAliasableGetterNames,
   buildWhyUpdate,
   buildStaticBudget,
   buildSourceMapFromIR,