@barefootjs/cli 0.26.3 → 0.27.0

package/dist/index.js

@@ -3695,7 +3695,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)} + '"' : ''}`;
 }
@@ -3815,12 +3815,54 @@ 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, void 0, void 0, 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, void 0, void 0, true)).join("");
+  return `${chained}.map(${params} => ({ k: ${key}, h: \`${html}\` }))`;
+}
 function escapeLeafTextExpressions(ir) {
   switch (ir.type) {
     case "element":
@@ -3884,6 +3926,10 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       return escapeHtml(node.value);
     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) {
@@ -3949,7 +3995,7 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       let mapExpr;
       if (node.flatMapCallback) {
         const body2 = 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} => ${body2}).join('')}`;
       } else if (node.preamble) {
@@ -4200,7 +4246,8 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
       let mapExpr;
       if (node.flatMapCallback) {
         const body2 = renderPreamble(node.flatMapCallback, {
-          renderLeaf: (ir) => irToPlaceholderTemplate(ir, restSpreadNames, loopDepth + 1, loopParams)
+          // Leaf `key` stripped — see the irToHtmlTemplate site above.
+          renderLeaf: (ir) => irToPlaceholderTemplate(stripLeafKeyAttr(ir), restSpreadNames, loopDepth + 1, loopParams)
         });
         mapExpr = `\${${wrappedArray}.flatMap(${node.flatMapCallback.params} => ${body2}).join('')}`;
       } else if (node.preamble) {
@@ -4698,7 +4745,7 @@ function generateCsrTemplateWithOpts(node, opts) {
     case "expression":
       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);
@@ -4799,7 +4846,8 @@ function generateCsrTemplateWithOpts(node, opts) {
         const body2 = renderPreamble(node.flatMapCallback, {
           textVariant: "template",
           transformJs: (t) => applyPropsRewrite(t, propsObjectName ?? null),
-          renderLeaf: (ir) => recurseInLoopBody(ir)
+          // Leaf `key` stripped — see the irToHtmlTemplate site above.
+          renderLeaf: (ir) => recurseInLoopBody(stripLeafKeyAttr(ir))
         });
         mapExpr = `\${${iterArrayExpr}.flatMap(${node.flatMapCallback.params} => ${body2}).join('')}`;
       } else if (node.preamble) {
@@ -11596,6 +11644,76 @@ function checkLoopKey(callback, ctx2, isNested) {
     return;
   }
 }
+function flatMapProjectionCall(body2) {
+  let expr;
+  if (ts11.isBlock(body2)) {
+    const real = body2.statements;
+    if (real.length !== 1 || !ts11.isReturnStatement(real[0]) || !real[0].expression) return null;
+    expr = real[0].expression;
+  } else {
+    expr = body2;
+  }
+  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 visit3 = (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 name2 = attr.name.getText();
+          if (/^on[A-Z]/.test(name2)) {
+            ok = false;
+            return;
+          }
+        }
+      }
+    }
+    if (ts11.isCallExpression(n) && getMapLikeMethod(n) && containsJsxInExpression(n)) {
+      ok = false;
+      return;
+    }
+    ts11.forEachChild(n, visit3);
+  };
+  visit3(el);
+  return ok;
+}
 function loopBodyIsMultiRoot(children2) {
   const real = children2.filter(
     (c) => !(c.type === "text" && typeof c.value === "string" && !c.value.trim())
@@ -11641,6 +11759,7 @@ function extractItemConditionalKey(cond) {
 }
 function transformMapCall(node, ctx2, isClientOnly = false, method2 = "map") {
   const isNested = ctx2.loopParams.size > 0;
+  const diagCountAtEntry = ctx2.analyzer.errors.length;
   const depth = ctx2.loopDepth;
   const propAccess = node.expression;
   const mapSource = propAccess.expression;
@@ -11978,12 +12097,39 @@ function transformMapCall(node, ctx2, isClientOnly = false, method2 = "map") {
           }
         }
       }
-      if (method2 === "flatMap" && children2.length === 0) {
+      if (method2 === "flatMap" && children2.length === 0 && !flatMapProjectionCall(body2)) {
         flatMapCallback = buildFlatMapCallback(callback, body2, ctx2);
       }
     } else {
       tryTransformRenderableBody(body2);
     }
+    if (method2 === "flatMap" && children2.length === 0 && !flatMapCallback) {
+      const projection = flatMapProjectionCall(body2);
+      if (projection) {
+        const transformed = transformJsxExpression(projection, ctx2, isClientOnly);
+        if (transformed && transformed.type === "loop") {
+          children2 = [transformed];
+        }
+      }
+    }
+    if (method2 === "flatMap" && children2.length === 0 && !flatMapCallback && !ts11.isBlock(body2)) {
+      flatMapCallback = buildFlatMapCallback(callback, body2, ctx2);
+    }
+    if (flatMapCallback) preamble = void 0;
+    if (flatMapCallback && !isClientOnly && !(ctx2.analyzer.acceptsCallbackBody?.("flatMap") ?? false)) {
+      ctx2.analyzer.errors.push(
+        createError(
+          ErrorCodes.UNSUPPORTED_JSX_PATTERN,
+          getSourceLocation(body2, ctx2.sourceFile, ctx2.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) ctx2.loopParams.delete(b.name);
     } else {
@@ -11993,6 +12139,22 @@ function transformMapCall(node, ctx2, isClientOnly = false, method2 = "map") {
     ctx2.loopDepth--;
   }
   if (children2.length === 0 && !flatMapCallback) {
+    const cb = node.arguments[0];
+    const cbBody = cb && (ts11.isArrowFunction(cb) || ts11.isFunctionExpression(cb)) ? cb.body : void 0;
+    if (cbBody && containsJsxInExpression(cbBody) && ctx2.analyzer.errors.length === diagCountAtEntry) {
+      ctx2.analyzer.errors.push(
+        createError(
+          ErrorCodes.UNSUPPORTED_JSX_PATTERN,
+          getSourceLocation(cbBody, ctx2.sourceFile, ctx2.filePath),
+          {
+            message: `A .${method2}() callback that builds JSX in this shape cannot be compiled \u2014 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]) && children2.length > 0) {
@@ -12049,6 +12211,7 @@ function transformMapCall(node, ctx2, isClientOnly = false, method2 = "map") {
   const hasCalls = exprHasFunctionCalls(arrayExpr);
   const isDirectPropArray = method2 !== "flatMap" && isArrayExprDirectPropRef(arrayExpr, ctx2);
   const isStaticArray = !isSignalOrMemoArray(array, ctx2) && !isDirectPropArray && !hasCalls && !objectIteration;
+  const preambleRegions = preamble && !isStaticArray ? collectPreambleRegions(children2, new Set(preamble.declaredNames), ctx2) : void 0;
   const nestedComponents = collectNestedComponents(children2).filter((c) => c.name !== childComponent?.name);
   return {
     type: "loop",
@@ -12086,6 +12249,7 @@ function transformMapCall(node, ctx2, isClientOnly = false, method2 = "map") {
     depth,
     clientOnly: isClientOnly || void 0,
     preamble,
+    preambleRegions: preambleRegions && preambleRegions.length > 0 ? preambleRegions : void 0,
     paramType,
     indexType,
     paramBindings,
@@ -12146,6 +12310,40 @@ function buildFlatMapCallback(callback, body2, ctx2) {
     );
     return void 0;
   }
+  for (const leafIr of leafIrs) {
+    if (leafIr.type !== "element") {
+      const loc = "loc" in leafIr && leafIr.loc ? leafIr.loc : getSourceLocation(body2, ctx2.sourceFile, ctx2.filePath);
+      ctx2.analyzer.errors.push(
+        createError(
+          ErrorCodes.UNSUPPORTED_JSX_PATTERN,
+          loc,
+          {
+            message: "A JSX leaf produced by a .flatMap() callback must be a single element \u2014 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 void 0;
+    }
+    if (flatMapLeafNeedsWiring(leafIr)) {
+      const loc = "loc" in leafIr && leafIr.loc ? leafIr.loc : getSourceLocation(body2, ctx2.sourceFile, ctx2.filePath);
+      ctx2.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 \u2014 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 \u2014 the descriptor path has no per-element wiring on any backend, so /* @client */ does not lift this."
+            }
+          }
+        )
+      );
+      return void 0;
+    }
+  }
   const pieces = reconstructAsSegments(body2, ctx2.sourceFile, ctx2.analyzer.typeExcludeRanges, leafSpans);
   const segments = pieces.map((piece) => {
     if ("marker" in piece) return { kind: "jsx", ir: leafIrs[piece.marker] };
@@ -12159,6 +12357,23 @@ function buildFlatMapCallback(callback, body2, ctx2) {
     rawBody: tsxSourceText(body2.getText(ctx2.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":
@@ -12202,6 +12417,39 @@ function flagArrayChildExpressions(nodes, declared) {
     }
   }
 }
+function collectPreambleRegions(nodes, declared, ctx2) {
+  const regions = [];
+  const visit3 = (list) => {
+    for (const node of list) {
+      switch (node.type) {
+        case "expression": {
+          const refs = extractFreeIdentifiersFromText(node.expr);
+          const usesPreambleLocal = [...refs].some((r2) => declared.has(r2));
+          if (usesPreambleLocal) {
+            if (!node.slotId) node.slotId = generateSlotId(ctx2);
+            node.preambleRegion = true;
+            node.reactive = true;
+            regions.push({
+              slotId: node.slotId,
+              expr: node.expr,
+              joinArrayChild: node.joinArrayChild || void 0
+            });
+          }
+          break;
+        }
+        case "element":
+        case "fragment":
+          visit3(node.children);
+          break;
+        case "conditional":
+          visit3([node.whenTrue, ...node.whenFalse ? [node.whenFalse] : []]);
+          break;
+      }
+    }
+  };
+  visit3(nodes);
+  return regions;
+}
 function collectBindingNames(name2, out) {
   if (ts11.isIdentifier(name2)) {
     out.add(name2.text);
@@ -13570,6 +13818,7 @@ function collectLoopChildReactiveTexts(node, ctx2, loopParam, loopParamBindings,
     ...stopAt("loop", "async", "ifStatement"),
     expression: ({ node: n, scope: insideConditional }) => {
       if (!n.slotId) return;
+      if (n.preambleRegion) return;
       const originFreeIds = freeIdsFromRefs(n.origin?.freeRefs);
       const expanded = expandConstantForReactivity(n.expr, ctx2, originFreeIds);
       const reactive = classifyReactivity(expanded.expr, ctx2, loopParam, loopParamBindings, expanded.freeIds).kind !== "none" || decideWrapFromAstFlags(n).wrap;
@@ -14078,7 +14327,11 @@ function collectElements(node, ctx2, siblingOffsets, insideConditional = false)
     },
     expression: ({ node: ex, scope: inCond }) => {
       if (ex.clientOnly && ex.slotId) {
-        ctx2.clientOnlyElements.push({ slotId: ex.slotId, expression: ex.expr });
+        ctx2.clientOnlyElements.push({
+          slotId: ex.slotId,
+          expression: ex.expr,
+          elidedPath: ex.markerless ? ex.elidedPath : void 0
+        });
         return;
       }
       if (!ex.slotId || inCond) return;
@@ -14102,10 +14355,13 @@ function collectElements(node, ctx2, 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] : void 0;
       const childHandlers = [];
-      const bindings = collectLoopChildBindings(l.children, ctx2, siblingOffsets, l.param, l.paramBindings);
-      for (const child of l.children) {
-        childHandlers.push(...collectEventHandlersFromIR(child));
+      const bindings = projectionInner ? emptyLoopChildBindings() : collectLoopChildBindings(l.children, ctx2, 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) {
@@ -14115,7 +14371,7 @@ function collectElements(node, ctx2, siblingOffsets, insideConditional = false)
           }
         }
       }
-      const { useElementReconciliation, innerLoops } = decideLoopRendering(l, siblingOffsets, ctx2);
+      const { useElementReconciliation, innerLoops } = projectionInner ? { useElementReconciliation: false, innerLoops: void 0 } : decideLoopRendering(l, siblingOffsets, ctx2);
       let template = "";
       let staticItemTemplate;
       let skeletonTemplate;
@@ -14133,7 +14389,7 @@ function collectElements(node, ctx2, siblingOffsets, insideConditional = false)
             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(ctx2), 0, loopParamSpec) : irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx2), 0, loopParamSpec);
         if (l.isStaticArray) {
@@ -14185,7 +14441,17 @@ function collectElements(node, ctx2, siblingOffsets, insideConditional = false)
           raw: l.sortComparator.raw
         } : void 0,
         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(ctx2)),
+          keyed: projectionInner.key !== null
+        } : l.flatMapCallback ? {
+          params: l.flatMapCallback.params,
+          body: renderFlatMapClientBody(l.flatMapCallback, buildRestSpreadNames(ctx2)),
+          keyed: flatMapCallbackHasKeyedLeaf(l.flatMapCallback)
+        } : void 0
       });
     },
     component: ({ node: c, descend, descendJsxChildren }) => {
@@ -14340,15 +14606,18 @@ function collectBranchLoops(node, ctx2, siblingOffsets) {
     loop: ({ node: n, scope: parentSlotId }) => {
       const containerSlot = parentSlotId ?? n.slotId;
       if (!containerSlot) return;
-      const { useElementReconciliation, innerLoops: innerLoopsCollected } = decideLoopRendering(n, siblingOffsets, void 0);
+      const projectionInner = n.method === "flatMap" && n.children.length === 1 && n.children[0].type === "loop" ? n.children[0] : void 0;
+      const { useElementReconciliation, innerLoops: innerLoopsCollected } = projectionInner ? { useElementReconciliation: false, innerLoops: void 0 } : decideLoopRendering(n, siblingOffsets, void 0);
       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, void 0, 0, branchLoopParamSpec)).join("");
       }
