@barefootjs/jsx 0.27.0 → 0.28.0

package/dist/index.js

@@ -11237,7 +11237,8 @@ function transformConditionalBranch(node, ctx) {
   const callsReactive = exprCallsReactiveGetters(node, ctx);
   const hasCalls = exprHasFunctionCalls(node);
   const reactive = isReactiveExpression(exprText, ctx, node) || isReactiveOrigin(branchOrigin);
-  const needsSlot = reactive || callsReactive;
+  const refsLoopParam = branchOrigin.freeRefs?.some((r) => r.kind === "render-item") ?? false;
+  const needsSlot = reactive || callsReactive || refsLoopParam;
   const slotId = needsSlot ? generateSlotId(ctx) : null;
   return {
     type: "expression",
@@ -14832,7 +14833,7 @@ function summarizeLoopChildBranch(node, ctx, siblingOffsets, loopParam, loopPara
     conditionals: collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loopParamBindings),
     events: collectConditionalBranchEvents(node),
     reactiveAttrs: collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings, true),
-    reactiveTexts: node.type === "expression" ? [] : collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, true)
+    reactiveTexts: node.type === "expression" && node.hasFunctionCalls ? [] : collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, true)
   };
 }
 
@@ -15291,6 +15292,7 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "getLoopNodes",
   "mapArray",
   "mapArrayAnchored",
+  "mapArrayLazy",
   "patchLeaf",
   "createDisposableEffect",
   "createComponent",
@@ -15321,6 +15323,8 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "__bfText",
   "claimSlots",
   "lazySlots",
+  "lazyClaimSlots",
+  "textOrNode",
   "beginTurn",
   "endTurn",
   "date",
@@ -18389,8 +18393,352 @@ function buildKeyedOrIndexLookup(args) {
   };
 }
 
