@barefootjs/jsx 0.26.3 → 0.27.0

package/dist/index.js

@@ -3252,7 +3252,7 @@ function templateAttrExpr(attrName, valExpr, presenceOrUndefined) {
     return `\${((v) => v != null ? 'style="' + ${escapeAttrValueExpr("v")} + '"' : '')(styleToCss(${valExpr}))}`;
   }
   if (attrName === "data-key" || attrName.startsWith("data-key-")) {
-    return `${attrName}="\${${valExpr}}"`;
+    return `${attrName}="\${${escapeAttrValueExpr(valExpr)}}"`;
   }
   return `\${(${valExpr}) != null ? '${attrName}="' + ${escapeAttrValueExpr(valExpr)} + '"' : ''}`;
 }
@@ -3387,12 +3387,57 @@ function renderPreamble(preamble, opts) {
     if (seg.kind === "js") {
       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));
     } else {
       out += "`" + opts.renderLeaf(escapeLeafTextExpressions(seg.ir)) + "`";
     }
   }
   return out;
 }
+function flatMapLeafKeyExpr(ir) {
+  if (ir.type !== "element")
+    return null;
+  const keyAttr = ir.attrs.find((a) => a.name === "key");
+  if (!keyAttr)
+    return null;
+  switch (keyAttr.value.kind) {
+    case "expression":
+      return `(${keyAttr.value.expr})`;
+    case "literal":
+      return JSON.stringify(keyAttr.value.value);
+    case "template":
+      return attrValueToString(keyAttr.value);
+    default:
+      return null;
+  }
+}
+function stripLeafKeyAttr(ir) {
+  if (ir.type !== "element")
+    return ir;
+  return { ...ir, attrs: ir.attrs.filter((a) => a.name !== "key") };
+}
+function renderFlatMapClientBody(cb, restSpreadNames) {
+  return renderPreamble(cb, {
+    textVariant: "client",
+    rawLeaf: true,
+    renderLeaf: (ir) => {
+      const key = flatMapLeafKeyExpr(ir);
+      const html = irToHtmlTemplate(stripLeafKeyAttr(ir), restSpreadNames, 1, undefined, undefined, true);
+      return `({ k: ${key ?? "undefined"}, h: \`${html}\` })`;
+    }
+  });
+}
+function flatMapCallbackHasKeyedLeaf(cb) {
+  return cb.segments.some((s) => s.kind === "jsx" && flatMapLeafKeyExpr(s.ir) !== null);
+}
+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, true)).join("");
+  return `${chained}.map(${params} => ({ k: ${key}, h: \`${html}\` }))`;
+}
 function escapeLeafTextExpressions(ir) {
   switch (ir.type) {
     case "element":
@@ -3460,6 +3505,10 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
     case "expression": {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
+      if (node.markerless) {
+        const bare = wrapInterpolation(wrapExpr(node.expr));
+        return `\${${bare}}`;
+      }
       const inner = wrapInterpolation(wrapExpr(node.expr));
       const valueExpr = node.joinArrayChild ? `Array.isArray(${inner}) ? ${inner}.join('') : (${inner} ?? '')` : inner;
       if (node.slotId) {
@@ -3527,7 +3576,7 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       let mapExpr;
       if (node.flatMapCallback) {
         const body = renderPreamble(node.flatMapCallback, {
-          renderLeaf: (ir) => irToHtmlTemplate(ir, restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop)
+          renderLeaf: (ir) => irToHtmlTemplate(stripLeafKeyAttr(ir), restSpreadNames, loopDepth + 1, loopParams, branchSlotsVar, insideLoop)
         });
         mapExpr = `\${${wrappedArray}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
       } else if (node.preamble) {
@@ -3817,7 +3866,7 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
       let mapExpr;
       if (node.flatMapCallback) {
         const body = renderPreamble(node.flatMapCallback, {
-          renderLeaf: (ir) => irToPlaceholderTemplate(ir, restSpreadNames, loopDepth + 1, loopParams)
+          renderLeaf: (ir) => irToPlaceholderTemplate(stripLeafKeyAttr(ir), restSpreadNames, loopDepth + 1, loopParams)
         });
         mapExpr = `\${${wrappedArray}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
       } else if (node.preamble) {
@@ -4335,7 +4384,7 @@ function generateCsrTemplateWithOpts(node, opts) {
       if (node.expr === "null" || node.expr === "undefined")
         return "";
       if (node.clientOnly && node.slotId) {
-        return `<!--bf-client:${node.slotId}--><!--/-->`;
+        return `<!--bf:${node.slotId}--><!--/-->`;
       }
       {
         const transformed = transformExpr(node.expr, node.templateExpr);
@@ -4443,7 +4492,7 @@ function generateCsrTemplateWithOpts(node, opts) {
         const body = renderPreamble(node.flatMapCallback, {
           textVariant: "template",
           transformJs: (t) => applyPropsRewrite(t, propsObjectName ?? null),
-          renderLeaf: (ir) => recurseInLoopBody(ir)
+          renderLeaf: (ir) => recurseInLoopBody(stripLeafKeyAttr(ir))
         });
         mapExpr = `\${${iterArrayExpr}.flatMap(${node.flatMapCallback.params} => ${body}).join('')}`;
       } else if (node.preamble) {
@@ -11710,6 +11759,87 @@ function checkLoopKey(callback, ctx, isNested) {
     return;
   }
 }
+function flatMapProjectionCall(body) {
+  let expr;
+  if (ts11.isBlock(body)) {
+    const real = body.statements;
+    if (real.length !== 1 || !ts11.isReturnStatement(real[0]) || !real[0].expression)
+      return null;
+    expr = real[0].expression;
+  } else {
+    expr = body;
+  }
+  while (ts11.isParenthesizedExpression(expr))
+    expr = expr.expression;
+  if (!ts11.isCallExpression(expr))
+    return null;
+  if (!getMapLikeMethod(expr))
+    return null;
+  const cb = expr.arguments[0];
+  if (!cb || !ts11.isArrowFunction(cb) && !ts11.isFunctionExpression(cb))
+    return null;
+  for (const p of cb.parameters) {
+    if (!ts11.isIdentifier(p.name))
+      return null;
+  }
+  let innerBody = cb.body;
+  if (ts11.isBlock(innerBody)) {
+    const ret = innerBody.statements.find((s) => ts11.isReturnStatement(s) && s.expression != null);
+    if (innerBody.statements.length !== 1 || !ret?.expression)
+      return null;
+    innerBody = ret.expression;
+  }
+  while (ts11.isParenthesizedExpression(innerBody))
+    innerBody = innerBody.expression;
+  const isElementish = (n) => {
+    let m = n;
+    while (ts11.isParenthesizedExpression(m))
+      m = m.expression;
+    if (ts11.isJsxElement(m) || ts11.isJsxSelfClosingElement(m))
+      return leafIsWirelessElement(m);
+    if (ts11.isConditionalExpression(m))
+      return isElementish(m.whenTrue) && isElementish(m.whenFalse);
+    return false;
+  };
+  if (!isElementish(innerBody))
+    return null;
+  return expr;
+}
+function leafIsWirelessElement(el) {
+  let ok = true;
+  const visit2 = (n) => {
+    if (!ok)
+      return;
+    if (ts11.isJsxOpeningElement(n) || ts11.isJsxSelfClosingElement(n)) {
+      const tagNode = n.tagName;
+      const isIntrinsic = ts11.isIdentifier(tagNode) ? !/^[A-Z]/.test(tagNode.text) : ts11.isJsxNamespacedName(tagNode);
+      if (!isIntrinsic) {
+        ok = false;
+        return;
+      }
+      for (const attr of n.attributes.properties) {
+        if (ts11.isJsxSpreadAttribute(attr)) {
+          ok = false;
+          return;
+        }
+        if (ts11.isJsxAttribute(attr)) {
+          const name = attr.name.getText();
+          if (/^on[A-Z]/.test(name)) {
+            ok = false;
+            return;
+          }
+        }
+      }
+    }
+    if (ts11.isCallExpression(n) && getMapLikeMethod(n) && containsJsxInExpression(n)) {
+      ok = false;
+      return;
+    }
+    ts11.forEachChild(n, visit2);
+  };
+  visit2(el);
+  return ok;
+}
 function loopBodyIsMultiRoot(children) {
   const real = children.filter((c) => !(c.type === "text" && typeof c.value === "string" && !c.value.trim()));
   if (real.length === 0)
@@ -11755,6 +11885,7 @@ function extractItemConditionalKey(cond) {
 }
 function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   const isNested = ctx.loopParams.size > 0;
+  const diagCountAtEntry = ctx.analyzer.errors.length;
   const depth = ctx.loopDepth;
   const propAccess = node.expression;
   const mapSource = propAccess.expression;
@@ -12041,12 +12172,34 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
           }
         }
       }
-      if (method === "flatMap" && children.length === 0) {
+      if (method === "flatMap" && children.length === 0 && !flatMapProjectionCall(body)) {
         flatMapCallback = buildFlatMapCallback(callback, body, ctx);
       }
     } else {
       tryTransformRenderableBody(body);
     }
+    if (method === "flatMap" && children.length === 0 && !flatMapCallback) {
+      const projection = flatMapProjectionCall(body);
+      if (projection) {
+        const transformed = transformJsxExpression(projection, ctx, isClientOnly);
+        if (transformed && transformed.type === "loop") {
+          children = [transformed];
+        }
+      }
+    }
+    if (method === "flatMap" && children.length === 0 && !flatMapCallback && !ts11.isBlock(body)) {
+      flatMapCallback = buildFlatMapCallback(callback, body, ctx);
+    }
+    if (flatMapCallback)
+      preamble = undefined;
+    if (flatMapCallback && !isClientOnly && !(ctx.analyzer.acceptsCallbackBody?.("flatMap") ?? false)) {
+      ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(body, ctx.sourceFile, ctx.filePath), {
+        message: "A .flatMap() callback body with statements or a nested projection " + "cannot be lowered to a template on this backend.",
+        suggestion: {
+          message: "Add /* @client */ to render this loop on the client only"
+        }
+      }));
+    }
     if (paramBindings) {
       for (const b of paramBindings)
         ctx.loopParams.delete(b.name);
@@ -12058,6 +12211,16 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     ctx.loopDepth--;
   }
   if (children.length === 0 && !flatMapCallback) {
+    const cb = node.arguments[0];
+    const cbBody = cb && (ts11.isArrowFunction(cb) || ts11.isFunctionExpression(cb)) ? cb.body : undefined;
+    if (cbBody && containsJsxInExpression(cbBody) && ctx.analyzer.errors.length === diagCountAtEntry) {
+      ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(cbBody, ctx.sourceFile, ctx.filePath), {
+        message: `A .${method}() callback that builds JSX in this shape cannot be ` + "compiled — the JSX would leak verbatim into the client bundle. " + "Recognized bodies: a JSX element/fragment, a ternary or " + "&& / || / ?? expression, an array literal (flatMap), or a block " + "body whose return the compiler can lower.",
+        suggestion: {
+          message: "Restructure the callback to return the JSX element directly " + "(or via a block body with a plain `return`)."
+        }
+      }));
+    }
     return null;
   }
   if (ts11.isArrowFunction(node.arguments[0]) && children.length > 0) {
@@ -12110,6 +12273,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   const hasCalls = exprHasFunctionCalls(arrayExpr);
   const isDirectPropArray = method !== "flatMap" && isArrayExprDirectPropRef(arrayExpr, ctx);
   const isStaticArray = !isSignalOrMemoArray(array, ctx) && !isDirectPropArray && !hasCalls && !objectIteration;
+  const preambleRegions = preamble && !isStaticArray ? collectPreambleRegions(children, new Set(preamble.declaredNames), ctx) : undefined;
   const nestedComponents = collectNestedComponents(children).filter((c) => c.name !== childComponent?.name);
   return {
     type: "loop",
@@ -12140,6 +12304,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     depth,
     clientOnly: isClientOnly || undefined,
     preamble,
+    preambleRegions: preambleRegions && preambleRegions.length > 0 ? preambleRegions : undefined,
     paramType,
     indexType,
     paramBindings,
@@ -12202,6 +12367,28 @@ function buildFlatMapCallback(callback, body, ctx) {
     }));
     return;
   }
+  for (const leafIr of leafIrs) {
+    if (leafIr.type !== "element") {
+      const loc = "loc" in leafIr && leafIr.loc ? leafIr.loc : getSourceLocation(body, ctx.sourceFile, ctx.filePath);
+      ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, loc, {
+        message: "A JSX leaf produced by a .flatMap() callback must be a single " + "element — a fragment or non-element root cannot ride the keyed " + "descriptor path (each leaf hydrates and patches as one element).",
+        suggestion: {
+          message: "Wrap the leaf content in a single keyed element."
+        }
+      }));
+      return;
+    }
+    if (flatMapLeafNeedsWiring(leafIr)) {
+      const loc = "loc" in leafIr && leafIr.loc ? leafIr.loc : getSourceLocation(body, ctx.sourceFile, ctx.filePath);
+      ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, loc, {
+        message: "A JSX element produced by a .flatMap() callback cannot carry " + "event handlers, components, nested loops, or spreads — the " + "leaf renders as a keyed HTML string with no per-element wiring.",
+        suggestion: {
+          message: "Restructure so the interactive element lives in a .map() body — " + "the descriptor path has no per-element wiring on any backend, " + "so /* @client */ does not lift this."
+        }
+      }));
+      return;
+    }
+  }
   const pieces = reconstructAsSegments(body, ctx.sourceFile, ctx.analyzer.typeExcludeRanges, leafSpans);
   const segments = pieces.map((piece) => {
     if ("marker" in piece)
@@ -12216,6 +12403,25 @@ function buildFlatMapCallback(callback, body, ctx) {
     rawBody: tsxSourceText(body.getText(ctx.sourceFile))
   };
 }
+function flatMapLeafNeedsWiring(ir) {
+  switch (ir.type) {
+    case "component":
+    case "loop":
+      return true;
+    case "element":
+      if (ir.events.length > 0)
+        return true;
+      if (ir.attrs.some((a) => a.name.startsWith("...")))
+        return true;
+      return ir.children.some(flatMapLeafNeedsWiring);
+    case "conditional":
+      return flatMapLeafNeedsWiring(ir.whenTrue) || (ir.whenFalse ? flatMapLeafNeedsWiring(ir.whenFalse) : false);
+    case "fragment":
+      return ir.children.some(flatMapLeafNeedsWiring);
+    default:
+      return false;
+  }
+}
 function preambleFragmentNeedsWiring(ir) {
   switch (ir.type) {
     case "component":
@@ -12258,6 +12464,40 @@ function flagArrayChildExpressions(nodes, declared) {
     }
   }
 }
+function collectPreambleRegions(nodes, declared, ctx) {
+  const regions = [];
+  const visit2 = (list) => {
+    for (const node of list) {
+      switch (node.type) {
+        case "expression": {
+          const refs = extractFreeIdentifiersFromText(node.expr);
+          const usesPreambleLocal = [...refs].some((r) => declared.has(r));
+          if (usesPreambleLocal) {
+            if (!node.slotId)
+              node.slotId = generateSlotId(ctx);
+            node.preambleRegion = true;
+            node.reactive = true;
+            regions.push({
+              slotId: node.slotId,
+              expr: node.expr,
+              joinArrayChild: node.joinArrayChild || undefined
+            });
+          }
+          break;
+        }
+        case "element":
+        case "fragment":
+          visit2(node.children);
+          break;
+        case "conditional":
+          visit2([node.whenTrue, ...node.whenFalse ? [node.whenFalse] : []]);
+          break;
+      }
+    }
+  };
+  visit2(nodes);
+  return regions;
+}
 function collectBindingNames(name, out) {
   if (ts11.isIdentifier(name)) {
     out.add(name.text);
@@ -13635,6 +13875,8 @@ function collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings,
     expression: ({ node: n, scope: insideConditional }) => {
       if (!n.slotId)
         return;
+      if (n.preambleRegion)
+        return;
       const originFreeIds = freeIdsFromRefs(n.origin?.freeRefs);
       const expanded = expandConstantForReactivity(n.expr, ctx, originFreeIds);
       const reactive = classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== "none" || decideWrapFromAstFlags(n).wrap;
@@ -14164,7 +14406,11 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
     },
     expression: ({ node: ex, scope: inCond }) => {
       if (ex.clientOnly && ex.slotId) {
-        ctx.clientOnlyElements.push({ slotId: ex.slotId, expression: ex.expr });
+        ctx.clientOnlyElements.push({
+          slotId: ex.slotId,
+          expression: ex.expr,
+          elidedPath: ex.markerless ? ex.elidedPath : undefined
+        });
         return;
       }
       if (!ex.slotId || inCond)
@@ -14190,10 +14436,13 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
     loop: ({ node: l, scope: inCond }) => {
       if (!l.slotId || inCond)
         return;
+      const projectionInner = l.method === "flatMap" && l.children.length === 1 && l.children[0].type === "loop" ? l.children[0] : undefined;
       const childHandlers = [];
-      const bindings = collectLoopChildBindings(l.children, ctx, siblingOffsets, l.param, l.paramBindings);
-      for (const child of l.children) {
-        childHandlers.push(...collectEventHandlersFromIR(child));
+      const bindings = projectionInner ? emptyLoopChildBindings() : collectLoopChildBindings(l.children, ctx, siblingOffsets, l.param, l.paramBindings);
+      if (!projectionInner) {
+        for (const child of l.children) {
+          childHandlers.push(...collectEventHandlersFromIR(child));
+        }
       }
       if (l.childComponent) {
         for (const prop of l.childComponent.props) {
@@ -14204,7 +14453,7 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
           }
         }
       }
-      const { useElementReconciliation, innerLoops } = decideLoopRendering(l, siblingOffsets, ctx);
+      const { useElementReconciliation, innerLoops } = projectionInner ? { useElementReconciliation: false, innerLoops: undefined } : decideLoopRendering(l, siblingOffsets, ctx);
       let template = "";
       let staticItemTemplate;
       let skeletonTemplate;
@@ -14214,7 +14463,7 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
         if (l.isStaticArray && l.children[0]) {
           staticItemTemplate = irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, undefined, undefined, true);
         }
-      } else if (l.children[0]) {
+      } else if (l.children[0] && !projectionInner) {
         const loopParamSpec = [{ param: l.param, bindings: l.paramBindings }];
         template = useElementReconciliation ? irToPlaceholderTemplate(l.children[0], buildRestSpreadNames(ctx), 0, loopParamSpec) : irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, loopParamSpec);
         if (l.isStaticArray) {
@@ -14266,7 +14515,17 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
           raw: l.sortComparator.raw
         } : undefined,
         chainOrder: l.chainOrder,
-        preamble: l.preamble
+        preamble: l.preamble,
+        preambleRegions: l.preambleRegions,
+        flatMapClient: projectionInner ? {
+          params: l.index ? `(${l.param}, ${l.index})` : `(${l.param})`,
+          body: renderFlatMapProjectionClientBody(projectionInner, buildRestSpreadNames(ctx)),
+          keyed: projectionInner.key !== null
+        } : l.flatMapCallback ? {
+          params: l.flatMapCallback.params,
+          body: renderFlatMapClientBody(l.flatMapCallback, buildRestSpreadNames(ctx)),
+          keyed: flatMapCallbackHasKeyedLeaf(l.flatMapCallback)
+        } : undefined
       });
     },
     component: ({ node: c, descend, descendJsxChildren }) => {
@@ -14423,15 +14682,18 @@ function collectBranchLoops(node, ctx, siblingOffsets) {
       const containerSlot = parentSlotId ?? n.slotId;
       if (!containerSlot)
         return;
-      const { useElementReconciliation, innerLoops: innerLoopsCollected } = decideLoopRendering(n, siblingOffsets, undefined);
+      const projectionInner = n.method === "flatMap" && n.children.length === 1 && n.children[0].type === "loop" ? n.children[0] : undefined;
+      const { useElementReconciliation, innerLoops: innerLoopsCollected } = projectionInner ? { useElementReconciliation: false, innerLoops: undefined } : decideLoopRendering(n, siblingOffsets, undefined);
       let childTemplate;
       const branchLoopParamSpec = [{ param: n.param, bindings: n.paramBindings }];
-      if (useElementReconciliation && n.children[0]) {
+      if (projectionInner) {
+        childTemplate = "";
+      } else if (useElementReconciliation && n.children[0]) {
         childTemplate = irToPlaceholderTemplate(n.children[0], restNames, 0, branchLoopParamSpec);
       } else {
         childTemplate = n.children.map((c) => irToHtmlTemplate(c, undefined, 0, branchLoopParamSpec)).join("");
       }
-      const branchBindings = ctx ? collectLoopChildBindings(n.children, ctx, siblingOffsets, n.param, n.paramBindings) : emptyLoopChildBindings();
+      const branchBindings = ctx && !projectionInner ? collectLoopChildBindings(n.children, ctx, siblingOffsets, n.param, n.paramBindings) : emptyLoopChildBindings();
       loops.push({
         kind: "branch",
         array: n.array,
@@ -14448,6 +14710,7 @@ function collectBranchLoops(node, ctx, siblingOffsets) {
         template: childTemplate,
         containerSlotId: containerSlot,
         preamble: n.preamble,
+        preambleRegions: n.preambleRegions,
         nestedComponents: useElementReconciliation ? n.nestedComponents : undefined,
         bindings: branchBindings,
         innerLoops: useElementReconciliation ? innerLoopsCollected : undefined,
@@ -14461,7 +14724,16 @@ function collectBranchLoops(node, ctx, siblingOffsets) {
           paramB: n.sortComparator.paramB,
           raw: n.sortComparator.raw
         } : undefined,
-        chainOrder: n.chainOrder
+        chainOrder: n.chainOrder,
+        flatMapClient: projectionInner ? {
+          params: n.index ? `(${n.param}, ${n.index})` : `(${n.param})`,
+          body: renderFlatMapProjectionClientBody(projectionInner, restNames),
+          keyed: projectionInner.key !== null
+        } : n.flatMapCallback ? {
+          params: n.flatMapCallback.params,
+          body: renderFlatMapClientBody(n.flatMapCallback, restNames),
+          keyed: flatMapCallbackHasKeyedLeaf(n.flatMapCallback)
+        } : undefined
       });
     }
   });
@@ -14836,6 +15108,13 @@ function buildReferencesGraph(ctx, irRoot) {
         addExprEdges(ROOT_SOURCE, l.sortComparator.raw, "template-closure");
       if (l.preamble)
         addExprEdges(ROOT_SOURCE, preambleAnalysisText(l.preamble), "template-closure");
+      if (l.flatMapCallback) {
+        addExprEdges(ROOT_SOURCE, preambleAnalysisText(l.flatMapCallback), "template-closure");
+        for (const seg of l.flatMapCallback.segments) {
+          if (seg.kind === "jsx")
+            walkIR(seg.ir, null, visitor);
+        }
+      }
       descend();
       if (l.childComponent)
         walkChildComponent(l.childComponent);
@@ -15008,11 +15287,11 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "onMount",
   "hydrate",
   "insert",
-  "reconcileElements",
   "getLoopChildren",
   "getLoopNodes",
   "mapArray",
   "mapArrayAnchored",
+  "patchLeaf",
   "createDisposableEffect",
   "createComponent",
   "renderChild",
@@ -15020,7 +15299,6 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "registerTemplate",
   "initChild",
   "upsertChild",
-  "updateClientMarker",
   "createPortal",
   "provideContext",
   "createContext",
@@ -15032,6 +15310,7 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "styleToCss",
   "escapeAttr",
   "escapeText",
+  "escapeTextOrNode",
   "qsa",
   "qsaItem",
   "qsaChildScope",
@@ -15040,7 +15319,8 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "__slot",
   "__bfSlot",
   "__bfText",
-  "tAfter",
+  "claimSlots",
+  "lazySlots",
   "beginTurn",
   "endTurn",
   "date",
@@ -17015,6 +17295,15 @@ function destructureLoopParam(param, paramBindings) {
   }
   return { head: param, unwrap: "" };
 }
+function buildPreambleRegionPlans(regions, loopParam, loopParamBindings) {
+  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})`;
+    return { slotId: r.slotId, valueExpr };
+  });
+}
 function buildComponentPropsExpr2(comp, loopParam, loopParamBindings) {
   const wrap = loopParam ? (expr) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings) : (expr) => expr;
   const entries = comp.props.map((p) => {
@@ -18029,8 +18318,9 @@ function buildDynamicLoopDelegationPlan(elem, profileComponentName) {
       key: elem.key,
       index: elem.index,
       mapPreamble: elem.preamble ? renderPreamble(elem.preamble, {
-        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
-      }) : null
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true)
+      }) : null,
+      mapPreambleDeclaredNames: elem.preamble?.declaredNames ?? []
     })
   };
 }
@@ -18047,8 +18337,9 @@ function buildBranchLoopDelegationPlan(loop, cv, profileComponentName) {
       key: loop.key,
       index: loop.index,
       mapPreamble: loop.preamble ? renderPreamble(loop.preamble, {
-        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined, true)
-      }) : null
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true)
+      }) : null,
+      mapPreambleDeclaredNames: loop.preamble?.declaredNames ?? []
     })
   };
 }
@@ -18063,8 +18354,9 @@ function buildStaticArrayDelegationPlan(elem, profileComponentName) {
       arrayExpr: buildChainedArrayExpr(elem),
       param: elem.param,
       mapPreamble: elem.preamble ? renderPreamble(elem.preamble, {
-        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
+        renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined, true)
       }) : null,
+      mapPreambleDeclaredNames: elem.preamble?.declaredNames ?? [],
       offset: elem.offset ?? null,
       indexParam: elem.index ?? null
     }
@@ -18081,6 +18373,7 @@ function buildKeyedOrIndexLookup(args) {
       paramBindings: args.paramBindings,
       keyWithItem,
       mapPreamble: args.mapPreamble,
+      mapPreambleDeclaredNames: args.mapPreambleDeclaredNames,
       hasBindings,
       indexParam: args.index
     };
@@ -18090,6 +18383,7 @@ function buildKeyedOrIndexLookup(args) {
     arrayExpr: args.array,
     param: args.param,
     mapPreamble: args.mapPreamble,
+    mapPreambleDeclaredNames: args.mapPreambleDeclaredNames,
     hasBindings,
     indexParam: args.index
   };
@@ -18111,14 +18405,16 @@ function buildBranchLoopPlan(loop, profileComponentName) {
   }
   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 plan = {
     kind: "plain",
     rowConstruction: "string-template",
     containerSlotId,
     containerVar,
     markerId: loop.markerId,
-    arrayExpr: buildChainedArrayExpr(loop),
-    keyFn: loopKeyFn(loop),
+    flatMapLeafItem: fm ? true : undefined,
+    arrayExpr: fm ? `(${buildChainedArrayExpr(loop)}).flatMap(${fm.params} => ${fm.body})` : buildChainedArrayExpr(loop),
+    keyFn: fm ? fm.keyed ? "(__bfD, __bfI) => String(__bfD.k ?? __bfI)" : "null" : loopKeyFn(loop),
     paramHead,
     paramUnwrap,
     indexParam: loop.index || "__idx",
@@ -18137,6 +18433,7 @@ function buildBranchLoopPlan(loop, profileComponentName) {
     }) : null,
     eventDelegation: buildBranchLoopDelegationPlan(loop, cv, profileComponentName),
     childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings),
+    preambleRegions: buildPreambleRegionPlans(loop.preambleRegions, loop.param, loop.paramBindings),
     bodyIsMultiRoot: loop.bodyIsMultiRoot ?? false,
     profileLoopId: profileComponentName ? `${profileComponentName}#binding:${containerSlotId}` : undefined
   };