-      const branchBindings = ctx2 ? collectLoopChildBindings(n.children, ctx2, siblingOffsets, n.param, n.paramBindings) : emptyLoopChildBindings();
+      const branchBindings = ctx2 && !projectionInner ? collectLoopChildBindings(n.children, ctx2, siblingOffsets, n.param, n.paramBindings) : emptyLoopChildBindings();
       loops.push({
         kind: "branch",
         array: n.array,
@@ -14365,6 +14634,7 @@ function collectBranchLoops(node, ctx2, siblingOffsets) {
         template: childTemplate,
         containerSlotId: containerSlot,
         preamble: n.preamble,
+        preambleRegions: n.preambleRegions,
         nestedComponents: useElementReconciliation ? n.nestedComponents : void 0,
         bindings: branchBindings,
         innerLoops: useElementReconciliation ? innerLoopsCollected : void 0,
@@ -14378,7 +14648,16 @@ function collectBranchLoops(node, ctx2, siblingOffsets) {
           paramB: n.sortComparator.paramB,
           raw: n.sortComparator.raw
         } : void 0,
-        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)
+        } : void 0
       });
     }
   });
@@ -14774,6 +15053,12 @@ function buildReferencesGraph(ctx2, irRoot) {
       if (l.filterPredicate) addExprEdges(ROOT_SOURCE, l.filterPredicate.raw, "template-closure");
       if (l.sortComparator) 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);
       if (l.nestedComponents) {
@@ -15050,11 +15335,11 @@ var init_imports = __esm({
       "onMount",
       "hydrate",
       "insert",
-      "reconcileElements",
       "getLoopChildren",
       "getLoopNodes",
       "mapArray",
       "mapArrayAnchored",
+      "patchLeaf",
       "createDisposableEffect",
       "createComponent",
       "renderChild",
@@ -15062,7 +15347,6 @@ var init_imports = __esm({
       "registerTemplate",
       "initChild",
       "upsertChild",
-      "updateClientMarker",
       "createPortal",
       "provideContext",
       "createContext",
@@ -15074,6 +15358,7 @@ var init_imports = __esm({
       "styleToCss",
       "escapeAttr",
       "escapeText",
+      "escapeTextOrNode",
       "qsa",
       "qsaItem",
       "qsaChildScope",
@@ -15082,7 +15367,11 @@ var init_imports = __esm({
       "__slot",
       "__bfSlot",
       "__bfText",
-      "tAfter",
+      // Claim-plan interpreter (slot unification A2/A3, spec/slot-unification.md)
+      // — the "one claim mechanism" that replaced `patchSlotRange` and
+      // `updateClientMarker` (both deleted) as the content-slot update door.
+      "claimSlots",
+      "lazySlots",
       // Profile mode (#1690, SR3) — turn-boundary markers around event handlers.
       "beginTurn",
       "endTurn",
@@ -17006,6 +17295,14 @@ function destructureLoopParam(param, paramBindings) {
   }
   return { head: param, unwrap: "" };
 }
+function buildPreambleRegionPlans(regions, loopParam, loopParamBindings) {
+  if (!regions || regions.length === 0) return [];
+  return regions.map((r2) => {
+    const wrapped = wrapLoopParamAsAccessor(r2.expr, loopParam, loopParamBindings);
+    const valueExpr = r2.joinArrayChild ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')` : `escapeText(${wrapped})`;
+    return { slotId: r2.slotId, valueExpr };
+  });
+}
 function buildComponentPropsExpr2(comp, loopParam, loopParamBindings) {
   const wrap = loopParam ? (expr) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings) : (expr) => expr;
   const entries2 = comp.props.map((p) => {
@@ -18104,9 +18401,16 @@ function buildDynamicLoopDelegationPlan(elem, profileComponentName) {
       paramBindings: elem.paramBindings,
       key: elem.key,
       index: elem.index,
+      // No loopParams spec here (unlike the row-render context) — in the
+      // delegated handler `elem.param` is bound to the plain `.find()`/
+      // indexed result, not a signal accessor, so leaf refs must stay in
+      // their literal (`t.name`) form. Passing a loopParams spec here was
+      // BUG-3: it rewrote leaf refs to accessor-call form (`t().name`),
+      // which throws since `t` is a plain object in this scope.
       mapPreamble: elem.preamble ? renderPreamble(elem.preamble, {
-        renderLeaf: (ir) => irToHtmlTemplate(ir, void 0, 1, [{ param: elem.param, bindings: elem.paramBindings }], void 0, true)
-      }) : null
+        renderLeaf: (ir) => irToHtmlTemplate(ir, void 0, 1, void 0, void 0, true)
+      }) : null,
+      mapPreambleDeclaredNames: elem.preamble?.declaredNames ?? []
     })
   };
 }
@@ -18123,9 +18427,12 @@ function buildBranchLoopDelegationPlan(loop, cv, profileComponentName) {
       paramBindings: loop.paramBindings,
       key: loop.key,
       index: loop.index,
+      // See note in `buildDynamicLoopDelegationPlan` above (BUG-3): no
+      // loopParams spec — leaf refs must stay in plain-object form here.
       mapPreamble: loop.preamble ? renderPreamble(loop.preamble, {
-        renderLeaf: (ir) => irToHtmlTemplate(ir, void 0, 1, [{ param: loop.param, bindings: loop.paramBindings }], void 0, true)
-      }) : null
+        renderLeaf: (ir) => irToHtmlTemplate(ir, void 0, 1, void 0, void 0, true)
+      }) : null,
+      mapPreambleDeclaredNames: loop.preamble?.declaredNames ?? []
     })
   };
 }