+// src/ir-to-client-js/control-flow/plan/lazy-row-eligibility.ts
+var PURE_SOURCE_GLOBALS = new Set([
+  "Object",
+  "Array",
+  "JSON",
+  "Number",
+  "String",
+  "Boolean"
+]);
+var INERT_BINDING_GLOBALS = new Set([
+  "Object",
+  "Array",
+  "JSON",
+  "Number",
+  "String",
+  "Boolean",
+  "Math",
+  "Date",
+  "Intl",
+  "Symbol",
+  "Map",
+  "Set",
+  "WeakMap",
+  "WeakSet",
+  "Promise",
+  "RegExp",
+  "Error",
+  "BigInt",
+  "console",
+  "undefined",
+  "NaN",
+  "Infinity",
+  "globalThis",
+  "parseInt",
+  "parseFloat",
+  "isNaN",
+  "isFinite",
+  "encodeURIComponent",
+  "decodeURIComponent",
+  "encodeURI",
+  "decodeURI"
+]);
+var UNKNOWN_IDENTIFIERS = "<unknown>";
+var NO = (reason) => ({ eligible: false, reason });
+function lazyRowEligibility(args) {
+  const { shape, bindings, arraySourceIdentifiers, scope } = args;
+  if (scope.profile)
+    return NO("profile mode keeps the granular eager emission");
+  if (shape.callSite !== "plain" && shape.callSite !== "branch-plain") {
+    return NO(`call site '${shape.callSite}' is not a plain loop row`);
+  }
+  if (shape.flatMapLeafItem)
+    return NO("flatMap descriptor loop (build-or-patch renderItem)");
+  if (shape.anchored)
+    return NO("anchored whole-item-conditional loop");
+  if (shape.bodyIsMultiRoot)
+    return NO("multi-root (Fragment) row");
+  if (!shape.hasExplicitKey)
+    return NO("index-keyed loop (no explicit key)");
+  if (shape.conditionalCount > 0)
+    return NO("row contains a reactive conditional");
+  if (shape.childRefCount > 0)
+    return NO("row has imperative child refs");
+  if (shape.hasChildComponent)
+    return NO("row body is a child component");
+  if (shape.nestedComponentCount > 0)
+    return NO("row contains nested child components");
+  if (shape.innerLoopCount > 0)
+    return NO("row contains an inner loop");
+  if (shape.hasMapPreamble)
+    return NO("row has a map-callback preamble (may declare row-local reactivity)");
+  if (shape.preambleRegionCount > 0)
+    return NO("row has preamble-patched regions");
+  if (shape.hasParamUnwrap)
+    return NO("destructured loop param without param bindings");
+  for (const b of bindings) {
+    if (b.referencesIndex) {
+      return NO(`binding on slot ${b.slotId} references the loop index parameter`);
+    }
+    if (b.opaqueOuterNames.includes(UNKNOWN_IDENTIFIERS)) {
+      return NO(`binding on slot ${b.slotId} has no analyzable identifier set`);
+    }
+  }
+  if (!arraySourceIdentifiers)
+    return NO("loop source free identifiers unavailable");
+  const sourceGate = checkSourceConsistency(arraySourceIdentifiers, scope);
+  if (sourceGate)
+    return NO(`loop source is not provably hydration-consistent: ${sourceGate}`);
+  return { eligible: true };
+}
+function checkSourceConsistency(names, scope) {
+  const seen = new Set;
+  const resolve2 = (name) => {
+    if (seen.has(name))
+      return null;
+    seen.add(name);
+    if (scope.props.has(name))
+      return null;
+    if (PURE_SOURCE_GLOBALS.has(name))
+      return null;
+    const constFree = scope.constants.get(name);
+    if (constFree !== undefined) {
+      if (constFree === null)
+        return `constant '${name}' has no analyzable value`;
+      for (const inner of constFree) {
+        const failure = resolve2(inner);
+        if (failure)
+          return failure;
+      }
+      return null;
+    }
+    const signal = scope.signals.get(name);
+    if (signal !== undefined) {
+      if (signal.initializerFreeIdentifiers === null) {
+        return `signal '${name}' has no structured initializer to prove props/literal derivation`;
+      }
+      for (const inner of signal.initializerFreeIdentifiers) {
+        const failure = resolve2(inner);
+        if (failure)
+          return failure;
+      }
+      return null;
+    }
+    if (scope.memos.has(name))
+      return `memo '${name}' initializer is not analyzed by the v1 gate`;
+    if (scope.inert.has(name))
+      return `'${name}' is an import or local function`;
+    return `'${name}' does not resolve to a prop, literal-derived const, or props/literal-derived signal`;
+  };
+  for (const name of names) {
+    const failure = resolve2(name);
+    if (failure)
+      return failure;
+  }
+  return null;
+}
+function classifyLazyBinding(args) {
+  const { kind, slotId, free, rowLocalNames, indexParam, scope } = args;
+  if (free === null) {
+    return {
+      kind,
+      slotId,
+      readsItem: true,
+      readsOuter: true,
+      reactiveOuterNames: [],
+      opaqueOuterNames: [UNKNOWN_IDENTIFIERS],
+      referencesIndex: false
+    };
+  }
+  let readsItem = false;
+  let referencesIndex = false;
+  const reactiveOuterNames = [];
+  const opaqueOuterNames = [];
+  for (const name of free) {
+    if (rowLocalNames.has(name)) {
+      readsItem = true;
+      continue;
+    }
+    if (name === indexParam) {
+      referencesIndex = true;
+      continue;
+    }
+    if (INERT_BINDING_GLOBALS.has(name))
+      continue;
+    if (scope.signals.has(name) || scope.memos.has(name)) {
+      if (!reactiveOuterNames.includes(name))
+        reactiveOuterNames.push(name);
+      continue;
+    }
+    const constFree = scope.constants.get(name);
+    if (constFree !== undefined && constFree !== null && constFree.size === 0)
+      continue;
+    opaqueOuterNames.push(name);
+  }
+  return {
+    kind,
+    slotId,
+    readsItem,
+    readsOuter: reactiveOuterNames.length > 0 || opaqueOuterNames.length > 0,
+    reactiveOuterNames,
+    opaqueOuterNames,
+    referencesIndex
+  };
+}
+
+// src/ir-to-client-js/control-flow/plan/build-lazy-row.ts
+function buildLazyRowPlan(args) {
+  return decideLazyRow(args).plan;
+}
+function decideLazyRow(args) {
+  const { loop, scope } = args;
+  if (!scope) {
+    return { plan: null, decision: { eligible: false, reason: "no component scope info supplied" } };
+  }
+  const wrap = (expr) => wrapLoopParamAsAccessor(expr, loop.param, loop.paramBindings);
+  const rowLocalNames = new Set([loop.param]);
+  for (const b of loop.paramBindings ?? [])
+    rowLocalNames.add(b.name);
+  const classified = [];
+  const attrClass = new Map;
+  loop.bindings.reactiveAttrs.forEach((attr, i) => {
+    const c = classifyLazyBinding({
+      kind: "attr",
+      slotId: attr.childSlotId,
+      free: attrFreeIdentifiers2(attr.expression),
+      rowLocalNames,
+      indexParam: args.indexParam,
+      scope
+    });
+    attrClass.set(i, c);
+    classified.push(c);
+  });
+  const textClass = new Map;
+  loop.bindings.reactiveTexts.forEach((text, i) => {
+    const c = classifyLazyBinding({
+      kind: "text",
+      slotId: text.slotId,
+      free: text.freeIdentifiers ?? null,
+      rowLocalNames,
+      indexParam: args.indexParam,
+      scope
+    });
+    textClass.set(i, c);
+    classified.push(c);
+  });
+  const shape = {
+    callSite: args.callSite,
+    flatMapLeafItem: args.flatMapLeafItem,
+    anchored: args.anchored,
+    bodyIsMultiRoot: loop.bodyIsMultiRoot ?? false,
+    hasExplicitKey: loop.key != null,
+    conditionalCount: loop.bindings.conditionals?.length ?? 0,
+    childRefCount: loop.bindings.refs?.length ?? 0,
+    nestedComponentCount: loop.nestedComponents?.length ?? 0,
+    innerLoopCount: loop.innerLoops?.length ?? 0,
+    hasChildComponent: "childComponent" in loop && loop.childComponent != null,
+    hasMapPreamble: args.mapPreambleWrapped.length > 0,
+    preambleRegionCount: args.preambleRegionCount,
+    hasParamUnwrap: args.paramUnwrap.length > 0
+  };
+  const decision = lazyRowEligibility({
+    shape,
+    bindings: classified,
+    arraySourceIdentifiers: loopSourceIdentifiers(loop, args.arrayExpr),
+    scope
+  });
+  if (!decision.eligible)
+    return { plan: null, decision };
+  const attrSlotIds = [];
+  for (const attr of loop.bindings.reactiveAttrs) {
+    if (!attrSlotIds.includes(attr.childSlotId))
+      attrSlotIds.push(attr.childSlotId);
+  }
+  let ordinal = 0;
+  const attrs = loop.bindings.reactiveAttrs.map((attr, i) => {
+    const c = attrClass.get(i);
+    return {
+      slotId: attr.childSlotId,
+      attrName: attr.attrName,
+      wrappedExpression: wrap(attr.expression),
+      meta: pickAttrMeta(attr),
+      refIndex: attrSlotIds.indexOf(attr.childSlotId),
+      ordinal: ordinal++,
+      readsItem: c.readsItem,
+      readsOuter: c.readsOuter
+    };
+  });
+  const texts = loop.bindings.reactiveTexts.map((text, i) => {
+    const c = textClass.get(i);
+    return {
+      slotId: text.slotId,
+      wrappedExpression: wrap(text.expression),
+      ordinal: ordinal++,
+      readsItem: c.readsItem || !c.readsOuter,
+      readsOuter: c.readsOuter
+    };
+  });
+  const outerPrimeGetters = [];
+  for (const c of classified) {
+    for (const name of c.reactiveOuterNames) {
+      if (!outerPrimeGetters.includes(name))
+        outerPrimeGetters.push(name);
+    }
+  }
+  return {
+    plan: {
+      attrSlotIds,
+      attrs,
+      texts,
+      writerIndex: texts.length > 0 ? attrSlotIds.length : -1,
+      textNeedsRead: texts.some((t) => t.readsOuter),
+      lastCount: ordinal,
+      outerPrimeGetters,
+      hasOuter: attrs.some((a) => a.readsOuter) || texts.some((t) => t.readsOuter)
+    },
+    decision
+  };
+}
+function buildLazyRowScopeInfo(ctx) {
+  const signals = new Map;
+  for (const s of ctx.signals) {
+    signals.set(s.getter, {
+      initializerFreeIdentifiers: s.parsed ? freeIdentifiers(s.parsed) : null
+    });
+  }
+  const memos = new Set(ctx.memos.map((m) => m.name));
+  const props = new Set([PROPS_PARAM]);
+  if (ctx.propsObjectName)
+    props.add(ctx.propsObjectName);
+  for (const p of ctx.propsParams)
+    props.add(p.name);
+  const constants = new Map;
+  for (const c of ctx.localConstants) {
+    constants.set(c.name, c.freeIdentifiers ?? null);
+  }
+  const inert = new Set;
+  for (const f of ctx.localFunctions)
+    inert.add(f.name);
+  for (const imp of ctx.imports) {
+    if (imp.isTypeOnly)
+      continue;
+    for (const spec of imp.specifiers)
+      inert.add(spec.alias || spec.name);
+  }
+  return { signals, memos, props, constants, inert, profile: ctx.profile };
+}
+function attrFreeIdentifiers2(expression) {
+  if (!expression || expression.trim().length === 0)
+    return new Set;
+  try {
+    return freeIdentifiers(parseExpression(expression));
+  } catch {
+    return null;
+  }
+}
+function loopSourceIdentifiers(loop, arrayExpr) {
+  if (!loop.arrayFreeIdentifiers)
+    return null;
+  const names = new Set(loop.arrayFreeIdentifiers);
+  for (const name of extractFreeIdentifiersFromText(arrayExpr))
+    names.add(name);
+  return names;
+}
+
 // src/ir-to-client-js/control-flow/plan/build-branch-loop.ts
