@barefootjs/jsx 0.32.0 → 0.33.1

package/dist/index.js

@@ -523,7 +523,7 @@ function convertNode(node, raw) {
           }
           if (n === undefined || Number.isNaN(n)) {
             const parsedDepth = convertNode(depthNode, raw);
-            if (checkSupport(parsedDepth).supported) {
+            if (checkSupport(parsedDepth, "rendered").supported) {
               depthExpr = parsedDepth;
               flatDepth = 1;
             } else {
@@ -617,10 +617,12 @@ function convertNode(node, raw) {
         const k = objectLiteralKeyName(prop.name);
         if (k === null)
           return { kind: "unsupported", raw, reason: `Unsupported syntax: ${ts2.SyntaxKind[node.kind]}` };
-        properties.push({ key: k.key, keyKind: k.keyKind, shorthand: false, value: convertNode(prop.initializer, raw) });
+        properties.push({ kind: "prop", key: k.key, keyKind: k.keyKind, shorthand: false, value: convertNode(prop.initializer, raw) });
       } else if (ts2.isShorthandPropertyAssignment(prop)) {
         const key = prop.name.text;
-        properties.push({ key, keyKind: "identifier", shorthand: true, value: { kind: "identifier", name: key } });
+        properties.push({ kind: "prop", key, keyKind: "identifier", shorthand: true, value: { kind: "identifier", name: key } });
+      } else if (ts2.isSpreadAssignment(prop)) {
+        properties.push({ kind: "spread", expr: convertNode(prop.expression, raw) });
       } else {
         return { kind: "unsupported", raw, reason: `Unsupported syntax: ${ts2.SyntaxKind[node.kind]}` };
       }
@@ -1300,14 +1302,26 @@ function getUnaryOperatorString(op) {
   }
 }
 function isSupported(expr) {
-  return checkSupport(expr);
+  return checkSupport(expr, "rendered");
 }
-function checkSupport(expr) {
+function isSupportedValue(expr) {
+  return checkSupport(expr, "value");
+}
+function checkSupport(expr, pos) {
   switch (expr.kind) {
     case "unsupported":
       return { supported: false, reason: expr.reason };
-    case "object-literal":
-      return { supported: false, reason: "Unsupported syntax: ObjectLiteralExpression" };
+    case "object-literal": {
+      if (pos !== "value") {
+        return { supported: false, reason: "Unsupported syntax: ObjectLiteralExpression" };
+      }
+      for (const prop of expr.properties) {
+        const propSupport = checkSupport(prop.kind === "spread" ? prop.expr : prop.value, pos);
+        if (!propSupport.supported)
+          return propSupport;
+      }
+      return { supported: true, level: "L2" };
+    }
     case "identifier":
       return { supported: true, level: "L1" };
     case "literal":
@@ -1317,7 +1331,7 @@ function checkSupport(expr) {
       return { supported: false, reason: "Standalone arrow functions / regex literals are not supported" };
     case "array-literal": {
       for (const el of expr.elements) {
-        const elSupport = checkSupport(el);
+        const elSupport = checkSupport(el, pos);
         if (!elSupport.supported)
           return elSupport;
       }
@@ -1330,16 +1344,16 @@ function checkSupport(expr) {
           reason: `String.prototype.${expr.method} supports only a string pattern + string replacement (the regex form is deferred); use a string pattern or wrap the expression in /* @client */`
         };
       }
-      const objSupport = checkSupport(expr.object);
+      const objSupport = checkSupport(expr.object, pos);
       if (!objSupport.supported)
         return objSupport;
       for (const arg of expr.args) {
-        const argSupport = checkSupport(arg);
+        const argSupport = checkSupport(arg, pos);
         if (!argSupport.supported)
           return argSupport;
       }
       if (expr.method === "flat" && expr.depthExpr) {
-        const depthSupport = checkSupport(expr.depthExpr);
+        const depthSupport = checkSupport(expr.depthExpr, pos);
         if (!depthSupport.supported)
           return depthSupport;
       }
@@ -1348,10 +1362,10 @@ function checkSupport(expr) {
     case "call": {
       const cb = asCallbackMethodCall(expr);
       if (cb) {
-        const objSupport = checkSupport(cb.object);
+        const objSupport = checkSupport(cb.object, pos);
         if (!objSupport.supported)
           return objSupport;
-        const bodySupport = checkSupport(cb.arrow.body);
+        const bodySupport = checkSupport(cb.arrow.body, pos);
         if (!bodySupport.supported) {
           return {
             supported: false,
@@ -1360,13 +1374,13 @@ function checkSupport(expr) {
           };
         }
         for (const rest of cb.args) {
-          const restSupport = checkSupport(rest);
+          const restSupport = checkSupport(rest, pos);
           if (!restSupport.supported)
             return restSupport;
         }
         return { supported: true, level: "L5" };
       }
-      const calleeSupport = checkSupport(expr.callee);
+      const calleeSupport = checkSupport(expr.callee, pos);
       if (!calleeSupport.supported) {
         return calleeSupport;
       }
@@ -1385,7 +1399,7 @@ function checkSupport(expr) {
         return { supported: true, level: "L1" };
       }
       for (const arg of expr.args) {
-        const argSupport = checkSupport(arg);
+        const argSupport = checkSupport(arg, pos);
         if (!argSupport.supported) {
           return argSupport;
         }
@@ -1393,7 +1407,7 @@ function checkSupport(expr) {
       return { supported: true, level: "L2" };
     }
     case "member": {
-      const objSupport = checkSupport(expr.object);
+      const objSupport = checkSupport(expr.object, pos);
       if (!objSupport.supported) {
         return objSupport;
       }
@@ -1403,19 +1417,19 @@ function checkSupport(expr) {
       return { supported: true, level: "L2" };
     }
     case "index-access": {
-      const objSupport = checkSupport(expr.object);
+      const objSupport = checkSupport(expr.object, pos);
       if (!objSupport.supported)
         return objSupport;
-      const indexSupport = checkSupport(expr.index);
+      const indexSupport = checkSupport(expr.index, pos);
       if (!indexSupport.supported)
         return indexSupport;
       return { supported: true, level: "L2" };
     }
     case "binary": {
-      const leftSupport = checkSupport(expr.left);
+      const leftSupport = checkSupport(expr.left, pos);
       if (!leftSupport.supported)
         return leftSupport;
-      const rightSupport = checkSupport(expr.right);
+      const rightSupport = checkSupport(expr.right, pos);
       if (!rightSupport.supported)
         return rightSupport;
       if (["===", "==", "!==", "!=", ">", "<", ">=", "<="].includes(expr.op)) {
@@ -1427,7 +1441,7 @@ function checkSupport(expr) {
       return { supported: false, reason: `Unknown operator: ${expr.op}` };
     }
     case "unary": {
-      const argSupport = checkSupport(expr.argument);
+      const argSupport = checkSupport(expr.argument, pos);
       if (!argSupport.supported)
         return argSupport;
       if (expr.op === "!") {
@@ -1439,25 +1453,25 @@ function checkSupport(expr) {
       return { supported: false, reason: `Unsupported unary operator: ${expr.op}` };
     }
     case "logical": {
-      const leftSupport = checkSupport(expr.left);
+      const leftSupport = checkSupport(expr.left, pos);
       if (!leftSupport.supported)
         return leftSupport;
       if (expr.op === "??" && expr.right.kind === "object-literal" && expr.right.properties.length === 0) {
         return { supported: true, level: "L4" };
       }
-      const rightSupport = checkSupport(expr.right);
+      const rightSupport = checkSupport(expr.right, pos);
       if (!rightSupport.supported)
         return rightSupport;
       return { supported: true, level: "L4" };
     }
     case "conditional": {
-      const testSupport = checkSupport(expr.test);
+      const testSupport = checkSupport(expr.test, pos);
       if (!testSupport.supported)
         return testSupport;
-      const consSupport = checkSupport(expr.consequent);
+      const consSupport = checkSupport(expr.consequent, pos);
       if (!consSupport.supported)
         return consSupport;
-      const altSupport = checkSupport(expr.alternate);
+      const altSupport = checkSupport(expr.alternate, pos);
       if (!altSupport.supported)
         return altSupport;
       return { supported: true, level: "L4" };
@@ -1465,7 +1479,7 @@ function checkSupport(expr) {
     case "template-literal": {
       for (const part of expr.parts) {
         if (part.type === "expression") {
-          const partSupport = checkSupport(part.expr);
+          const partSupport = checkSupport(part.expr, pos);
           if (!partSupport.supported)
             return partSupport;
         }
@@ -1618,7 +1632,7 @@ function isPureInit(e, pureCallNames) {
     case "array-literal":
       return e.elements.every(pure);
     case "object-literal":
-      return e.properties.every((p) => pure(p.value));
+      return e.properties.every((p) => pure(p.kind === "spread" ? p.expr : p.value));
     case "call":
       return e.callee.kind === "identifier" && e.args.length === 0 && pureCallNames !== undefined && pureCallNames.has(e.callee.name);
     case "array-method":
@@ -1672,7 +1686,7 @@ function usesPerPath(name, expr) {
         }
         return add(walk(e.object), sum(e.args));
       case "object-literal":
-        return sum(e.properties.map((p) => p.value));
+        return sum(e.properties.map((p) => p.kind === "spread" ? p.expr : p.value));
       case "arrow":
         return walk(e.body).max > 0 ? { min: 0, max: Number.POSITIVE_INFINITY } : { min: 0, max: 0 };
     }
@@ -1738,7 +1752,7 @@ function inlineBinding(expr, name, value) {
       case "object-literal":
         return {
           kind: "object-literal",
-          properties: e.properties.map((p) => ({ ...p, value: walk(p.value, enclosing) })),
+          properties: e.properties.map((p) => p.kind === "spread" ? { ...p, expr: walk(p.expr, enclosing) } : { ...p, value: walk(p.value, enclosing) }),
           raw: e.raw
         };
       case "literal":
@@ -1971,7 +1985,7 @@ function materializeGetterCalls(expr, names) {
       return {
         kind: "object-literal",
         raw: expr.raw,
-        properties: expr.properties.map((p) => ({ ...p, value: rw(p.value) }))
+        properties: expr.properties.map((p) => p.kind === "spread" ? { ...p, expr: rw(p.expr) } : { ...p, value: rw(p.value) })
       };
     case "arrow":
       return { kind: "arrow", params: expr.params, body: rw(expr.body) };
@@ -2029,7 +2043,7 @@ function freeVarsInBody(body, params) {
         return;
       case "object-literal":
         for (const p of e.properties)
-          visit(p.value, bound);
+          visit(p.kind === "spread" ? p.expr : p.value, bound);
         return;
       case "array-method":
         if (e.method === "includes" || e.method === "join") {
@@ -2104,7 +2118,7 @@ function freeIdentifiers(expr) {
         return true;
       case "object-literal":
         for (const p of e.properties)
-          if (!visit(p.value, bound))
+          if (!visit(p.kind === "spread" ? p.expr : p.value, bound))
             return false;
         return true;
       case "arrow": {
@@ -2251,10 +2265,17 @@ function toEvalNode(e) {
     case "object-literal": {
       const properties = [];
       for (const p of e.properties) {
+        if (p.kind === "spread") {
+          const spreadExpr = toEvalNode(p.expr);
+          if (!spreadExpr)
+            return null;
+          properties.push({ kind: "spread", expr: spreadExpr });
+          continue;
+        }
         const value = toEvalNode(p.value);
         if (!value)
           return null;
-        properties.push({ key: p.key, value });
+        properties.push({ kind: "prop", key: p.key, value });
       }
       return { kind: "object-literal", properties };
     }
@@ -5613,6 +5634,7 @@ var ErrorCodes = {
   MISSING_KEY_IN_LIST: "BF023",
   MISSING_KEY_IN_NESTED_LIST: "BF024",
   UNSUPPORTED_DESTRUCTURE_REST: "BF025",
+  RETURN_VALUE_NOT_JSX: "BF027",
   PROPS_DESTRUCTURING: "BF043",
   SIGNAL_GETTER_NOT_CALLED: "BF044",
   JSX_IN_LOCAL_FUNCTION: "BF045",
@@ -5644,6 +5666,7 @@ var errorMessages = {
   [ErrorCodes.MISSING_KEY_IN_LIST]: "Missing key attribute in list rendering. Add a key prop for efficient updates",
   [ErrorCodes.MISSING_KEY_IN_NESTED_LIST]: "Nested .map() loop requires key attribute for event delegation. Add a key prop to elements in the inner loop",
   [ErrorCodes.UNSUPPORTED_DESTRUCTURE_REST]: "Computed property key in .map() callback destructure is not supported. Rewrite the callback to destructure explicit bindings (e.g., `({ a, b }) => ...`) so the compiler can rewrite references to per-item signal accessors.",
+  [ErrorCodes.RETURN_VALUE_NOT_JSX]: "Component's return value is not recognized as JSX — return the JSX expression directly instead of binding it to a local variable first.",
   [ErrorCodes.PROPS_DESTRUCTURING]: "Props destructuring in function parameters breaks reactivity. Use props object directly.",
   [ErrorCodes.SIGNAL_GETTER_NOT_CALLED]: "Signal/memo getter passed without calling it. Use getter() to read the value.",
   [ErrorCodes.JSX_IN_LOCAL_FUNCTION]: "Local function returns JSX but cannot be inlined. Extract it as a top-level PascalCase component or use a single return statement.",
@@ -6285,6 +6308,14 @@ function visitComponentBody(node, ctx) {
     }
   }
   if (isTopLevel && (ts9.isTryStatement(node) || ts9.isSwitchStatement(node) || ts9.isForStatement(node) || ts9.isForInStatement(node) || ts9.isForOfStatement(node) || ts9.isWhileStatement(node) || ts9.isDoStatement(node) || ts9.isThrowStatement(node) || ts9.isBlock(node) && node.parent === ctx.componentBodyBlock)) {
+    if (ts9.isBlock(node)) {
+      const returnedLocal = findBlockBodyReturnedJsxLocalName(node);
+      if (returnedLocal) {
+        ctx.errors.push(createError(ErrorCodes.RETURN_VALUE_NOT_JSX, getSourceLocation(node, ctx.sourceFile, ctx.filePath), {
+          message: `Component '${ctx.componentName ?? "(unknown)"}' return value is not recognized ` + `as JSX — return the JSX expression directly instead of binding it to a local ` + `variable first (\`return ${returnedLocal}\` after \`const ${returnedLocal} = ` + `<jsx/>\` is not resolved at return position).`
+        }));
+      }
+    }
     collectInitStatement(node, ctx);
     return;
   }
@@ -6320,6 +6351,31 @@ function unwrapJsxTransparent(expr) {
   }
   return current;
 }
+function findBlockBodyReturnedJsxLocalName(block) {
+  const stmts = block.statements;
+  const last = stmts[stmts.length - 1];
+  if (!last || !ts9.isReturnStatement(last) || !last.expression)
+    return null;
+  const returned = unwrapJsxTransparent(last.expression);
+  if (!ts9.isIdentifier(returned))
+    return null;
+  const name = returned.text;
+  for (const stmt of stmts) {
+    if (!ts9.isVariableStatement(stmt))
+      continue;
+    for (const decl of stmt.declarationList.declarations) {
+      if (!ts9.isIdentifier(decl.name) || decl.name.text !== name || !decl.initializer)
+        continue;
+      let init = decl.initializer;
+      while (ts9.isParenthesizedExpression(init))
+        init = init.expression;
+      if (ts9.isJsxElement(init) || ts9.isJsxSelfClosingElement(init) || ts9.isJsxFragment(init) || initializerShapeContainsJsx(init) || isMapLikeCallWithJsx(init)) {
+        return name;
+      }
+    }
+  }
+  return null;
+}
 function extractJsxFromExpression(expr) {
   const inner = unwrapJsxTransparent(expr);
   if (ts9.isJsxElement(inner) || ts9.isJsxFragment(inner) || ts9.isJsxSelfClosingElement(inner)) {
@@ -10114,6 +10170,8 @@ function matchToLocaleDateStringCall(callee, args, metadata) {
   let tz = null;
   const probeOptions = {};
   for (const prop of options.properties) {
+    if (prop.kind === "spread")
+      return null;
     if (prop.value.kind !== "literal" || prop.value.literalType !== "string")
       return null;
     const value = String(prop.value.value);
@@ -10687,8 +10745,14 @@ function buildIRRoot(analyzer) {
   }
   ctx.isRoot = false;
   const ir = transformJsxExpression(jsxReturn, ctx);
-  if (ir === null)
+  if (ir === null) {
+    if (ts13.isIdentifier(jsxReturn) && (analyzer.jsxConstants.has(jsxReturn.text) || analyzer.inlineableJsxConsts.has(jsxReturn.text))) {
+      analyzer.errors.push(createError(ErrorCodes.RETURN_VALUE_NOT_JSX, getSourceLocation(jsxReturn, analyzer.sourceFile, analyzer.filePath), {
+        message: `Component '${analyzer.componentName ?? "(unknown)"}' return value is not recognized ` + `as JSX — return the JSX expression directly instead of binding it to a local variable ` + `first (\`return ${jsxReturn.text}\` after \`const ${jsxReturn.text} = <jsx/>\` is not ` + `resolved at return position).`
+      }));
+    }
     return null;
+  }
   return wrapInScopeElement(ir);
 }
 function needsScopeWrapper(ir) {
@@ -11879,7 +11943,10 @@ function resolveCallbackMethodFunctionReferences(expr, analyzer, bound = EMPTY_B
           ...e.method === "flat" && e.depthExpr ? { depthExpr: visit2(e.depthExpr, bound2) } : {}
         };
       case "object-literal":
-        return { ...e, properties: e.properties.map((p) => ({ ...p, value: visit2(p.value, bound2) })) };
+        return {
+          ...e,
+          properties: e.properties.map((p) => p.kind === "spread" ? { ...p, expr: visit2(p.expr, bound2) } : { ...p, value: visit2(p.value, bound2) })
+        };
       case "arrow": {
         const inner = e.params.length === 0 ? bound2 : new Set([...bound2, ...e.params]);
         return { ...e, body: visit2(e.body, inner) };
@@ -13800,6 +13867,35 @@ function getStringValue(node) {
   }
   return null;
 }
+function unwrapTransparentTsWrappers(node) {
+  let n = node;
+  while (ts13.isParenthesizedExpression(n) || ts13.isAsExpression(n) || ts13.isSatisfiesExpression(n) || ts13.isNonNullExpression(n)) {
+    n = n.expression;
+  }
+  return n;
+}
+function expressionWrapsJsx(node) {
+  const n = unwrapTransparentTsWrappers(node);
+  if (ts13.isJsxElement(n) || ts13.isJsxSelfClosingElement(n) || ts13.isJsxFragment(n))
+    return true;
+  if (ts13.isConditionalExpression(n)) {
+    return expressionWrapsJsx(n.whenTrue) || expressionWrapsJsx(n.whenFalse);
+  }
+  if (ts13.isArrayLiteralExpression(n)) {
+    return n.elements.some((el) => expressionWrapsJsx(ts13.isSpreadElement(el) ? el.expression : el));
+  }
+  return false;
+}
+function reportNakedJsxWrapperProp(ctx, attr, propName, jsxExpr) {
+  const shape = ts13.isConditionalExpression(jsxExpr) ? "a ternary" : "an array literal";
+  ctx.analyzer.errors.push(createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(attr, ctx.sourceFile, ctx.filePath), {
+    message: `Prop '${propName}' is ${shape} wrapping JSX (${jsxExpr.getText(ctx.sourceFile)}). ` + `This shape is not compiled — only a JSX element/fragment given DIRECTLY as the prop value is.`,
+    suggestion: {
+      message: `Move the conditional/array out of the prop position: compute it in a local ` + `const and pass it as the component's children instead of a named prop ` + `(e.g. const ${propName} = ${jsxExpr.getText(ctx.sourceFile)}; <Comp>{${propName}}</Comp>). ` + `Wrapping the ternary/array in a fragment at the prop position ` + `(${propName}={<>{${jsxExpr.getText(ctx.sourceFile)}}</>}) is NOT a safe escape here: it compiles, ` + `but the child's own reactive prop getter receives the branch's HTML unbranded and re-escapes it as ` + `text on the child's very next reactive run, corrupting the DOM (a narrower gap #2651's door ` + `inventory left open — tracked separately).`,
+      escape: [{ kind: "rewrite" }]
+    }
+  }));
+}
 function processComponentProps(attributes, ctx) {
   const props = [];
   for (const attr of attributes.properties) {
@@ -13811,10 +13907,7 @@ function processComponentProps(attributes, ctx) {
       continue;
     const name = attr.name.getText(ctx.sourceFile);
     if (attr.initializer && ts13.isJsxExpression(attr.initializer) && attr.initializer.expression) {
-      let jsxExpr = attr.initializer.expression;
-      while (ts13.isParenthesizedExpression(jsxExpr)) {
-        jsxExpr = jsxExpr.expression;
-      }
+      const jsxExpr = unwrapTransparentTsWrappers(attr.initializer.expression);
       if (ts13.isJsxElement(jsxExpr) || ts13.isJsxSelfClosingElement(jsxExpr) || ts13.isJsxFragment(jsxExpr)) {
         const prevInsideComponentChildren = ctx.insideComponentChildren;
         ctx.insideComponentChildren = true;
@@ -13829,6 +13922,10 @@ function processComponentProps(attributes, ctx) {
           continue;
         }
       }
+      if ((ts13.isConditionalExpression(jsxExpr) || ts13.isArrayLiteralExpression(jsxExpr)) && expressionWrapsJsx(jsxExpr)) {
+        reportNakedJsxWrapperProp(ctx, attr, name, jsxExpr);
+        continue;
+      }
     }
     let value = getAttributeValue(attr, ctx);
     if (value.kind === "template") {
@@ -14910,10 +15007,11 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
         const innerPreambleNames = preambleNamesOf(n);
         if (ctx) {
           for (const child of n.children) {
-            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index));
-            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index));
+            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index));
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index));
             bindings.refs.push(...collectLoopChildRefs(child));
           }
+          bindings.conditionals.push(...collectLoopChildConditionals({ type: "fragment", children: n.children, loc: n.loc }, ctx, siblingOffsets, n.param, n.paramBindings, innerPreambleNames, n.index));
         }
         let childComponents;
         if (collectBindings) {
@@ -14937,9 +15035,6 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
           for (const child of n.children) {
             bindings.events.push(...collectLoopChildEventsWithNesting(child));
           }
-          if (ctx) {
-            bindings.conditionals.push(...collectLoopChildConditionals({ type: "fragment", children: n.children, loc: n.loc }, ctx, siblingOffsets, n.param, n.paramBindings, innerPreambleNames, n.index));
-          }
         }
         result.push({
           kind: "nested",
@@ -16075,6 +16170,7 @@ var RUNTIME_IMPORT_CANDIDATES = [
   "mapArrayLazy",
   "patchLeaf",
   "createDisposableEffect",
+  "findCondContainer",
   "createComponent",
   "renderChild",
   "registerComponent",
@@ -17974,7 +18070,8 @@ function emitProviderAndChildInits(lines, ctx) {
         lines.push(`  upsertChild(__scope, '${registryName}', '${child.slotId}', ${child.propsExpr})`);
         continue;
       }
-      const scopeRef = child.slotId ? `_${varSlotId(child.slotId)}` : "__scope";
+      const isCommentRoot = child.slotId !== null && child.slotId === ctx.commentScopeRootSlotId;
+      const scopeRef = !child.slotId || isCommentRoot ? "__scope" : `_${varSlotId(child.slotId)}`;
       lines.push(`  initChild('${registryName}', ${scopeRef}, ${child.propsExpr})`);
     }
   }
@@ -18626,6 +18723,7 @@ function buildBranchInnerLoopsPlan(args) {
   const {
     innerLoops,
     scopeVar,
+    condSlotId,
     outerLoopParam,
     outerLoopParamBindings,
     wrapOuter
@@ -18640,7 +18738,7 @@ function buildBranchInnerLoopsPlan(args) {
     const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings);
     const wrapBoth = (expr) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings);
     const csl = inner.containerSlotId;
-    const containerExpr = csl ? `(${scopeVar}.querySelector('[bf="${csl}"]') ?? ${scopeVar}.querySelector(\`[${BF_HOST2}="\${__scopeId}"][${BF_AT2}="${csl}"]\`) ?? ${scopeVar})` : scopeVar;
+    const containerExpr = csl ? `(${scopeVar}.querySelector('[bf="${csl}"]') ?? ${scopeVar}.querySelector(\`[${BF_HOST2}="\${__scopeId}"][${BF_AT2}="${csl}"]\`) ?? ${scopeVar})` : `findCondContainer(${scopeVar}, '${condSlotId}')`;
     const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings);
     const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings) : null;
     const wrapIRNode = (node) => {
@@ -18724,13 +18822,15 @@ function buildLoopChildConditionalsPlan(args) {
         branch: cond.whenTrue,
         wrap,
         loopParam,
-        loopParamBindings
+        loopParamBindings,
+        condId: cond.slotId
       }),
       whenFalseArm: buildLoopChildArmPlan({
         branch: cond.whenFalse,
         wrap,
         loopParam,
-        loopParamBindings
+        loopParamBindings,
+        condId: cond.slotId
       })
     });
   }
@@ -18770,7 +18870,7 @@ function buildArmTextsPlan(texts, wrap) {
   }));
 }
 function buildLoopChildArmPlan(args) {
-  const { branch, wrap, loopParam, loopParamBindings } = args;
+  const { branch, wrap, loopParam, loopParamBindings, condId } = args;
   return {
     events: buildBranchEventBindingsPlan({
       events: branch.events,
@@ -18783,6 +18883,7 @@ function buildLoopChildArmPlan(args) {
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: "__branchScope",
+      condSlotId: condId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap
@@ -18836,8 +18937,8 @@ function buildReactiveEffectsPlan(args) {
         wrappedCondition: wrap(cond.condition),
         whenTrueTemplateHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
         whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
-        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, profileComponentName),
-        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
         ...cond.readsPreamble && { readsPreamble: true }
       });
     }
@@ -18849,7 +18950,7 @@ function buildReactiveEffectsPlan(args) {
     profileComponentName
   };
 }
-function buildOuterArm(branch, wrap, loopParam, loopParamBindings, profileComponentName) {
+function buildOuterArm(branch, wrap, loopParam, loopParamBindings, condSlotId, profileComponentName) {
   return {
     events: buildBranchEventBindingsPlan({
       events: branch.events,
@@ -18863,6 +18964,7 @@ function buildOuterArm(branch, wrap, loopParam, loopParamBindings, profileCompon
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: "__branchScope",
+      condSlotId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap
@@ -18964,6 +19066,7 @@ function buildInnerLoopsPlan(args) {
 }
 function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, outerLoopParamBindings) {
   const wrapInner = (expr) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings);
+  const wrapBoth = (expr) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings);
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings);
   const wrappedKey = inner.key ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings) : null;
   const wrapIRNode = (node) => {
@@ -19025,6 +19128,13 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, o
     }));
   }
   const childRefs = buildChildRefBindings(inner.bindings.refs, inner.param, inner.paramBindings);
+  const conditionals = buildLoopChildConditionalsPlan({
+    conditionals: inner.bindings.conditionals,
+    scopeVar: `__innerEl${uidSuffix}`,
+    wrap: wrapBoth,
+    loopParam: inner.param,
+    loopParamBindings: inner.paramBindings
+  });
   return {
     mode: "reactive",
     keyFn: loopKeyFn(inner),
@@ -19037,6 +19147,7 @@ function buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, o
     events,
     reactiveTexts,
     reactiveAttrs,
+    conditionals,
     childRefs
   };
 }
@@ -19989,6 +20100,17 @@ function bindingIdArg(ctx, slotId) {
     return "";
   return `, ${JSON.stringify(`${ctx.componentName}#binding:${slotId}`)}`;
 }
+function emitValueUpdateStatements(target, expression) {
+  return [
+    `const __val = String(${expression})`,
+    `if ('value' in ${target}) { if (${target}.value !== __val) ${target}.value = __val } else { ${target}.setAttribute('value', __val) }`
+  ];
+}
+function emitChildValueMirrorStatements(target, expression) {
+  return [
+    `if ('value' in ${target}) { const __val = String(${expression}); if (${target}.value !== __val) ${target}.value = __val }`
+  ];
+}
 function emitAttrUpdate(target, attrName, expression, meta) {
   const htmlName = toHtmlAttrName(attrName);
   if (attrName === "dangerouslySetInnerHTML" || htmlName === "dangerouslySetInnerHTML") {
@@ -20007,10 +20129,7 @@ function emitAttrUpdate(target, attrName, expression, meta) {
     ];
   }
   if (htmlName === "value") {
-    return [
-      `const __val = String(${expression})`,
-      `if (${target}.value !== __val) ${target}.value = __val`
-    ];
+    return emitValueUpdateStatements(target, expression);
   }
   if (isBooleanAttr(htmlName)) {
     return [`${target}.${htmlName} = !!(${expression})`];
@@ -20258,30 +20377,30 @@ function emitReactivePropBindings(lines, ctx) {
       propsBySlot.get(prop.slotId).push(prop);
     }
     for (const [slotId, props] of propsBySlot) {
-      const v = varSlotId(slotId);
-      lines.push(`    if (_${v}) {`);
+      const ref = slotId === ctx.commentScopeRootSlotId ? "__scope" : `_${varSlotId(slotId)}`;
+      lines.push(`    if (${ref}) {`);
       for (const prop of props) {
         const value = `${prop.expression}()`;
         if (prop.propName === "selected") {
           if (prop.componentName === "TabsContent") {
-            lines.push(`      _${v}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`);
+            lines.push(`      ${ref}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`);
             lines.push(`      if (${value}) {`);
-            lines.push(`        _${v}.classList.remove('hidden')`);
+            lines.push(`        ${ref}.classList.remove('hidden')`);
             lines.push(`      } else {`);
-            lines.push(`        _${v}.classList.add('hidden')`);
+            lines.push(`        ${ref}.classList.add('hidden')`);
             lines.push(`      }`);
           } else {
-            lines.push(`      _${v}.setAttribute('aria-selected', String(${value}))`);
-            lines.push(`      _${v}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`);
-            lines.push(`      _${v}.setAttribute('tabindex', ${value} ? '0' : '-1')`);
+            lines.push(`      ${ref}.setAttribute('aria-selected', String(${value}))`);
+            lines.push(`      ${ref}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`);
+            lines.push(`      ${ref}.setAttribute('tabindex', ${value} ? '0' : '-1')`);
           }
         } else if (prop.propName === "value") {
-          lines.push(`      const __val = String(${value})`);
-          lines.push(`      if (_${v}.value !== __val) _${v}.value = __val`);
+          for (const stmt of emitChildValueMirrorStatements(ref, value))
+            lines.push(`      ${stmt}`);
         } else if (isBooleanAttr(prop.propName)) {
-          lines.push(`      _${v}.${prop.propName} = !!(${value})`);
+          lines.push(`      ${ref}.${prop.propName} = !!(${value})`);
         } else {
-          lines.push(`      _${v}.setAttribute('${prop.propName}', String(${value}))`);
+          lines.push(`      ${ref}.setAttribute('${prop.propName}', String(${value}))`);
         }
       }
       lines.push(`    }`);
@@ -20304,13 +20423,17 @@ function emitReactiveChildProps(lines, ctx) {
     }
     for (const [, props] of propsByComponent) {
       const first = props[0];
+      const isCommentRoot = first.slotId !== null && first.slotId === ctx.commentScopeRootSlotId;
       const varSuffix = first.slotId ? varSlotId(first.slotId).replace(/-/g, "_") : first.componentName;
-      const varName = `__${first.componentName}_${varSuffix}El`;
-      const selectorArg = first.slotId ? first.slotId : first.componentName;
-      lines.push(`    const [${varName}] = $c(__scope, '${selectorArg}')`);
+      const varName = isCommentRoot ? "__scope" : `__${first.componentName}_${varSuffix}El`;
+      if (!isCommentRoot) {
+        const selectorArg = first.slotId ? first.slotId : first.componentName;
+        lines.push(`    const [${varName}] = $c(__scope, '${selectorArg}')`);
+      }
       lines.push(`    if (${varName}) {`);
       for (const prop of props) {
-        for (const stmt of emitAttrUpdate(varName, prop.attrName, prop.expression, prop)) {
+        const stmts = toHtmlAttrName(prop.attrName) === "value" ? emitChildValueMirrorStatements(varName, prop.expression) : emitAttrUpdate(varName, prop.attrName, prop.expression, prop);
+        for (const stmt of stmts) {
           lines.push(`      ${stmt}`);
         }
       }
@@ -20871,8 +20994,9 @@ function seedDiffersExpr(target, a) {
     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 (html === "value") {
+    return `('value' in ${target} ? ${target}.value !== String(__x) : ${target}.getAttribute('value') !== String(__x))`;
+  }
   if (isBooleanAttr(html))
     return `${target}.${html} !== !!(__x)`;
   if (a.meta.presenceOrUndefined) {
@@ -21230,6 +21354,9 @@ function emitReactive(lines, inner, indent, pc) {
     }
     lines.push(`${indent}  }${profileBindingId(pc, attr.slotId)}) }`);
   }
+  if (emit.conditionals.length > 0) {
+    stringifyLoopChildConditionals(lines, emit.conditionals, `${indent}  `, pc);
+  }
   emitLoopChildRefs(lines, emit.childRefs, {
     indent: `${indent}  `,
     elVar: `__innerEl${uid}`,
@@ -21993,6 +22120,9 @@ function generateElementRefs(ctx) {
   for (const slotId of componentSlots) {
     regularSlots.delete(slotId);
   }
+  if (ctx.commentScopeRootSlotId) {
+    componentSlots.delete(ctx.commentScopeRootSlotId);
+  }
   if (regularSlots.size === 0 && componentSlots.size === 0)
     return "";
   const refLines = [];
@@ -22479,6 +22609,7 @@ function createContext(ir, scope, adapterCapabilities, profile) {
     refElements: [],
     childInits: [],
     deferredChildSlots: new Set,
+    commentScopeRootSlotId: ir.root.type === "component" ? ir.root.slotId : null,
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],
@@ -23480,12 +23611,38 @@ function evalNode(node, ctx) {
     const baseResult = evalNode(node.expression, ctx);
     if (baseResult === undefined)
       return;
-    return UNRESOLVED;
+    if (baseResult === UNRESOLVED || baseResult === null || typeof baseResult !== "object") {
+      return UNRESOLVED;
+    }
+    const proto = Object.getPrototypeOf(baseResult);
+    if (proto !== Object.prototype && proto !== null)
+      return UNRESOLVED;
+    const key = node.name.text;
+    return Object.prototype.hasOwnProperty.call(baseResult, key) ? baseResult[key] : undefined;
   }
   if (ts22.isCallExpression(node)) {
     if (node.arguments.length === 0 && ts22.isIdentifier(node.expression) && node.expression.text in ctx.bindings) {
       return ctx.bindings[node.expression.text];
     }
+    if (ts22.isPropertyAccessExpression(node.expression) && node.expression.name.text === "map" && node.arguments.length === 1) {
+      const arrow = node.arguments[0];
+      if (ts22.isArrowFunction(arrow) && arrow.parameters.length === 1 && ts22.isIdentifier(arrow.parameters[0].name) && !ts22.isBlock(arrow.body)) {
+        const recv = evalNode(node.expression.expression, ctx);
+        if (Array.isArray(recv)) {
+          const paramName = arrow.parameters[0].name.text;
+          const mapped = [];
+          for (const item of recv) {
+            const localBindings = { ...ctx.bindings, [paramName]: item };
+            const v = evalNode(arrow.body, { ...ctx, bindings: localBindings });
+            if (v === UNRESOLVED)
+              return UNRESOLVED;
+            mapped.push(v === undefined ? null : v);
+          }
+          return mapped;
+        }
+      }
+      return UNRESOLVED;
+    }
     if (ts22.isPropertyAccessExpression(node.expression) && node.expression.name.text === "join") {
       const recv = evalNode(node.expression.expression, ctx);
       if (Array.isArray(recv)) {
@@ -23989,7 +24146,7 @@ function parseRecordIndexAccess(val, localConstants, propsParams, resolveKey) {
 
 // src/ssr-seed-plan.ts
 function classify2(name, origin, expr, parsed, available) {
-  if (!isSupported(parsed).supported)
+  if (!isSupportedValue(parsed).supported)
     return { kind: "opaque", name, origin };
   const frees = freeIdentifiers(parsed);
   if (frees === null)
@@ -24052,7 +24209,7 @@ function computeSsrSeedPlan(metadata) {
       }
     }
     const expr = signal.initialValue.trim();
-    steps.push(expr === "" ? { kind: "opaque", name: signal.getter, origin: "signal" } : classify2(signal.getter, "signal", expr, resolveThroughLocalConsts(parseExpression(expr), localConsts), available));
+    steps.push(expr === "" ? { kind: "opaque", name: signal.getter, origin: "signal" } : classify2(signal.getter, "signal", expr, resolveThroughLocalConsts(signal.parsed ?? parseExpression(`(${expr})`), localConsts), available));
     available.add(signal.getter);
   }
   for (const memo of metadata.memos) {
@@ -24216,7 +24373,7 @@ function checkExpr(expr, loc, meta, bindings, matchers, errors, seen) {
       break;
     case "object-literal":
       for (const prop of expr.properties)
-        recurse(prop.value);
+        recurse(prop.kind === "spread" ? prop.expr : prop.value);
       break;
     case "array-method":
       recurse(expr.object);
@@ -25599,6 +25756,26 @@ function isStringConcatBinary(op, left, right, isStringName) {
 function groupBinaryOperand(operand, emitted) {
   return operand.kind === "binary" || operand.kind === "logical" || operand.kind === "conditional" ? `(${emitted})` : emitted;
 }
+function groupObjectLiteralSegments(properties, literalOf, emit) {
+  const segments = [];
+  let run = [];
+  const flushRun = () => {
+    if (run.length > 0) {
+      segments.push(literalOf(run));
+      run = [];
+    }
+  };
+  for (const p of properties) {
+    if (p.kind === "spread") {
+      flushRun();
+      segments.push(emit(p.expr));
+    } else {
+      run.push(p);
+    }
+  }
+  flushRun();
+  return segments;
+}
 function emitParsedExpr(expr, emitter) {
   const emit = (child) => emitParsedExpr(child, emitter);
   switch (expr.kind) {
@@ -25745,6 +25922,17 @@ function evaluateStaticLiteral(expr, bindings) {
     case "object-literal": {
       const out = {};
       for (const prop of expr.properties) {
+        if (prop.kind === "spread") {
+          const resolved2 = evaluateStaticLiteral(prop.expr, bindings);
+          if (!resolved2)
+            return null;
+          if (resolved2.value === null || resolved2.value === undefined)
+            continue;
+          if (typeof resolved2.value !== "object" || Array.isArray(resolved2.value))
+            return null;
+          Object.assign(out, resolved2.value);
+          continue;
+        }
         const resolved = evaluateStaticLiteral(prop.value, bindings);
         if (!resolved)
           return null;
@@ -25814,6 +26002,8 @@ function matchQueryHrefCall(callee, args, localNames) {
     return null;
   const triples = [];
   for (const p of obj.properties) {
+    if (p.kind === "spread")
+      return null;
     const v = p.value;
     if (v.kind === "conditional" && isOmitBranch(v.alternate)) {
       triples.push({ guard: v.test, key: p.key, value: v.consequent });
@@ -26001,6 +26191,8 @@ function htmlPropValue(parsed) {
   if (parsed.properties.length !== 1)
     return null;
   const [prop] = parsed.properties;
+  if (prop.kind === "spread")
+    return null;
   if (prop.key !== "__html")
     return null;
   return prop.value;
@@ -28925,6 +29117,7 @@ export {
   joinProfilerEvents,
   isValueReferenceIdentifier,
   isValidHelperId,
+  isSupportedValue,
   isSupported,
   isStringTypedOperand,
   isStringConcatBinary,
@@ -28937,6 +29130,7 @@ export {
   importsSearchParams,
   identifierPath,
   hasUnsafeStyleValue,
+  groupObjectLiteralSegments,
   groupBinaryOperand,
   graphToJSON,
   getLoweringPlugins,