@@ -18142,9 +18449,12 @@ function buildStaticArrayDelegationPlan(elem, profileComponentName) {
       // array too (#1434).
       arrayExpr: buildChainedArrayExpr(elem),
       param: elem.param,
+      // See note in `buildDynamicLoopDelegationPlan` above (BUG-3): no
+      // loopParams spec — leaf refs must stay in plain-object form here.
       mapPreamble: elem.preamble ? renderPreamble(elem.preamble, {
-        renderLeaf: (ir) => irToHtmlTemplate(ir, void 0, 1, [{ param: elem.param, bindings: elem.paramBindings }], void 0, true)
+        renderLeaf: (ir) => irToHtmlTemplate(ir, void 0, 1, void 0, void 0, true)
       }) : null,
+      mapPreambleDeclaredNames: elem.preamble?.declaredNames ?? [],
       offset: elem.offset ?? null,
       indexParam: elem.index ?? null
     }
@@ -18161,6 +18471,7 @@ function buildKeyedOrIndexLookup(args2) {
       paramBindings: args2.paramBindings,
       keyWithItem,
       mapPreamble: args2.mapPreamble,
+      mapPreambleDeclaredNames: args2.mapPreambleDeclaredNames,
       hasBindings,
       indexParam: args2.index
     };
@@ -18170,6 +18481,7 @@ function buildKeyedOrIndexLookup(args2) {
     arrayExpr: args2.array,
     param: args2.param,
     mapPreamble: args2.mapPreamble,
+    mapPreambleDeclaredNames: args2.mapPreambleDeclaredNames,
     hasBindings,
     indexParam: args2.index
   };