-function buildBranchLoopPlan(loop, profileComponentName) {
+function buildBranchLoopPlan(loop, profileComponentName, lazyScope) {
   const containerSlotId = loop.containerSlotId;
   const cv = varSlotId(containerSlotId);
   const containerVar = `__loop_${cv}`;
@@ -18406,6 +18754,13 @@ 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 arrayExpr = fm ? `(${buildChainedArrayExpr(loop)}).flatMap(${fm.params} => ${fm.body})` : buildChainedArrayExpr(loop);
+  const indexParam = loop.index || "__idx";
+  const mapPreambleWrapped = loop.preamble ? renderPreamble(loop.preamble, {
+    transformJs: (t) => wrapLoopParamAsAccessor(t, loop.param, loop.paramBindings),
+    renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined, true)
+  }) : "";
+  const preambleRegions = buildPreambleRegionPlans(loop.preambleRegions, loop.param, loop.paramBindings);
   const plan = {
     kind: "plain",
     rowConstruction: "string-template",
@@ -18413,15 +18768,24 @@ function buildBranchLoopPlan(loop, profileComponentName) {
     containerVar,
     markerId: loop.markerId,
     flatMapLeafItem: fm ? true : undefined,
-    arrayExpr: fm ? `(${buildChainedArrayExpr(loop)}).flatMap(${fm.params} => ${fm.body})` : buildChainedArrayExpr(loop),
+    arrayExpr,
     keyFn: fm ? fm.keyed ? "(__bfD, __bfI) => String(__bfD.k ?? __bfI)" : "null" : loopKeyFn(loop),
     paramHead,
     paramUnwrap,
-    indexParam: loop.index || "__idx",
-    mapPreambleWrapped: loop.preamble ? renderPreamble(loop.preamble, {
-      transformJs: (t) => wrapLoopParamAsAccessor(t, loop.param, loop.paramBindings),
-      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: loop.param, bindings: loop.paramBindings }], undefined, true)
-    }) : "",
+    indexParam,
+    mapPreambleWrapped,
+    lazyRow: buildLazyRowPlan({
+      loop,
+      arrayExpr,
+      indexParam,
+      paramUnwrap,
+      mapPreambleWrapped,
+      preambleRegionCount: preambleRegions.length,
+      callSite: "branch-plain",
+      flatMapLeafItem: Boolean(fm),
+      anchored: false,
+      scope: lazyScope
+    }) ?? undefined,
     template: loop.template,
     reactiveEffects: hasReactiveEffects ? buildReactiveEffectsPlan({
       attrs: loop.bindings.reactiveAttrs,
@@ -18433,7 +18797,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),
+    preambleRegions,
     bodyIsMultiRoot: loop.bodyIsMultiRoot ?? false,
     profileLoopId: profileComponentName ? `${profileComponentName}#binding:${containerSlotId}` : undefined
   };