@@ -18194,6 +18491,22 @@ function buildArmBody(branch, options) {
 
 // src/ir-to-client-js/emit-reactive.ts
 import ts14 from "typescript";
+
+// src/ir-to-client-js/control-flow/stringify/claim-plan.ts
+function slotSpecLiteral(slot) {
+  const pathSrc = slot.pathExpr ?? `[${slot.path.join(", ")}]`;
+  const markerlessSrc = slot.markerless ? ", markerless: true" : "";
+  return `{ id: '${slot.id}', kind: '${slot.kind}', path: ${pathSrc}${markerlessSrc} }`;
+}
+function claimPlanLiteral(slots) {
+  return `[${slots.map(slotSpecLiteral).join(", ")}]`;
+}
+function claimWriterVarName(slots, sanitize) {
+  const first = slots[0]?.id ?? "0";
+  return `__bfw_${sanitize(first)}`;
+}
+
+// src/ir-to-client-js/emit-reactive.ts
 function bindingIdArg(ctx, slotId) {
   if (!ctx.profile || !slotId)
     return "";
@@ -18377,17 +18690,18 @@ function emitDynamicTextUpdates(lines, ctx) {
     const conditionalElems = elems.filter((e) => e.insideConditional);
     const normalElems = elems.filter((e) => !e.insideConditional);
     if (normalElems.length > 0 || conditionalElems.length > 0) {
-      for (const elem of normalElems) {
-        const v = varSlotId(elem.slotId);
-        lines.push(`  let __anchor_${v} = _${v}`);
-      }
       const __textSlot = (normalElems[0] ?? conditionalElems[0])?.slotId;
+      let writer = "";
+      if (normalElems.length > 0) {
+        const slots = normalElems.map((elem) => ({ id: elem.slotId, kind: "markup", path: [] }));
+        writer = claimWriterVarName(slots, varSlotId);
+        lines.push(`  const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`);
+      }
       lines.push(`  createEffect(() => {`);
       if (normalElems.length > 0) {
         lines.push(`    const __val = ${expr}`);
         for (const elem of normalElems) {
-          const v = varSlotId(elem.slotId);
-          lines.push(`    __anchor_${v} = __bfText(__anchor_${v}, __val)`);
+          lines.push(`    ${writer}('${elem.slotId}', escapeTextOrNode(__val))`);
         }
         for (const elem of conditionalElems) {
           const v = varSlotId(elem.slotId);
@@ -18410,10 +18724,13 @@ function emitDynamicTextUpdates(lines, ctx) {
 }
 function emitClientOnlyExpressions(lines, ctx) {
   for (const elem of ctx.clientOnlyElements) {
+    const slots = elem.elidedPath ? [{ id: elem.slotId, kind: "text", path: elem.elidedPath, markerless: true }] : [{ id: elem.slotId, kind: "text", path: [] }];
+    const writer = claimWriterVarName(slots, varSlotId);
     lines.push(`  // @client: ${elem.slotId}`);
+    lines.push(`  { const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`);
     lines.push(`  createEffect(() => {`);
-    lines.push(`    updateClientMarker(__scope, '${elem.slotId}', ${elem.expression})`);
-    lines.push(`  }${bindingIdArg(ctx, elem.slotId)})`);
+    lines.push(`    ${writer}('${elem.slotId}', ${elem.expression})`);
+    lines.push(`  }${bindingIdArg(ctx, elem.slotId)}) }`);
     lines.push("");
   }
 }
@@ -18571,13 +18888,18 @@ function stringifyBranchInnerLoops(lines, plan, indent, pc) {
     if (inner.legacyComponents.length > 0 || inner.legacyEvents.length > 0) {
       emitComponentAndEventSetup(lines, `${indent}  `, `__bel${uid}`, [...inner.legacyComponents], [...inner.legacyEvents], inner.outerLoopParam, inner.outerLoopParamBindings);
     }
-    for (const text of inner.reactiveTexts) {
+    const conditionalTexts = inner.reactiveTexts.filter((t) => t.insideConditional);
+    const plainTexts = inner.reactiveTexts.filter((t) => !t.insideConditional);
+    for (const text of conditionalTexts) {
       const bf = profileBindingId(pc, text.slotId);
-      if (text.insideConditional) {
-        lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__bel${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) }${bf})`);
-      } else {
-        lines.push(`${indent}  { const [__rt] = $t(__bel${uid}, '${text.slotId}')`);
-        lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }${bf}) }`);
+      lines.push(`${indent}  createEffect(() => { claimSlots(__bel${uid}, [{ id: '${text.slotId}', kind: 'text', path: [] }]).write('${text.slotId}', String(${text.wrappedExpression})) }${bf})`);
+    }
+    if (plainTexts.length > 0) {
+      const slots = plainTexts.map((t) => ({ id: t.slotId, kind: "text", path: [] }));
+      const writer = claimWriterVarName(slots, varSlotId);
+      lines.push(`${indent}  const ${writer} = lazySlots(__bel${uid}, ${claimPlanLiteral(slots)})`);
+      for (const text of plainTexts) {
+        lines.push(`${indent}  createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)})`);
       }
     }
     if (inner.nestedConditionals.length > 0) {
@@ -18620,24 +18942,41 @@ function stringifyLoopChildArm(lines, arm, armIndent, pc) {
     stringifyLoopChildConditional(lines, cond, `${armIndent}  `, pc);
     lines.push(`${armIndent}}))`);
   }
-  for (const text of arm.texts) {
-    const varName = `__rt_${varSlotId(text.slotId)}`;
-    lines.push(`${armIndent}let ${varName} = $t(__branchScope, '${text.slotId}')[0]`);
-    lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => { ${varName} = __bfText(${varName}, ${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}))`);
+  if (arm.texts.length > 0) {
+    const slots = arm.texts.map((t) => ({ id: t.slotId, kind: "markup", path: [] }));
+    const writer = claimWriterVarName(slots, varSlotId);
+    lines.push(`${armIndent}const ${writer} = lazySlots(__branchScope, ${claimPlanLiteral(slots)})`);
+    for (const text of arm.texts) {
+      lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => { ${writer}('${text.slotId}', escapeTextOrNode(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)}))`);
+    }
   }
   lines.push(`${armIndent}return () => __disposers.forEach(d => d())`);
 }
 
 // src/ir-to-client-js/control-flow/stringify/reactive-effects.ts
 function stringifyReactiveEffects(lines, plan, opts) {
-  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot, textIndexBySlot } = opts;
+  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot, textClaimPathExprs, preambleRegions = [], mapPreambleWrapped } = opts;
   const lookup = bodyIsMultiRoot ? "qsaItem" : "qsa";
-  const pc = plan.profileComponentName;
+  const pc = plan?.profileComponentName;
   const bindingBfId = (slotId) => profileBindingId(pc, slotId);
-  for (const slot of plan.attrSlots) {
+  const attrSlots = plan?.attrSlots ?? [];
+  const outerTexts = plan?.outerTexts ?? [];
+  const conditionals = plan?.conditionals ?? [];
+  if (pc) {
+    emitAttrSlotsGranular(lines, indent, elVar, lookup, attrSlots, elementIndexBySlot, bindingBfId);
+    emitOuterTexts(lines, indent, elVar, outerTexts, bindingBfId, textClaimPathExprs);
+    emitPreambleRegionsEffect(lines, indent, elVar, preambleRegions, mapPreambleWrapped);
+  } else {
+    emitConsolidatedRowEffect(lines, indent, elVar, lookup, attrSlots, outerTexts, elementIndexBySlot, textClaimPathExprs, preambleRegions, mapPreambleWrapped);
+  }
+  for (const cond of conditionals) {
+    emitOuterConditional(lines, indent, elVar, cond, pc);
+  }
+}
+function emitAttrSlotsGranular(lines, indent, elVar, lookup, attrSlots, elementIndexBySlot, bindingBfId) {
+  for (const slot of attrSlots) {
     const varName = `__ra_${varSlotId(slot.slotId)}`;
-    const pIdx = elementIndexBySlot?.get(slot.slotId);
-    const lookupExpr = pIdx !== undefined ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${slot.slotId}"]')` : `${lookup}(${elVar}, '[bf="${slot.slotId}"]')`;
+    const lookupExpr = attrLookupExpr(slot.slotId, varName, elVar, lookup, elementIndexBySlot);
     lines.push(`${indent}{ const ${varName} = ${lookupExpr}`);
     lines.push(`${indent}if (${varName}) {`);
     for (const attr of slot.attrs) {
@@ -18649,21 +18988,83 @@ function stringifyReactiveEffects(lines, plan, opts) {
     }
     lines.push(`${indent}} }`);
   }
-  for (const text of plan.outerTexts) {
-    emitOuterText(lines, indent, elVar, text, bindingBfId(text.slotId), textIndexBySlot?.get(text.slotId));
+}
+function emitPreambleRegionsEffect(lines, indent, elVar, preambleRegions, mapPreambleWrapped) {
+  if (preambleRegions.length === 0)
+    return;
+  const slots = preambleRegions.map((r) => ({ id: r.slotId, kind: "markup", path: [] }));
+  const writer = claimWriterVarName(slots, varSlotId);
+  lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(slots)})`);
+  lines.push(`${indent}createEffect(() => {`);
+  if (mapPreambleWrapped)
+    lines.push(`${indent}  ${mapPreambleWrapped}`);
+  for (const region of preambleRegions) {
+    lines.push(`${indent}  ${writer}('${region.slotId}', ${region.valueExpr})`);
   }
-  for (const cond of plan.conditionals) {
-    emitOuterConditional(lines, indent, elVar, cond, pc);
+  lines.push(`${indent}})`);
+}
+function attrLookupExpr(slotId, varName, elVar, lookup, elementIndexBySlot) {
+  const pIdx = elementIndexBySlot?.get(slotId);
+  return pIdx !== undefined ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${slotId}"]')` : `${lookup}(${elVar}, '[bf="${slotId}"]')`;
+}
+function emitConsolidatedRowEffect(lines, indent, elVar, lookup, attrSlots, outerTexts, elementIndexBySlot, textClaimPathExprs, preambleRegions, mapPreambleWrapped) {
+  if (attrSlots.length === 0 && outerTexts.length === 0 && preambleRegions.length === 0)
+    return;
+  for (const slot of attrSlots) {
+    const varName = `__ra_${varSlotId(slot.slotId)}`;
+    lines.push(`${indent}const ${varName} = ${attrLookupExpr(slot.slotId, varName, elVar, lookup, elementIndexBySlot)}`);
+  }
+  const claimSlots = [
+    ...outerTexts.map((t) => ({ id: t.slotId, kind: "text", path: [], pathExpr: textClaimPathExprs?.get(t.slotId) })),
+    ...preambleRegions.map((r) => ({ id: r.slotId, kind: "markup", path: [] }))
+  ];
+  const writer = claimSlots.length > 0 ? claimWriterVarName(claimSlots, varSlotId) : null;
+  if (writer) {
+    lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(claimSlots)})`);
+  }
+  if (attrSlots.length === 0 && preambleRegions.length === 0 && outerTexts.length === 1) {
+    const text = outerTexts[0];
+    lines.push(`${indent}createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) })`);
+    return;
   }
+  lines.push(`${indent}createEffect(() => {`);
+  for (const slot of attrSlots) {
+    const varName = `__ra_${varSlotId(slot.slotId)}`;
+    lines.push(`${indent}  if (${varName}) {`);
+    for (const attr of slot.attrs) {
+      lines.push(`${indent}    {`);
+      for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta)) {
+        lines.push(`${indent}      ${stmt}`);
+      }
+      lines.push(`${indent}    }`);
+    }
+    lines.push(`${indent}  }`);
+  }
+  if (preambleRegions.length > 0 && mapPreambleWrapped) {
+    lines.push(`${indent}  ${mapPreambleWrapped}`);
+  }
+  for (const text of outerTexts) {
+    lines.push(`${indent}  ${writer}('${text.slotId}', String(${text.wrappedExpression}))`);
+  }
+  for (const region of preambleRegions) {
+    lines.push(`${indent}  ${writer}('${region.slotId}', ${region.valueExpr})`);
+  }
+  lines.push(`${indent}})`);
 }
-function emitOuterText(lines, indent, elVar, text, bfId = "", pIdx) {
-  const varName = `__rt_${varSlotId(text.slotId)}`;
-  if (pIdx !== undefined) {
-    lines.push(`${indent}{ const ${varName} = __p ? tAfter(__p[${pIdx}]) : $t(${elVar}, '${text.slotId}')[0]`);
-  } else {
-    lines.push(`${indent}{ const [${varName}] = $t(${elVar}, '${text.slotId}')`);
+function emitOuterTexts(lines, indent, elVar, texts, bindingBfId, textClaimPathExprs) {
+  if (texts.length === 0)
+    return;
+  const slots = texts.map((t) => ({
+    id: t.slotId,
+    kind: "text",
+    path: [],
+    pathExpr: textClaimPathExprs?.get(t.slotId)
+  }));
+  const writer = claimWriterVarName(slots, varSlotId);
+  lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(slots)})`);
+  for (const text of texts) {
+    lines.push(`${indent}createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${bindingBfId(text.slotId)})`);
   }
-  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${bfId}) }`);
 }
 function emitOuterConditional(lines, indent, elVar, cond, pc) {
   const armIndent = `${indent}    `;
@@ -18825,8 +19226,24 @@ function stringifyPlainLoop(lines, plan, topIndent = "  ") {
     childRefs,
     bodyIsMultiRoot,
     anchored,
-    anchorKeyExpr
+    anchorKeyExpr,
+    preambleRegions
   } = plan;
+  if (plan.flatMapLeafItem) {
+    const loopBfIdArg = plan.profileLoopId ? `, ${JSON.stringify(plan.profileLoopId)}` : "";
+    lines.push(`${topIndent}mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (__bfD, ${indexParam}, __existing) => {`);
+    lines.push(`${topIndent}  let __el = __existing`);
+    lines.push(`${topIndent}  if (!__el) { const __tpl = document.createElement('template'); __tpl.innerHTML = __bfD().h; __el = __tpl.content.firstElementChild }`);
+    lines.push(`${topIndent}  let __last = __existing ? undefined : __bfD().h`);
+    lines.push(`${topIndent}  createEffect(() => {`);
+    lines.push(`${topIndent}    const __html = __bfD().h`);
+    lines.push(`${topIndent}    if (__last === undefined) { __last = __html; return }`);
+    lines.push(`${topIndent}    if (__html !== __last) { __last = __html; patchLeaf(__el, __html) }`);
+    lines.push(`${topIndent}  })`);
+    lines.push(`${topIndent}  return __el`);
+    lines.push(`${topIndent}}, '${markerId}'${loopBfIdArg})`);
+    return;
+  }
   if (anchored) {
     stringifyAnchoredLoop(lines, plan, topIndent, anchorKeyExpr);
     return;
@@ -18837,7 +19254,7 @@ function stringifyPlainLoop(lines, plan, topIndent = "  ") {
     emitHoistedTemplateDecl(lines, topIndent, tplVar, hoistedTpl);
   }
   const loopBfId = plan.profileLoopId ? `, ${JSON.stringify(plan.profileLoopId)}` : "";
-  if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0) {
+  if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0 && preambleRegions.length === 0) {
     const unwrapInline = paramUnwrap ? `${paramUnwrap} ` : "";
     const preamble = mapPreambleWrapped ? `${mapPreambleWrapped}; ` : "";
     const cloneExpr = hoistedTpl ? `return ${hoistedCloneExpr(tplVar, hoistedTpl)}` : emitTemplateCloneInline(template);
@@ -18866,22 +19283,31 @@ function stringifyPlainLoop(lines, plan, topIndent = "  ") {
       ...reactiveEffects?.attrSlots.map((s) => s.slotId) ?? [],
       ...childRefs.map((r) => r.childSlotId)
     ];
-    const textSlotIds = reactiveEffects?.outerTexts.map((t) => t.slotId) ?? [];
-    if (elementSlotIds.length > 0 || textSlotIds.length > 0) {
-      const built = buildSkeletonPathPlan(plan.skeletonPaths, "__el", { elementSlotIds, textSlotIds });
+    if (elementSlotIds.length > 0) {
+      const built = buildSkeletonPathPlan(plan.skeletonPaths, "__el", { elementSlotIds, textSlotIds: [] });
       if (built.arrayElems.length > 0) {
         pathPlan = built;
         lines.push(`${bodyIndent}const __p = __existing ? null : [${built.arrayElems.join(", ")}]`);
       }
     }
   }
-  if (reactiveEffects !== null) {
+  const textClaimPathExprs = new Map;
+  if (hoistedTpl && plan.skeletonPaths) {
+    for (const text of reactiveEffects?.outerTexts ?? []) {
+      const path = plan.skeletonPaths.textMarkerPaths.get(text.slotId);
+      if (path)
+        textClaimPathExprs.set(text.slotId, `__existing ? [] : [${path.join(", ")}]`);
+    }
+  }
+  if (reactiveEffects !== null || preambleRegions.length > 0) {
     stringifyReactiveEffects(lines, reactiveEffects, {
       indent: bodyIndent,
       elVar: "__el",
       bodyIsMultiRoot,
       elementIndexBySlot: pathPlan?.elementIndexBySlot,
-      textIndexBySlot: pathPlan?.textIndexBySlot
+      textClaimPathExprs,
+      preambleRegions,
+      mapPreambleWrapped
     });
   }
   emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: "__el", bodyIsMultiRoot, elementIndexBySlot: pathPlan?.elementIndexBySlot });
@@ -18993,10 +19419,13 @@ function stringifyStaticLoop(lines, plan) {
     }
     lines.push(`        }`);
   }
-  for (const text of texts) {
-    const vn = `__rt_${varSlotId(text.slotId)}`;
-    lines.push(`        { const [${vn}] = $t(__iterEl, '${text.slotId}')`);
-    lines.push(`        if (${vn}) createEffect(() => { ${vn}.textContent = String(${text.expression}) }${profileBindingId(pc, text.slotId)}) }`);
+  if (texts.length > 0) {
+    const slots = texts.map((t) => ({ id: t.slotId, kind: "text", path: [] }));
+    const writer = claimWriterVarName(slots, varSlotId);
+    lines.push(`        const ${writer} = lazySlots(__iterEl, ${claimPlanLiteral(slots)})`);
+    for (const text of texts) {
+      lines.push(`        createEffect(() => { ${writer}('${text.slotId}', String(${text.expression})) }${profileBindingId(pc, text.slotId)})`);
+    }
   }
   emitLoopChildRefs(lines, childRefs, { indent: "        ", elVar: "__iterEl", bodyIsMultiRoot: false });
   lines.push(`      }`);
@@ -19051,13 +19480,18 @@ function emitReactive(lines, inner, indent, pc) {
   if (inner.childLevels.length > 0) {
     stringifyInnerLoops(lines, inner.childLevels, `${indent}  `, pc);
   }
-  for (const text of emit.reactiveTexts) {
+  const conditionalTexts = emit.reactiveTexts.filter((t) => t.insideConditional);
+  const plainTexts = emit.reactiveTexts.filter((t) => !t.insideConditional);
+  for (const text of conditionalTexts) {
     const bf = profileBindingId(pc, text.slotId);
-    if (text.insideConditional) {
-      lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__innerEl${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) }${bf})`);
-    } else {
-      lines.push(`${indent}  { const [__rt] = $t(__innerEl${uid}, '${text.slotId}')`);
-      lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }${bf}) }`);
+    lines.push(`${indent}  createEffect(() => { claimSlots(__innerEl${uid}, [{ id: '${text.slotId}', kind: 'text', path: [] }]).write('${text.slotId}', String(${text.wrappedExpression})) }${bf})`);
+  }
+  if (plainTexts.length > 0) {
+    const slots = plainTexts.map((t) => ({ id: t.slotId, kind: "text", path: [] }));
+    const writer = claimWriterVarName(slots, varSlotId);
+    lines.push(`${indent}  const ${writer} = lazySlots(__innerEl${uid}, ${claimPlanLiteral(slots)})`);
+    for (const text of plainTexts) {
+      lines.push(`${indent}  createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)})`);
     }
   }
   for (const attr of emit.reactiveAttrs) {
@@ -19195,6 +19629,12 @@ function indexBindingLine(handler, indexParam, indexExpr) {
     return null;
   return `const ${indexParam} = ${indexExpr}`;
 }
+function preambleLineForHandler(mapPreamble, declaredNames, handler) {
+  if (!mapPreamble || declaredNames.length === 0)
+    return null;
+  const free = extractFreeIdentifiersFromText(handler);
+  return declaredNames.some((name) => free.has(name)) ? mapPreamble : null;
+}
 function stringifyEventDelegation(lines, plan) {
   const { containerVar, events, itemLookup, profileComponentName } = plan;
   const eventsByName = new Map;
@@ -19240,7 +19680,8 @@ function stringifyEventDelegation(lines, plan) {
   }
 }
 function emitKeyedLookup(ls, ev, handlerCall, lookup) {
-  const { arrayExpr, param, keyWithItem, mapPreamble, hasBindings, indexParam } = lookup;
+  const { arrayExpr, param, keyWithItem, mapPreamble, mapPreambleDeclaredNames, hasBindings, indexParam } = lookup;
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler);
   if (ev.nestedLoops.length === 0) {
     const idxLine2 = indexBindingLine(ev.handler, indexParam, `${arrayExpr}.findIndex(item => String(${keyWithItem}) === key)`);
     ls.push(`      const li = ${varSlotId(ev.childSlotId)}El.closest('[${DATA_KEY}]')`);
@@ -19250,20 +19691,21 @@ function emitKeyedLookup(ls, ev, handlerCall, lookup) {
       ls.push(`        const __bfLoopItem = ${arrayExpr}.find(item => String(${keyWithItem}) === key)`);
       ls.push(`        if (__bfLoopItem) {`);
       ls.push(`          const ${param} = __bfLoopItem`);
-      if (mapPreamble)
-        ls.push(`          ${mapPreamble}`);
+      if (preambleLine)
+        ls.push(`          ${preambleLine}`);
       if (idxLine2)
         ls.push(`          ${idxLine2}`);
-      ls.push(`          ${handlerCall}`);
+      ls.push(`          ;${handlerCall}`);
       ls.push(`        }`);
     } else {
       ls.push(`        const ${param} = ${arrayExpr}.find(item => String(${keyWithItem}) === key)`);
-      if (mapPreamble)
-        ls.push(`        ${mapPreamble}`);
+      ls.push(`        if (${param}) {`);
+      if (preambleLine)
+        ls.push(`          ${preambleLine}`);
       if (idxLine2)
-        ls.push(`        if (${param}) { ${idxLine2}; ${handlerCall} }`);
-      else
-        ls.push(`        if (${param}) ${handlerCall}`);
+        ls.push(`          ${idxLine2}`);
+      ls.push(`          ;${handlerCall}`);
+      ls.push(`        }`);
     }
     ls.push(`      }`);
     return;
@@ -19290,16 +19732,18 @@ function emitKeyedLookup(ls, ev, handlerCall, lookup) {
   }
   const outerGuard = hasBindings ? "__bfLoopItem" : param;
   const allParams = [outerGuard, ...ev.nestedLoops.map((n) => n.param)];
-  if (mapPreamble)
-    ls.push(`      ${mapPreamble}`);
   const idxLine = indexBindingLine(ev.handler, indexParam, `${arrayExpr}.findIndex(item => String(${keyWithItem}) === outerKey)`);
+  ls.push(`      if (${allParams.join(" && ")}) {`);
+  if (preambleLine)
+    ls.push(`        ${preambleLine}`);
   if (idxLine)
-    ls.push(`      if (${allParams.join(" && ")}) { ${idxLine}; ${handlerCall} }`);
-  else
-    ls.push(`      if (${allParams.join(" && ")}) ${handlerCall}`);
+    ls.push(`        ${idxLine}`);
+  ls.push(`        ;${handlerCall}`);
+  ls.push(`      }`);
 }
 function emitDynamicIndexLookup(ls, ev, handlerCall, lookup) {
-  const { arrayExpr, param, mapPreamble, hasBindings, indexParam } = lookup;
+  const { arrayExpr, param, mapPreamble, mapPreambleDeclaredNames, hasBindings, indexParam } = lookup;
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler);
   const idxLine = indexBindingLine(ev.handler, indexParam, "idx");
   ls.push(`      const li = ${varSlotId(ev.childSlotId)}El.closest('li, [bf-i]')`);
   ls.push(`      if (li && li.parentElement) {`);
@@ -19308,25 +19752,27 @@ function emitDynamicIndexLookup(ls, ev, handlerCall, lookup) {
     ls.push(`        const __bfLoopItem = ${arrayExpr}[idx]`);
     ls.push(`        if (__bfLoopItem) {`);
     ls.push(`          const ${param} = __bfLoopItem`);
-    if (mapPreamble)
-      ls.push(`          ${mapPreamble}`);
+    if (preambleLine)
+      ls.push(`          ${preambleLine}`);
     if (idxLine)
       ls.push(`          ${idxLine}`);
-    ls.push(`          ${handlerCall}`);
+    ls.push(`          ;${handlerCall}`);
     ls.push(`        }`);
   } else {
     ls.push(`        const ${param} = ${arrayExpr}[idx]`);
-    if (mapPreamble)
-      ls.push(`        ${mapPreamble}`);
+    ls.push(`        if (${param}) {`);
+    if (preambleLine)
+      ls.push(`          ${preambleLine}`);
     if (idxLine)
-      ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`);
-    else
-      ls.push(`        if (${param}) ${handlerCall}`);
+      ls.push(`          ${idxLine}`);
+    ls.push(`          ;${handlerCall}`);
+    ls.push(`        }`);
   }
   ls.push(`      }`);
 }
 function emitStaticIndexLookup(ls, ev, handlerCall, lookup, containerVar) {
-  const { arrayExpr, param, mapPreamble, offset, indexParam } = lookup;
+  const { arrayExpr, param, mapPreamble, mapPreambleDeclaredNames, offset, indexParam } = lookup;
+  const preambleLine = preambleLineForHandler(mapPreamble, mapPreambleDeclaredNames, ev.handler);
   const idxLine = indexBindingLine(ev.handler, indexParam, "__idx");
   ls.push(`      let __el = ${varSlotId(ev.childSlotId)}El`);
   ls.push(`      while (__el.parentElement && __el.parentElement !== ${containerVar}) __el = __el.parentElement`);
@@ -19334,12 +19780,13 @@ function emitStaticIndexLookup(ls, ev, handlerCall, lookup, containerVar) {
   const idxOffset = buildLoopChildIndexSubtraction(offset ?? undefined);
   ls.push(`        const __idx = Array.from(${containerVar}.children).indexOf(__el)${idxOffset}`);
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`);
-  if (mapPreamble)
-    ls.push(`        ${mapPreamble}`);
+  ls.push(`        if (${param}) {`);
+  if (preambleLine)
+    ls.push(`          ${preambleLine}`);
   if (idxLine)
-    ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`);
-  else
-    ls.push(`        if (${param}) ${handlerCall}`);
+    ls.push(`          ${idxLine}`);
+  ls.push(`          ;${handlerCall}`);
+  ls.push(`        }`);
   ls.push(`      }`);
 }
 
@@ -19372,12 +19819,29 @@ function emitPlain(lines, plan) {
     eventDelegation,
     childRefs,
     bodyIsMultiRoot,
-    profileLoopId
+    profileLoopId,
+    preambleRegions
   } = plan;
   const loopBfId = profileLoopId ? `, ${JSON.stringify(profileLoopId)}` : "";
   const unwrapInline = paramUnwrap ? `${paramUnwrap} ` : "";
   lines.push(`      __disposers.push(createDisposableEffect(() => {`);
-  if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0) {
+  if (plan.flatMapLeafItem) {
+    lines.push(`        if (${containerVar}) mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (__bfD, ${indexParam}, __existing) => {`);
+    lines.push(`          let __el = __existing`);
+    lines.push(`          if (!__el) { const __tpl = document.createElement('template'); __tpl.innerHTML = __bfD().h; __el = __tpl.content.firstElementChild }`);
+    lines.push(`          let __last = __existing ? undefined : __bfD().h`);
+    lines.push(`          createEffect(() => {`);
+    lines.push(`            const __html = __bfD().h`);
+    lines.push(`            if (__last === undefined) { __last = __html; return }`);
+    lines.push(`            if (__html !== __last) { __last = __html; patchLeaf(__el, __html) }`);
+    lines.push(`          })`);
+    lines.push(`          return __el`);
+    lines.push(`        }, '${markerId}'${loopBfId})`);
+    lines.push(`      }))`);
+    stringifyEventDelegation(lines, eventDelegation);
+    return;
+  }
+  if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0 && preambleRegions.length === 0) {
     const cloneExpr = emitTemplateCloneInline(template);
     if (mapPreambleWrapped) {
       lines.push(`        if (${containerVar}) mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => { ${unwrapInline}if (__existing) return __existing; ${mapPreambleWrapped}; ${cloneExpr} }, '${markerId}'${loopBfId})`);
@@ -19398,8 +19862,14 @@ function emitPlain(lines, plan) {
       indent: "          ",
       singleRootLayout: "inline"
     });
-    if (reactiveEffects !== null) {
-      stringifyReactiveEffects(lines, reactiveEffects, { indent: "          ", elVar: "__el", bodyIsMultiRoot });
+    if (reactiveEffects !== null || preambleRegions.length > 0) {
+      stringifyReactiveEffects(lines, reactiveEffects, {
+        indent: "          ",
+        elVar: "__el",
+        bodyIsMultiRoot,
+        preambleRegions,
+        mapPreambleWrapped
+      });
     }
     emitLoopChildRefs(lines, childRefs, { indent: "          ", elVar: "__el", bodyIsMultiRoot });
     lines.push(`          return __el`);
@@ -19487,13 +19957,13 @@ function emitArmBody(lines, body, mode, indent, profileComponentName) {
     }
     lines.push(`${indent}} }`);
   }
-  for (const te of body.textEffects) {
-    const v = varSlotId(te.slotId);
-    lines.push(`${indent}let __anchor_${v} = $t(__branchScope, '${te.slotId}')[0]`);
-    lines.push(`${indent}__disposers.push(createDisposableEffect(() => {`);
-    lines.push(`${indent}  const __val = ${te.expression}`);
-    lines.push(`${indent}  __anchor_${v} = __bfText(__anchor_${v}, __val)`);
-    lines.push(`${indent}}${bindingBfId(te.slotId)}))`);
+  if (body.textEffects.length > 0) {
+    const slots = body.textEffects.map((te) => ({ id: te.slotId, kind: "markup", path: [] }));
+    const writer = claimWriterVarName(slots, varSlotId);
+    lines.push(`${indent}const ${writer} = lazySlots(__branchScope, ${claimPlanLiteral(slots)})`);
+    for (const te of body.textEffects) {
+      lines.push(`${indent}__disposers.push(createDisposableEffect(() => { ${writer}('${te.slotId}', escapeTextOrNode(${te.expression})) }${bindingBfId(te.slotId)}))`);
+    }
   }
   if (body.loops.length > 0) {
     stringifyBranchLoops(lines, body.loops);
@@ -19587,6 +20057,29 @@ function buildPlainLoopPlan(elem, profileComponentName) {
   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 {
+      kind: "plain",
+      rowConstruction: "string-template",
+      containerVar: `_${varSlotId(elem.slotId)}`,
+      markerId: elem.markerId,
+      profileLoopId: profileComponentName ? `${profileComponentName}#binding:${elem.slotId}` : undefined,
+      arrayExpr: `(${buildChainedArrayExpr(elem)}).flatMap(${elem.flatMapClient.params} => ${elem.flatMapClient.body})`,
+      keyFn: elem.flatMapClient.keyed ? "(__bfD, __bfI) => String(__bfD.k ?? __bfI)" : "null",
+      paramHead: "__bfD",
+      paramUnwrap: "",
+      indexParam: "__idx",
+      mapPreambleWrapped: "",
+      template: "",
+      reactiveEffects: null,
+      childRefs: [],
+      bodyIsMultiRoot: false,
+      anchored: false,
+      anchorKeyExpr: "__idx",
+      flatMapLeafItem: true,
+      preambleRegions: []
+    };
+  }
   return {
     kind: "plain",
     rowConstruction: "string-template",
@@ -19607,6 +20100,7 @@ function buildPlainLoopPlan(elem, profileComponentName) {
     skeletonPaths: elem.skeletonPaths,
     reactiveEffects: hasReactive2 ? buildLoopReactiveEffectsPlan(elem, profileComponentName) : null,
     childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
+    preambleRegions: buildPreambleRegionPlans(elem.preambleRegions, elem.param, elem.paramBindings),
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,
     anchored: elem.bodyIsItemConditional ?? false,
     anchorKeyExpr: elem.key ? wrap(elem.key) : elem.index || "__idx"
@@ -19701,7 +20195,6 @@ function emitLoopEventDelegation(lines, elem, kind, profileComponentName) {
 // src/ir-to-client-js/element-refs.ts
 function generateElementRefs(ctx) {
   const regularSlots = new Set;
-  const textSlots = new Set;
   const componentSlots = new Set;
   const conditionalSlotIds = collectConditionalSlotIds(ctx);
   for (const elem of ctx.interactiveElements) {
@@ -19709,11 +20202,6 @@ function generateElementRefs(ctx) {
       regularSlots.add(elem.slotId);
     }
   }
-  for (const elem of ctx.dynamicElements) {
-    if (!elem.insideConditional) {
-      textSlots.add(elem.slotId);
-    }
-  }
   for (const elem of ctx.conditionalElements) {
     regularSlots.add(elem.slotId);
   }
@@ -19742,11 +20230,10 @@ function generateElementRefs(ctx) {
   for (const slotId of componentSlots) {
     regularSlots.delete(slotId);
   }
-  if (regularSlots.size === 0 && textSlots.size === 0 && componentSlots.size === 0)
+  if (regularSlots.size === 0 && componentSlots.size === 0)
     return "";
   const refLines = [];
   emitSlotRefs(refLines, [...regularSlots], "$");
-  emitSlotRefs(refLines, [...textSlots], "$t");
   emitSlotRefs(refLines, [...componentSlots], "$c");
   return refLines.join(`
 `);
@@ -20302,6 +20789,111 @@ ${externalImports.join(`
   return generatedCode.replace(IMPORT_PLACEHOLDER, allImports);
 }
 
+// src/ir-to-client-js/client-only-elision.ts
+function decideClientOnlyElision(root) {
+  walkNode(root, [], new Set, { bailed: false });
+}
+function walkNode(node, path, forceCloseAncestors, state) {
+  if (state.bailed)
+    return;
+  if (node.type === "element") {
+    if (!elementIsPathSafe(node.tag, flattenSkeletonChildren(node.children))) {
+      state.bailed = true;
+      return;
+    }
+    const groupIdx = skeletonForceCloseGroup(node.tag);
+    if (groupIdx >= 0 && forceCloseAncestors.has(groupIdx)) {
+      state.bailed = true;
+      return;
+    }
+    const nextAncestors = groupIdx >= 0 ? new Set([...forceCloseAncestors, groupIdx]) : forceCloseAncestors;
+    walkChildren(flattenSkeletonChildren(node.children), path, nextAncestors, state);
+  } else if (node.type === "fragment") {
+    walkChildren(flattenSkeletonChildren(node.children), path, forceCloseAncestors, state);
+  }
+}
+function walkChildren(children, parentPath, forceCloseAncestors, state) {
+  let frozen = false;
+  let idx = 0;
+  let pendingText = false;
+  for (let i = 0;i < children.length; i++) {
+    if (state.bailed)
+      return;
+    const child = children[i];
+    switch (child.type) {
+      case "text": {
+        if (child.value === "")
+          continue;
+        if (!pendingText)
+          idx += 1;
+        pendingText = true;
+        continue;
+      }
+      case "expression": {
+        if (child.expr === "null" || child.expr === "undefined")
+          continue;
+        if (child.clientOnly && child.slotId) {
+          const adjacent = isTextLike(children[i - 1]) || isTextLike(children[i + 1]);
+          if (!frozen && !adjacent) {
+            markElided(child, [...parentPath, idx]);
+            frozen = true;
+          } else {
+            frozen = true;
+          }
+          idx += 1;
+          pendingText = false;
+          continue;
+        }
+        frozen = true;
+        idx += 1;
+        pendingText = false;
+        continue;
+      }
+      case "element": {
+        if (!elementIsPathSafe(child.tag, flattenSkeletonChildren(child.children))) {
+          state.bailed = true;
+          return;
+        }
+        if (!frozen) {
+          walkNode(child, [...parentPath, idx], forceCloseAncestors, state);
+        }
+        idx += 1;
+        pendingText = false;
+        continue;
+      }
+      case "fragment":
+        continue;
+      default:
+        frozen = true;
+        idx += 1;
+        pendingText = false;
+        continue;
+    }
+  }
+}
+function isTextLike(node) {
+  if (!node)
+    return false;
+  if (node.type === "text")
+    return node.value !== "";
+  if (node.type === "expression")
+    return node.expr !== "null" && node.expr !== "undefined";
+  return false;
+}
+function markElided(expr, path) {
+  expr.markerless = true;
+  expr.elidedPath = path;
+}
+function elementIsPathSafe(tag, flatChildren) {
+  if (SKELETON_PATH_HAZARD_TAGS.has(tag))
+    return false;
+  if (VOID_ELEMENTS.has(tag) && flatChildren.length > 0)
+    return false;
+  if (tag === "tr" && hasForeignTableRowContent(flatChildren))
+    return false;
+  return true;
+}
+
 // src/css-layer-prefixer.ts
 function prefixClass(cls, layerName) {
   if (!cls || cls.startsWith("layer-"))
@@ -21594,7 +22186,7 @@ function checkRichTypeMethodCalls(root, metadata, errors) {
     return;
   const matchers = prepareLoweringMatchers(metadata);
   const seen = new Set;
-  walkNode(root, metadata, EMPTY_BINDINGS2, matchers, errors, seen);
+  walkNode2(root, metadata, EMPTY_BINDINGS2, matchers, errors, seen);
 }
 function isLoweringClaimed(matchers, callee, args) {
   return matchers.some((m) => m(callee, args) !== null);
@@ -21731,7 +22323,7 @@ function walkAttrValue(value, clientOnly, loc, meta, bindings, matchers, errors,
     walkTemplateParts(value.parts, loc, meta, bindings, matchers, errors, seen);
   }
 }
-function walkNode(node, meta, bindings, matchers, errors, seen) {
+function walkNode2(node, meta, bindings, matchers, errors, seen) {
   if (node.type === "expression") {
     if (!node.clientOnly && node.parsed)
       checkExpr(node.parsed, node.loc, meta, bindings, matchers, errors, seen);
@@ -21757,12 +22349,12 @@ function walkNode(node, meta, bindings, matchers, errors, seen) {
     case "fragment":
     case "provider":
       for (const child of node.children)
-        walkNode(child, meta, bindings, matchers, errors, seen);
+        walkNode2(child, meta, bindings, matchers, errors, seen);
       break;
     case "async":
-      walkNode(node.fallback, meta, bindings, matchers, errors, seen);
+      walkNode2(node.fallback, meta, bindings, matchers, errors, seen);
       for (const child of node.children)
-        walkNode(child, meta, bindings, matchers, errors, seen);
+        walkNode2(child, meta, bindings, matchers, errors, seen);
       break;
     case "loop": {
       if (node.clientOnly)
@@ -21775,35 +22367,35 @@ function walkNode(node, meta, bindings, matchers, errors, seen) {
       if (node.index)
         loopBindings.set(node.index, null);
       for (const child of node.children)
-        walkNode(child, meta, loopBindings, matchers, errors, seen);
+        walkNode2(child, meta, loopBindings, matchers, errors, seen);
       if (node.childComponent) {
         for (const child of node.childComponent.children)
-          walkNode(child, meta, loopBindings, matchers, errors, seen);
+          walkNode2(child, meta, loopBindings, matchers, errors, seen);
       }
       for (const nested of node.nestedComponents ?? []) {
         for (const child of nested.children)
-          walkNode(child, meta, loopBindings, matchers, errors, seen);
+          walkNode2(child, meta, loopBindings, matchers, errors, seen);
       }
       for (const seg of node.flatMapCallback?.segments ?? []) {
         if (seg.kind === "jsx")
-          walkNode(seg.ir, meta, loopBindings, matchers, errors, seen);
+          walkNode2(seg.ir, meta, loopBindings, matchers, errors, seen);
       }
       for (const seg of node.preamble?.segments ?? []) {
         if (seg.kind === "jsx")
-          walkNode(seg.ir, meta, loopBindings, matchers, errors, seen);
+          walkNode2(seg.ir, meta, loopBindings, matchers, errors, seen);
       }
       break;
     }
     case "conditional":
       if (node.clientOnly)
         break;
-      walkNode(node.whenTrue, meta, bindings, matchers, errors, seen);
-      walkNode(node.whenFalse, meta, bindings, matchers, errors, seen);
+      walkNode2(node.whenTrue, meta, bindings, matchers, errors, seen);
+      walkNode2(node.whenFalse, meta, bindings, matchers, errors, seen);
       break;
     case "if-statement":
-      walkNode(node.consequent, meta, bindings, matchers, errors, seen);
+      walkNode2(node.consequent, meta, bindings, matchers, errors, seen);
       if (node.alternate)
-        walkNode(node.alternate, meta, bindings, matchers, errors, seen);
+        walkNode2(node.alternate, meta, bindings, matchers, errors, seen);
       break;
   }
 }
@@ -21869,6 +22461,7 @@ function compileMultipleComponents(source, filePath, componentNames, options) {
     };
     componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR);
     checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors);
+    decideClientOnlyElision(componentIR.root);
     if (options.cssLayerPrefix) {
       applyCssLayerPrefix(componentIR, options.cssLayerPrefix);
     }
@@ -22208,6 +22801,7 @@ function compileJSX(source, filePath, options) {
   };
   componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR);
   checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors);
+  decideClientOnlyElision(componentIR.root);
   if (ctx.importedClientSignalNames.size > 0) {
     const sources = new Set;
     for (const imp of ctx.imports) {
@@ -26275,6 +26869,7 @@ export {
   diffStaticBudget,
   diffProfiles,
   describeFallback,
+  decideClientOnlyElision,
   dangerousInnerHtmlMetacharViolation,
   dangerousInnerHtmlDiagnostic,
   createProgramForFile,