@@ -18198,14 +18510,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 : void 0,
+    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",
@@ -18226,6 +18540,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}` : void 0
   };
@@ -18312,6 +18627,25 @@ var init_build_insert = __esm({
   }
 });
 
+// ../jsx/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)}`;
+}
+var init_claim_plan = __esm({
+  "../jsx/src/ir-to-client-js/control-flow/stringify/claim-plan.ts"() {
+    "use strict";
+  }
+});
+
 // ../jsx/src/ir-to-client-js/emit-reactive.ts
 import ts14 from "typescript";
 function bindingIdArg(ctx2, slotId) {
@@ -18490,17 +18824,18 @@ function emitDynamicTextUpdates(lines, ctx2) {
     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);
@@ -18523,10 +18858,13 @@ function emitDynamicTextUpdates(lines, ctx2) {
 }
 function emitClientOnlyExpressions(lines, ctx2) {
   for (const elem of ctx2.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(ctx2, elem.slotId)})`);
+    lines.push(`    ${writer}('${elem.slotId}', ${elem.expression})`);
+    lines.push(`  }${bindingIdArg(ctx2, elem.slotId)}) }`);
     lines.push("");
   }
 }
@@ -18634,6 +18972,7 @@ var init_emit_reactive = __esm({
     "use strict";
     init_html_constants();
     init_utils();
+    init_claim_plan();
     init_html_template();
     init_date_lowering();
     init_to_locale_date_lowering();
@@ -18703,13 +19042,18 @@ function stringifyBranchInnerLoops(lines, plan, indent, pc) {
         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) {
@@ -18751,10 +19095,13 @@ 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())`);
 }