@@ -18484,8 +18848,8 @@ function buildArmBody(branch, options) {
       slotId: t.slotId,
       expression: t.expression
     })),
-    loops: branch.loops.map((l) => buildBranchLoopPlan(l, pc)),
-    conditionals: branch.conditionals.map((c) => buildInsertPlan(c, { scope: { kind: "branchScope" }, eventNameMode: options.eventNameMode, profileComponentName: pc }))
+    loops: branch.loops.map((l) => buildBranchLoopPlan(l, pc, options.lazyScope)),
+    conditionals: branch.conditionals.map((c) => buildInsertPlan(c, { scope: { kind: "branchScope" }, eventNameMode: options.eventNameMode, profileComponentName: pc, lazyScope: options.lazyScope }))
   };
 }
 
@@ -18862,7 +19226,7 @@ function stringifyBranchEventBindings(lines, plan, indent) {
 }
 function stringifyBranchChildComponentInits(lines, plan, indent) {
   for (const init of plan) {
-    lines.push(`${indent}{ let __c = qsa(__branchScope, ${init.selector}); if (!__c) { const __ph = __branchScope.querySelector('[${DATA_BF_PH}="${init.placeholderId}"]'); if (__ph) { __c = createComponent('${nameForRegistryRef(init.name)}', ${init.propsExpr}); __ph.replaceWith(__c) } } if (__c) initChild('${nameForRegistryRef(init.name)}', __c, ${init.propsExpr}) }`);
+    lines.push(`${indent}{ let __c = qsa(__branchScope, ${init.selector}); if (!__c) { const __ph = __branchScope.querySelector('[${DATA_BF_PH}="${init.placeholderId}"]'); if (__ph) { __c = createComponent('${nameForRegistryRef(init.name)}', ${init.propsExpr}, undefined, undefined, __ph) } } if (__c) initChild('${nameForRegistryRef(init.name)}', __c, ${init.propsExpr}) }`);
   }
 }
 function stringifyBranchInnerLoops(lines, plan, indent, pc) {
@@ -19171,6 +19535,184 @@ function emitNestedInit(lines, indent, parentVar, nc) {
   }
 }
 