@@ -18767,19 +19114,45 @@ var init_loop_child_arm = __esm({
     init_template_parse();
     init_event_listener();
     init_component_scope();
+    init_claim_plan();
   }
 });
 
 // ../jsx/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 !== void 0 ? `__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) {
@@ -18791,21 +19164,79 @@ 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((r2) => ({ id: r2.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 !== void 0 ? `__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((r2) => ({ id: r2.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 !== void 0) {
-    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}    `;
@@ -18827,6 +19258,7 @@ var init_reactive_effects = __esm({
     init_utils();
     init_emit_reactive();
     init_loop_child_arm();
+    init_claim_plan();
   }
 });
 
@@ -18978,8 +19410,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;
@@ -18990,7 +19438,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);
@@ -19019,22 +19467,30 @@ function stringifyPlainLoop(lines, plan, topIndent = "  ") {
       ...reactiveEffects?.attrSlots.map((s) => s.slotId) ?? [],
       ...childRefs.map((r2) => r2.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 = /* @__PURE__ */ new Map();
+  if (hoistedTpl && plan.skeletonPaths) {
+    for (const text of reactiveEffects?.outerTexts ?? []) {
+      const path25 = plan.skeletonPaths.textMarkerPaths.get(text.slotId);
+      if (path25) textClaimPathExprs.set(text.slotId, `__existing ? [] : [${path25.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 });
@@ -19138,10 +19594,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(`      }`);
@@ -19159,6 +19618,7 @@ var init_loop = __esm({
     init_skeleton_paths();
     init_component_loop();
     init_composite_loop();
+    init_claim_plan();
   }
 });
 
@@ -19214,13 +19674,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) {
@@ -19282,6 +19747,7 @@ var init_inner_loop = __esm({
     init_emit_reactive();
     init_template_parse();
     init_loop();
+    init_claim_plan();
   }
 });
 
@@ -19370,6 +19836,11 @@ function indexBindingLine(handler, indexParam, indexExpr) {
   if (!extractFreeIdentifiersFromText(handler).has(indexParam)) 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((name2) => free.has(name2)) ? mapPreamble : null;
+}
 function stringifyEventDelegation(lines, plan) {
   const { containerVar, events, itemLookup, profileComponentName } = plan;
   const eventsByName = /* @__PURE__ */ new Map();
@@ -19414,7 +19885,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('[${BF_KEY}]')`);
@@ -19424,15 +19896,17 @@ 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}`);
-      if (idxLine2) ls.push(`        if (${param}) { ${idxLine2}; ${handlerCall} }`);
-      else ls.push(`        if (${param}) ${handlerCall}`);
+      ls.push(`        if (${param}) {`);
+      if (preambleLine) ls.push(`          ${preambleLine}`);
+      if (idxLine2) ls.push(`          ${idxLine2}`);
+      ls.push(`          ;${handlerCall}`);
+      ls.push(`        }`);
     }
     ls.push(`      }`);
     return;
@@ -19459,13 +19933,16 @@ 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)`);
-  if (idxLine) ls.push(`      if (${allParams.join(" && ")}) { ${idxLine}; ${handlerCall} }`);
-  else ls.push(`      if (${allParams.join(" && ")}) ${handlerCall}`);
+  ls.push(`      if (${allParams.join(" && ")}) {`);
+  if (preambleLine) ls.push(`        ${preambleLine}`);
+  if (idxLine) 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) {`);
@@ -19474,20 +19951,23 @@ 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}`);
-    if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`);
-    else ls.push(`        if (${param}) ${handlerCall}`);
+    ls.push(`        if (${param}) {`);
+    if (preambleLine) ls.push(`          ${preambleLine}`);
+    if (idxLine) ls.push(`          ${idxLine}`);
+    ls.push(`          ;${handlerCall}`);
+    ls.push(`        }`);
   }
   ls.push(`      }`);
 }
 function emitStaticIndexLookup(ls, ev, handlerCall, lookup, containerVar) {
-  const { arrayExpr, param, mapPreamble, offset: offset2, indexParam } = lookup;
+  const { arrayExpr, param, mapPreamble, mapPreambleDeclaredNames, offset: offset2, 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`);
@@ -19495,9 +19975,11 @@ function emitStaticIndexLookup(ls, ev, handlerCall, lookup, containerVar) {
   const idxOffset = buildLoopChildIndexSubtraction(offset2 ?? void 0);
   ls.push(`        const __idx = Array.from(${containerVar}.children).indexOf(__el)${idxOffset}`);
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`);
-  if (mapPreamble) ls.push(`        ${mapPreamble}`);
-  if (idxLine) ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`);
-  else ls.push(`        if (${param}) ${handlerCall}`);
+  ls.push(`        if (${param}) {`);
+  if (preambleLine) ls.push(`          ${preambleLine}`);
+  if (idxLine) ls.push(`          ${idxLine}`);
+  ls.push(`          ;${handlerCall}`);
+  ls.push(`        }`);
   ls.push(`      }`);
 }
 var NON_BUBBLING_EVENTS;
@@ -19548,12 +20030,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})`);
@@ -19574,8 +20073,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`);
@@ -19668,13 +20173,13 @@ function emitArmBody(lines, body2, mode2, indent, profileComponentName) {
     }
     lines.push(`${indent}} }`);
   }
-  for (const te of body2.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 (body2.textEffects.length > 0) {
+    const slots = body2.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 body2.textEffects) {
+      lines.push(`${indent}__disposers.push(createDisposableEffect(() => { ${writer}('${te.slotId}', escapeTextOrNode(${te.expression})) }${bindingBfId(te.slotId)}))`);
+    }
   }
   if (body2.loops.length > 0) {
     stringifyBranchLoops(lines, body2.loops);
@@ -19707,6 +20212,7 @@ var init_insert = __esm({
     init_branch_loop();
     init_event_listener();
     init_component_scope();
+    init_claim_plan();
   }
 });
 
@@ -19795,6 +20301,31 @@ 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}` : void 0,
+      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,
+      // flatMap loops carry no `MapCallbackPreamble` (jsx-to-ir.ts drops it
+      // for flatMapCallback), so there is nothing to patch here.
+      preambleRegions: []
+    };
+  }
   return {
     kind: "plain",
     rowConstruction: "string-template",
@@ -19818,6 +20349,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,
     // Fall back to the iteration index when the loop has no key. A whole-item
@@ -19944,7 +20476,6 @@ var init_control_flow = __esm({
 // ../jsx/src/ir-to-client-js/element-refs.ts
 function generateElementRefs(ctx2) {
   const regularSlots = /* @__PURE__ */ new Set();
-  const textSlots = /* @__PURE__ */ new Set();
   const componentSlots = /* @__PURE__ */ new Set();
   const conditionalSlotIds = collectConditionalSlotIds(ctx2);
   for (const elem of ctx2.interactiveElements) {
@@ -19952,11 +20483,6 @@ function generateElementRefs(ctx2) {
       regularSlots.add(elem.slotId);
     }
   }
-  for (const elem of ctx2.dynamicElements) {
-    if (!elem.insideConditional) {
-      textSlots.add(elem.slotId);
-    }
-  }
   for (const elem of ctx2.conditionalElements) {
     regularSlots.add(elem.slotId);
   }
@@ -19985,10 +20511,9 @@ function generateElementRefs(ctx2) {
   for (const slotId of componentSlots) {
     regularSlots.delete(slotId);
   }
-  if (regularSlots.size === 0 && textSlots.size === 0 && componentSlots.size === 0) return "";
+  if (regularSlots.size === 0 && componentSlots.size === 0) return "";
   const refLines = [];
   emitSlotRefs(refLines, [...regularSlots], "$");
-  emitSlotRefs(refLines, [...textSlots], "$t");
   emitSlotRefs(refLines, [...componentSlots], "$c");
   return refLines.join("\n");
 }
@@ -20638,6 +21163,107 @@ var init_ir_to_client_js = __esm({
   }
 });
 
+// ../jsx/src/ir-to-client-js/client-only-elision.ts
+function decideClientOnlyElision(root2) {
+  walkNode(root2, [], /* @__PURE__ */ new Set(), { bailed: false });
+}
+function walkNode(node, path25, forceCloseAncestors, state2) {
+  if (state2.bailed) return;
+  if (node.type === "element") {
+    if (!elementIsPathSafe(node.tag, flattenSkeletonChildren(node.children))) {
+      state2.bailed = true;
+      return;
+    }
+    const groupIdx = skeletonForceCloseGroup(node.tag);
+    if (groupIdx >= 0 && forceCloseAncestors.has(groupIdx)) {
+      state2.bailed = true;
+      return;
+    }
+    const nextAncestors = groupIdx >= 0 ? /* @__PURE__ */ new Set([...forceCloseAncestors, groupIdx]) : forceCloseAncestors;
+    walkChildren(flattenSkeletonChildren(node.children), path25, nextAncestors, state2);
+  } else if (node.type === "fragment") {
+    walkChildren(flattenSkeletonChildren(node.children), path25, forceCloseAncestors, state2);
+  }
+}
+function walkChildren(children2, parentPath, forceCloseAncestors, state2) {
+  let frozen = false;
+  let idx = 0;
+  let pendingText = false;
+  for (let i = 0; i < children2.length; i++) {
+    if (state2.bailed) return;
+    const child = children2[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(children2[i - 1]) || isTextLike(children2[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))) {
+          state2.bailed = true;
+          return;
+        }
+        if (!frozen) {
+          walkNode(child, [...parentPath, idx], forceCloseAncestors, state2);
+        }
+        idx += 1;
+        pendingText = false;
+        continue;
+      }
+      case "fragment":
+        continue;
+      // already flattened
+      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, path25) {
+  expr.markerless = true;
+  expr.elidedPath = path25;
+}
+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;
+}
+var init_client_only_elision = __esm({
+  "../jsx/src/ir-to-client-js/client-only-elision.ts"() {
+    "use strict";
+    init_html_template();
+  }
+});
+
 // ../jsx/src/css-layer-prefixer.ts
 function prefixClass(cls, layerName) {
   if (!cls || cls.startsWith("layer-")) return cls;
@@ -21812,7 +22438,7 @@ function checkRichTypeMethodCalls(root2, metadata, errors) {
   if (!metadata.propsType) return;
   const matchers = prepareLoweringMatchers(metadata);
   const seen = /* @__PURE__ */ new Set();
-  walkNode(root2, metadata, EMPTY_BINDINGS2, matchers, errors, seen);
+  walkNode2(root2, metadata, EMPTY_BINDINGS2, matchers, errors, seen);
 }
 function isLoweringClaimed(matchers, callee, args2) {
   return matchers.some((m) => m(callee, args2) !== null);
@@ -21940,7 +22566,7 @@ function walkAttrValue(value2, clientOnly, loc, meta, bindings, matchers, errors
     walkTemplateParts(value2.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);
   } else if (node.type === "conditional") {
@@ -21960,11 +22586,11 @@ function walkNode(node, meta, bindings, matchers, errors, seen) {
     case "component":
     case "fragment":
     case "provider":
-      for (const child of node.children) walkNode(child, meta, bindings, matchers, errors, seen);
+      for (const child of node.children) walkNode2(child, meta, bindings, matchers, errors, seen);
       break;
     case "async":
-      walkNode(node.fallback, meta, bindings, matchers, errors, seen);
-      for (const child of node.children) walkNode(child, meta, bindings, matchers, errors, seen);
+      walkNode2(node.fallback, meta, bindings, matchers, errors, seen);
+      for (const child of node.children) walkNode2(child, meta, bindings, matchers, errors, seen);
       break;
     case "loop": {
       if (node.clientOnly) break;
@@ -21973,29 +22599,29 @@ function walkNode(node, meta, bindings, matchers, errors, seen) {
       const arrayType = node.arrayParsed ? resolveReceiverType(node.arrayParsed, meta, bindings) : null;
       loopBindings.set(node.param, arrayType?.kind === "array" ? arrayType.elementType ?? null : null);
       if (node.index) loopBindings.set(node.index, null);
-      for (const child of node.children) walkNode(child, meta, loopBindings, matchers, errors, seen);
+      for (const child of node.children) walkNode2(child, meta, loopBindings, matchers, errors, seen);
       if (node.childComponent) {
-        for (const child of node.childComponent.children) walkNode(child, meta, loopBindings, matchers, errors, seen);
+        for (const child of node.childComponent.children) 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);
+        for (const child of nested.children) 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);
+        if (seg.kind === "jsx") 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);
+        if (seg.kind === "jsx") 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);
-      if (node.alternate) walkNode(node.alternate, meta, bindings, matchers, errors, seen);
+      walkNode2(node.consequent, meta, bindings, matchers, errors, seen);
+      if (node.alternate) walkNode2(node.alternate, meta, bindings, matchers, errors, seen);
       break;
   }
 }
@@ -22068,6 +22694,7 @@ function compileMultipleComponents(source, filePath, componentNames, options2) {
     };
     componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR);
     checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors);
+    decideClientOnlyElision(componentIR.root);
     if (options2.cssLayerPrefix) {
       applyCssLayerPrefix(componentIR, options2.cssLayerPrefix);
     }
@@ -22405,6 +23032,7 @@ function compileJSX(source, filePath, options2) {
   };
   componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR);
   checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors);
+  decideClientOnlyElision(componentIR.root);
   if (ctx2.importedClientSignalNames.size > 0) {
     const sources = /* @__PURE__ */ new Set();
     for (const imp of ctx2.imports) {
@@ -22526,6 +23154,7 @@ var init_compiler = __esm({
     init_jsx_to_ir();
     init_builtins();
     init_ir_to_client_js();
+    init_client_only_elision();
     init_emit_module_level();
     init_imports();
     init_component_scope();
@@ -26471,6 +27100,7 @@ __export(src_exports, {
   createProgramForFile: () => createProgramForFile,
   dangerousInnerHtmlDiagnostic: () => dangerousInnerHtmlDiagnostic,
   dangerousInnerHtmlMetacharViolation: () => dangerousInnerHtmlMetacharViolation,
+  decideClientOnlyElision: () => decideClientOnlyElision,
   describeFallback: () => describeFallback,
   diffProfiles: () => diffProfiles,
   diffStaticBudget: () => diffStaticBudget,
@@ -26585,6 +27215,7 @@ var init_src2 = __esm({
     init_analyzer();
     init_shared_program();
     init_jsx_to_ir();
+    init_client_only_elision();
     init_module_exports();
     init_interface();
     init_test_adapter();