+// src/ir-to-client-js/control-flow/stringify/lazy-row.ts
+function stringifyLazyRowLoop(lines, o) {
+  const { indent, lazyRow, paramHead } = o;
+  const mid = o.markerId.replace(/[^A-Za-z0-9_$]/g, "_");
+  const tplVar = `__tpl_${mid}`;
+  const claimVar = `__lzc_${mid}`;
+  const hasRefs = lazyRow.attrSlotIds.length > 0 || lazyRow.texts.length > 0;
+  const hasBindings = lazyRow.attrs.length > 0 || lazyRow.texts.length > 0;
+  const rwDoor = lazyRow.textNeedsRead;
+  const paths = o.skeletonPaths;
+  const useHoisted = Boolean(o.skeletonTemplate);
+  if (useHoisted)
+    emitHoistedTemplateDecl(lines, indent, tplVar, o.skeletonTemplate);
+  const textPathVar = useHoisted && paths && lazyRow.texts.length > 0 ? `__lzp_${mid}` : null;
+  if (textPathVar) {
+    const arrays = lazyRow.texts.map((t) => `[${(paths.textMarkerPaths.get(t.slotId) ?? []).join(", ")}]`);
+    lines.push(`${indent}const ${textPathVar} = [${arrays.join(", ")}]`);
+  }
+  let adoptedPlanVar = null;
+  let freshPlanVar = null;
+  if (lazyRow.texts.length > 0) {
+    adoptedPlanVar = `__lzs_${mid}`;
+    const adoptedSlots = lazyRow.texts.map((t) => ({ id: t.slotId, kind: "text", path: [] }));
+    lines.push(`${indent}const ${adoptedPlanVar} = ${claimPlanLiteral(adoptedSlots)}`);
+    if (textPathVar) {
+      freshPlanVar = `__lzsc_${mid}`;
+      const freshSlots = lazyRow.texts.map((t, i) => ({
+        id: t.slotId,
+        kind: "text",
+        path: [],
+        pathExpr: `${textPathVar}[${i}]`
+      }));
+      lines.push(`${indent}const ${freshPlanVar} = ${claimPlanLiteral(freshSlots)}`);
+    } else {
+      freshPlanVar = adoptedPlanVar;
+    }
+  }
+  if (hasRefs) {
+    const parts = refParts(lazyRow, "__el", null, adoptedPlanVar, true);
+    lines.push(`${indent}const ${claimVar} = (__e) => {`);
+    if (parts.some((p) => p.includes("__el")))
+      lines.push(`${indent}  const __el = __e.primaryEl`);
+    lines.push(`${indent}  return [${parts.join(", ")}]`);
+    lines.push(`${indent}}`);
+  }
+  const call = `mapArrayLazy(() => ${o.arrayExpr}, ${o.containerVar}, ${o.keyFn}, {`;
+  lines.push(`${indent}${o.guardContainer ? `if (${o.containerVar}) ` : ""}${call}`);
+  const b1 = `${indent}  `;
+  const b2 = `${indent}    `;
+  lines.push(`${b1}createRow: (__e, ${o.indexParam}) => {`);
+  lines.push(`${b2}const ${paramHead} = () => __e.item`);
+  const cloneExpr = useHoisted ? hoistedCloneExpr(tplVar, o.skeletonTemplate) : `(() => { ${emitTemplateCloneInline(o.template)} })()`;
+  lines.push(`${b2}const __el = ${cloneExpr}`);
+  if (hasRefs) {
+    lines.push(`${b2}const __r = __e.refs = [${refParts(lazyRow, "__el", useHoisted ? paths ?? null : null, freshPlanVar).join(", ")}]`);
+  }
+  if (hasBindings) {
+    lines.push(`${b2}const __l = __e.last = []`);
+    for (const a of lazyRow.attrs)
+      emitAttrBinding(lines, b2, a, "create");
+    const createDoor = `__r[${lazyRow.writerIndex}]`;
+    for (const t of lazyRow.texts)
+      emitTextBinding(lines, b2, t, createDoor, "create", rwDoor);
+  }
+  lines.push(`${b2}return __el`);
+  lines.push(`${b1}},`);
+  const itemAttrs = lazyRow.attrs.filter((a) => a.readsItem);
+  const itemTexts = lazyRow.texts.filter((t) => t.readsItem);
+  if (itemAttrs.length === 0 && itemTexts.length === 0) {
+    lines.push(`${b1}applyItem: () => {},`);
+  } else {
+    lines.push(`${b1}applyItem: (__e) => {`);
+    lines.push(`${b2}const ${paramHead} = () => __e.item`);
+    lines.push(`${b2}const __r = __e.refs ?? (__e.refs = ${claimVar}(__e))`);
+    lines.push(`${b2}const __l = __e.last ?? (__e.last = [])`);
+    for (const a of itemAttrs)
+      emitAttrBinding(lines, b2, a, "item");
+    if (itemTexts.length > 0) {
+      lines.push(`${b2}const __d = ${doorAccess(lazyRow, lazyRow.writerIndex, adoptedPlanVar)}`);
+      for (const t of itemTexts)
+        emitTextBinding(lines, b2, t, "__d", "item", rwDoor);
+    }
+    lines.push(`${b1}},`);
+  }
+  const outerAttrs = lazyRow.attrs.filter((a) => a.readsOuter);
+  const outerTexts = lazyRow.texts.filter((t) => t.readsOuter);
+  if (outerAttrs.length > 0 || outerTexts.length > 0) {
+    const b3 = `${indent}      `;
+    lines.push(`${b1}applyOuter: (__es, __seed) => {`);
+    for (const g of lazyRow.outerPrimeGetters)
+      lines.push(`${b2}${g}()`);
+    lines.push(`${b2}for (const __e of __es) {`);
+    lines.push(`${b3}const ${paramHead} = () => __e.item`);
+    lines.push(`${b3}const __r = __e.refs ?? (__e.refs = ${claimVar}(__e))`);
+    lines.push(`${b3}const __l = __e.last ?? (__e.last = [])`);
+    for (const a of outerAttrs)
+      emitAttrBinding(lines, b3, a, "outer");
+    if (outerTexts.length > 0) {
+      lines.push(`${b3}const __d = ${doorAccess(lazyRow, lazyRow.writerIndex, adoptedPlanVar)}`);
+      for (const t of outerTexts)
+        emitTextBinding(lines, b3, t, "__d", "outer", rwDoor);
+    }
+    lines.push(`${b2}}`);
+    lines.push(`${b1}},`);
+  }
+  lines.push(`${indent}}, '${o.markerId}')`);
+}
+function refParts(lazyRow, elVar, skeletonPaths, planVar, deferDoor = false) {
+  const parts = [];
+  for (const slotId of lazyRow.attrSlotIds) {
+    const path = skeletonPaths?.elementPaths.get(slotId);
+    parts.push(path ? pathExpr(elVar, path) : `qsa(${elVar}, '[bf="${slotId}"]')`);
+  }
+  if (lazyRow.texts.length > 0) {
+    parts.push(deferDoor ? "null" : `${doorCtor(lazyRow)}(${elVar}, ${planVar})`);
+  }
+  return parts;
+}
+function doorCtor(lazyRow) {
+  return lazyRow.textNeedsRead ? "lazyClaimSlots" : "lazySlots";
+}
+function doorAccess(lazyRow, writerIndex, adoptedPlanVar) {
+  const slot = `__r[${writerIndex}]`;
+  return `${slot} ?? (${slot} = ${doorCtor(lazyRow)}(__e.primaryEl, ${adoptedPlanVar}))`;
+}
+function dedupGuard(ordinal) {
+  return `!(${ordinal} in __l) || !Object.is(__l[${ordinal}], __x)`;
+}
+function emitAttrBinding(lines, ind, a, mode) {
+  lines.push(`${ind}{ const __t = __r[${a.refIndex}]`);
+  lines.push(`${ind}if (__t) {`);
+  lines.push(`${ind}  const __x = ${a.wrappedExpression}`);
+  const guard = mode === "create" ? null : mode === "item" ? dedupGuard(a.ordinal) : `__seed ? (${seedDiffersExpr("__t", a)}) : (${dedupGuard(a.ordinal)})`;
+  const writeIndent = guard ? `${ind}    ` : `${ind}  `;
+  if (guard)
+    lines.push(`${ind}  if (${guard}) {`);
+  for (const stmt of emitAttrUpdate("__t", a.attrName, "__x", a.meta)) {
+    lines.push(`${writeIndent}${stmt}`);
+  }
+  if (guard)
+    lines.push(`${ind}  }`);
+  lines.push(`${ind}  __l[${a.ordinal}] = __x`);
+  lines.push(`${ind}} }`);
+}
+function emitTextBinding(lines, ind, t, doorExpr, mode, rwDoor) {
+  lines.push(`${ind}{ const __x = ${t.wrappedExpression}`);
+  const writeOf = (valueExpr) => rwDoor ? `${doorExpr}.write('${t.slotId}', ${valueExpr})` : `${doorExpr}('${t.slotId}', ${valueExpr})`;
+  if (mode === "outer") {
+    lines.push(`${ind}if (__seed) {`);
+    lines.push(`${ind}  const __s = textOrNode(__x)`);
+    lines.push(`${ind}  if (${doorExpr}.read('${t.slotId}') !== __s) ${writeOf("__s")}`);
+    lines.push(`${ind}} else if (${dedupGuard(t.ordinal)}) ${writeOf("textOrNode(__x)")}`);
+  } else if (mode === "item") {
+    lines.push(`${ind}if (${dedupGuard(t.ordinal)}) ${writeOf("textOrNode(__x)")}`);
+  } else {
+    lines.push(`${ind}${writeOf("textOrNode(__x)")}`);
+  }
+  lines.push(`${ind}__l[${t.ordinal}] = __x }`);
+}
+function seedDiffersExpr(target, a) {
+  const html = toHtmlAttrName(a.attrName);
+  if (a.attrName === "dangerouslySetInnerHTML" || html === "dangerouslySetInnerHTML")
+    return "true";
+  if (html === "style")
+    return `${target}.getAttribute('style') !== styleToCss(__x)`;
+  if (html === "class")
+    return `${target}.getAttribute('class') !== (__x != null ? String(__x) : null)`;
+  if (html === "value")
+    return `${target}.value !== String(__x)`;
+  if (isBooleanAttr(html))
+    return `${target}.${html} !== !!(__x)`;
+  if (a.meta.presenceOrUndefined) {
+    const written = html.startsWith("aria-") ? "true" : "";
+    return `${target}.getAttribute('${html}') !== (__x ? '${written}' : null)`;
+  }
+  return `${target}.getAttribute('${html}') !== (__x != null ? String(__x) : null)`;
+}
+
 // src/ir-to-client-js/control-flow/stringify/loop.ts
 function emitLoopChildRefs(lines, refs, opts) {
   if (refs.length === 0)
@@ -19248,6 +19790,23 @@ function stringifyPlainLoop(lines, plan, topIndent = "  ") {
     stringifyAnchoredLoop(lines, plan, topIndent, anchorKeyExpr);
     return;
   }
+  if (plan.lazyRow) {
+    stringifyLazyRowLoop(lines, {
+      indent: topIndent,
+      containerVar,
+      guardContainer: false,
+      markerId,
+      arrayExpr,
+      keyFn,
+      paramHead,
+      indexParam,
+      template,
+      skeletonTemplate,
+      skeletonPaths: plan.skeletonPaths,
+      lazyRow: plan.lazyRow
+    });
+    return;
+  }
   const hoistedTpl = !bodyIsMultiRoot && skeletonTemplate ? skeletonTemplate : null;
   const tplVar = `__tpl_${markerId.replace(/[^A-Za-z0-9_$]/g, "_")}`;
   if (hoistedTpl) {
@@ -19841,6 +20400,23 @@ function emitPlain(lines, plan) {
     stringifyEventDelegation(lines, eventDelegation);
     return;
   }
+  if (plan.lazyRow) {
+    stringifyLazyRowLoop(lines, {
+      indent: "        ",
+      containerVar,
+      guardContainer: true,
+      markerId,
+      arrayExpr,
+      keyFn,
+      paramHead,
+      indexParam,
+      template,
+      lazyRow: plan.lazyRow
+    });
+    lines.push(`      }))`);
+    stringifyEventDelegation(lines, eventDelegation);
+    return;
+  }
   if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0 && preambleRegions.length === 0) {
     const cloneExpr = emitTemplateCloneInline(template);
     if (mapPreambleWrapped) {
@@ -20039,7 +20615,7 @@ function buildComponentLoopPlan(elem, profileComponentName) {
 // src/ir-to-client-js/control-flow/plan/build-loop.ts
 function buildLoopPlan(elem, opts) {
   if (elem.bodyIsItemConditional) {
-    return buildPlainLoopPlan(elem, opts.profileComponentName);
+    return buildPlainLoopPlan(elem, opts.profileComponentName, opts.lazyScope);
   }
   if (elem.isStaticArray) {
     return buildStaticLoopPlan(elem, opts.unsafeLocalNames, opts.profileComponentName);
@@ -20051,9 +20627,9 @@ function buildLoopPlan(elem, opts) {
   if (elem.childComponent) {
     return buildComponentLoopPlan(elem, opts.profileComponentName);
   }
-  return buildPlainLoopPlan(elem, opts.profileComponentName);
+  return buildPlainLoopPlan(elem, opts.profileComponentName, opts.lazyScope);
 }
-function buildPlainLoopPlan(elem, profileComponentName) {
+function buildPlainLoopPlan(elem, profileComponentName, lazyScope) {
   const wrap = (expr) => wrapLoopParamAsAccessor(expr, elem.param, elem.paramBindings);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings);
   const hasReactive2 = elem.bindings.reactiveAttrs.length > 0 || elem.bindings.reactiveTexts.length > 0 || elem.bindings.conditionals.length > 0;
@@ -20080,27 +20656,43 @@ function buildPlainLoopPlan(elem, profileComponentName) {
       preambleRegions: []
     };
   }
+  const arrayExpr = buildChainedArrayExpr(elem);
+  const indexParam = elem.index || "__idx";
+  const mapPreambleWrapped = elem.preamble ? renderPreamble(elem.preamble, {
+    transformJs: wrap,
+    renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
+  }) : "";
+  const preambleRegions = buildPreambleRegionPlans(elem.preambleRegions, elem.param, elem.paramBindings);
   return {
     kind: "plain",
     rowConstruction: "string-template",
     containerVar: `_${varSlotId(elem.slotId)}`,
     markerId: elem.markerId,
     profileLoopId: profileComponentName ? `${profileComponentName}#binding:${elem.slotId}` : undefined,
-    arrayExpr: buildChainedArrayExpr(elem),
+    arrayExpr,
     keyFn: loopKeyFn(elem),
     paramHead,
     paramUnwrap,
-    indexParam: elem.index || "__idx",
-    mapPreambleWrapped: elem.preamble ? renderPreamble(elem.preamble, {
-      transformJs: wrap,
-      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, [{ param: elem.param, bindings: elem.paramBindings }], undefined, true)
-    }) : "",
+    indexParam,
+    lazyRow: buildLazyRowPlan({
+      loop: elem,
+      arrayExpr,
+      indexParam,
+      paramUnwrap,
+      mapPreambleWrapped,
+      preambleRegionCount: preambleRegions.length,
+      callSite: "plain",
+      flatMapLeafItem: false,
+      anchored: elem.bodyIsItemConditional ?? false,
+      scope: lazyScope
+    }) ?? undefined,
+    mapPreambleWrapped,
     template: elem.template,
     skeletonTemplate: elem.skeletonTemplate,
     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),
+    preambleRegions,
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,
     anchored: elem.bodyIsItemConditional ?? false,
     anchorKeyExpr: elem.key ? wrap(elem.key) : elem.index || "__idx"
@@ -20155,7 +20747,7 @@ function buildStaticLoopMaterialize(elem, unsafeLocalNames) {
 function emitConditionalUpdates(lines, ctx) {
   const profileComponentName = ctx.profile ? ctx.componentName : undefined;
   for (const elem of ctx.conditionalElements) {
-    const plan = buildInsertPlan(elem, { scope: { kind: "top" }, eventNameMode: "dom", profileComponentName });
+    const plan = buildInsertPlan(elem, { scope: { kind: "top" }, eventNameMode: "dom", profileComponentName, lazyScope: buildLazyRowScopeInfo(ctx) });
     stringifyInsert(lines, plan, { leadingIndent: "  ", bodyIndent: "      " });
     lines.push("");
   }
@@ -20163,17 +20755,19 @@ function emitConditionalUpdates(lines, ctx) {
 function emitClientOnlyConditionals(lines, ctx) {
   const profileComponentName = ctx.profile ? ctx.componentName : undefined;
   for (const elem of ctx.clientOnlyConditionals) {
-    const plan = buildInsertPlan(elem, { scope: { kind: "top" }, eventNameMode: "raw", profileComponentName });
+    const plan = buildInsertPlan(elem, { scope: { kind: "top" }, eventNameMode: "raw", profileComponentName, lazyScope: buildLazyRowScopeInfo(ctx) });
     lines.push(`  // @client conditional: ${elem.slotId}`);
     stringifyInsert(lines, plan, { leadingIndent: "  ", bodyIndent: "      " });
     lines.push("");
   }
 }
 function emitLoopUpdates(lines, ctx, unsafeLocalNames) {
+  const lazyScope = buildLazyRowScopeInfo(ctx);
   for (const elem of ctx.loopElements) {
     const plan = buildLoopPlan(elem, {
       unsafeLocalNames,
-      profileComponentName: ctx.profile ? ctx.componentName : undefined
+      profileComponentName: ctx.profile ? ctx.componentName : undefined,
+      lazyScope
     });
     internalInvariant(!(elem.preamble && elem.preamble.builderNames.length > 0 && plan.rowConstruction === "dom-ops"), `loop variant '${plan.kind}' declares dom-ops row construction but received a JSX-bearing preamble — add a Phase-1 refusal (or wire renderPreamble support) for this shape`);
     stringifyLoop(lines, plan);