@barefootjs/cli 0.5.2 → 0.5.3

package/dist/index.js

@@ -518,6 +518,19 @@ function buildChainedArrayExpr(elem) {
     chainOrder: elem.chainOrder
   });
 }
+function loopOffsetTerms(offset) {
+  if (!offset) return [];
+  const terms = [];
+  if (offset.staticCount) terms.push(String(offset.staticCount));
+  terms.push(...offset.dynamicTerms);
+  return terms;
+}
+function buildLoopChildIndexExpr(indexParam, offset) {
+  return [indexParam, ...loopOffsetTerms(offset)].join(" + ");
+}
+function buildLoopChildIndexSubtraction(offset) {
+  return loopOffsetTerms(offset).map((term) => ` - ${term}`).join("");
+}
 function toDomEventName(eventName) {
   return jsxToDomEventMap[eventName] ?? eventName;
 }
@@ -1274,16 +1287,28 @@ function maybeHoistedScopeAttr(inHoistedChildren, node) {
   return inHoistedChildren && node.needsScope ? `${BF_SCOPE}="${BF_PARENT_SCOPE_PLACEHOLDER}"` : null;
 }
 function templateAttrExpr(attrName, valExpr, presenceOrUndefined) {
+  if (attrName === "dangerouslySetInnerHTML") return "";
   if (isBooleanAttr(attrName) || presenceOrUndefined) {
     return `\${${valExpr} ? '${attrName}' : ''}`;
   }
   if (attrName === "style") {
-    return `\${((v) => v != null ? 'style="' + v + '"' : '')(styleToCss(${valExpr}))}`;
+    return `\${((v) => v != null ? 'style="' + ${escapeAttrValueExpr("v")} + '"' : '')(styleToCss(${valExpr}))}`;
   }
   if (attrName === "data-key" || attrName.startsWith("data-key-")) {
     return `${attrName}="\${${valExpr}}"`;
   }
-  return `\${(${valExpr}) != null ? '${attrName}="' + (${valExpr}) + '"' : ''}`;
+  return `\${(${valExpr}) != null ? '${attrName}="' + ${escapeAttrValueExpr(valExpr)} + '"' : ''}`;
+}
+function escapeAttrValueExpr(valExpr) {
+  return `escapeAttr(${valExpr})`;
+}
+function escapeTextSlotExpr(innerExpr) {
+  return `escapeText(${innerExpr})`;
+}
+function dangerouslyHtmlChildren(attrs, toExpr) {
+  const attr = attrs.find((a) => a.name === "dangerouslySetInnerHTML");
+  if (!attr || attr.value.kind !== "expression") return null;
+  return `\${((${toExpr(attr.value)}) ?? {}).__html ?? ''}`;
 }
 function transformKeyValue(value, transformExpr) {
   switch (value.kind) {
@@ -1328,6 +1353,7 @@ function renderTemplateAttrPart(attr, attrName, wrap, restSpreadNames) {
 function isMergeableAttr(a, ctx2) {
   if (ctx2.honorClientOnly && a.clientOnly) return false;
   if (a.name === "key") return false;
+  if (a.name === "dangerouslySetInnerHTML") return false;
   const v = a.value;
   if (v.kind === "jsx-children") return false;
   if (v.kind === "boolean-shorthand") return false;
@@ -1415,7 +1441,7 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       }
       const attrs = attrParts.join(" ");
       const childrenRecurse = (n) => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, false);
-      const children = node.children.map(childrenRecurse).join("");
+      const children = dangerouslyHtmlChildren(node.attrs, (v) => wrapExpr(v.expr)) ?? node.children.map(childrenRecurse).join("");
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? " " + attrs : ""}>${children}</${node.tag}>`;
       }
@@ -1426,7 +1452,9 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
     case "expression":
       if (node.expr === "null" || node.expr === "undefined") return "";
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${wrapInterpolation(wrapExpr(node.expr))}}<!--/-->`;
+        const inner = wrapInterpolation(wrapExpr(node.expr));
+        const slotted = branchSlotsVar ? inner : escapeTextSlotExpr(inner);
+        return `<!--bf:${node.slotId}-->\${${slotted}}<!--/-->`;
       }
       return `\${${wrapInterpolation(wrapExpr(node.expr))}}`;
     case "conditional": {
@@ -1522,7 +1550,7 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
         attrParts.push(`bf="${node.slotId}"`);
       }
       const attrs = attrParts.join(" ");
-      const children = node.children.map(recurse).join("");
+      const children = dangerouslyHtmlChildren(node.attrs, (v) => wrapExpr(v.expr)) ?? node.children.map(recurse).join("");
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? " " + attrs : ""}>${children}</${node.tag}>`;
       }
@@ -1533,7 +1561,7 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
     case "expression":
       if (node.expr === "null" || node.expr === "undefined") return "";
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${wrapExpr(node.expr)}}<!--/-->`;
+        return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(wrapExpr(node.expr))}}<!--/-->`;
       }
       return `\${${wrapExpr(node.expr)}}`;
     case "conditional": {
@@ -1752,7 +1780,7 @@ function irToComponentTemplateWithOpts(node, opts) {
         attrParts.push(`bf="${node.slotId}"`);
       }
       const attrs = attrParts.join(" ");
-      const children = node.children.map(childrenRecurse).join("");
+      const children = dangerouslyHtmlChildren(node.attrs, (v) => transformExpr(v.expr, v.templateExpr)) ?? node.children.map(childrenRecurse).join("");
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? " " + attrs : ""}>${children}</${node.tag}>`;
       }
@@ -1763,7 +1791,7 @@ function irToComponentTemplateWithOpts(node, opts) {
     case "expression":
       if (node.expr === "null" || node.expr === "undefined") return "";
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${transformExpr(node.expr, node.templateExpr)}}<!--/-->`;
+        return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(transformExpr(node.expr, node.templateExpr))}}<!--/-->`;
       }
       return `\${${transformExpr(node.expr, node.templateExpr)}}`;
     case "conditional": {
@@ -1966,7 +1994,7 @@ function generateCsrTemplateWithOpts(node, opts) {
         attrParts.push(`bf="${node.slotId}"`);
       }
       const attrs = attrParts.join(" ");
-      const children = node.children.map(childrenRecurse).join("");
+      const children = dangerouslyHtmlChildren(node.attrs, (v) => transformExpr(v.expr, v.templateExpr)) ?? node.children.map(childrenRecurse).join("");
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? " " + attrs : ""}>${children}</${node.tag}>`;
       }
@@ -1983,7 +2011,7 @@ function generateCsrTemplateWithOpts(node, opts) {
         const transformed = transformExpr(node.expr, node.templateExpr);
         const expr = transformed === UNSAFE_TEMPLATE_EXPR ? "''" : transformed;
         if (node.slotId) {
-          return `<!--bf:${node.slotId}-->\${${expr}}<!--/-->`;
+          return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(expr)}}<!--/-->`;
         }
         return `\${${expr}}`;
       }
@@ -8310,11 +8338,11 @@ function transformMapCall(node, ctx2, isClientOnly = false, method = "map") {
           if (stmt === returnStmt) break;
           const js = ctx2.getJS(stmt);
           const tjs = ctx2.getTemplateJS(stmt);
-          const ts20 = stmt.getText(ctx2.sourceFile);
+          const ts21 = stmt.getText(ctx2.sourceFile);
           preambleStmts.push(js.endsWith(";") ? js : js + ";");
           templatePreambleStmts.push(tjs.endsWith(";") ? tjs : tjs + ";");
-          typedPreambleStmts.push(ts20.endsWith(";") ? ts20 : ts20 + ";");
-          if (js !== ts20) hasTypeDiff = true;
+          typedPreambleStmts.push(ts21.endsWith(";") ? ts21 : ts21 + ";");
+          if (js !== ts21) hasTypeDiff = true;
           if (js !== tjs) hasTemplateDiff = true;
         }
         if (preambleStmts.length > 0) {
@@ -9590,23 +9618,72 @@ var init_reactivity = __esm({
 });
 
 // ../jsx/src/ir-to-client-js/collect-elements.ts
-function producesDomChild(node) {
-  return node.type === "element" || node.type === "component" || node.type === "provider" || node.type === "async" || node.type === "text" || node.type === "expression" && !node.reactive || node.type === "conditional";
+function domElementCount(node) {
+  switch (node.type) {
+    case "element":
+    case "component":
+    case "provider":
+    case "async":
+      return 1;
+    case "text":
+      return 0;
+    case "expression":
+      return EMPTY_RENDER_EXPRS.has(node.expr.trim()) ? 0 : null;
+    case "loop":
+      if (node.bodyIsItemConditional || node.method === "flatMap") return null;
+      return `(${buildLoopChainExpr({
+        base: node.array,
+        sortComparator: node.sortComparator,
+        filterPredicate: node.filterPredicate,
+        chainOrder: node.chainOrder
+      })}).length`;
+    case "conditional": {
+      const t = domElementCount(node.whenTrue);
+      const f = domElementCount(node.whenFalse);
+      if (t === null || f === null) return null;
+      if (typeof t === "number" && typeof f === "number" && t === f) return t;
+      return `(${node.condition} ? ${t} : ${f})`;
+    }
+    case "fragment":
+      return sumElementCounts(node.children);
+    default:
+      return null;
+  }
+}
+function sumElementCounts(nodes) {
+  let staticCount = 0;
+  const dynamic = [];
+  for (const n of nodes) {
+    const c = domElementCount(n);
+    if (c === null) return null;
+    if (typeof c === "number") staticCount += c;
+    else dynamic.push(c);
+  }
+  if (dynamic.length === 0) return staticCount;
+  const parts = staticCount > 0 ? [String(staticCount), ...dynamic] : dynamic;
+  return parts.length === 1 ? parts[0] : `(${parts.join(" + ")})`;
+}
+function legacyElementCount(node) {
+  return node.type === "element" || node.type === "component" || node.type === "provider" || node.type === "async" || node.type === "text" || node.type === "expression" && !node.reactive || node.type === "conditional" ? 1 : 0;
 }
 function computeLoopSiblingOffsets(root) {
   const offsets = /* @__PURE__ */ new Map();
-  const recordChildren = (children) => {
-    let nonLoopCount = 0;
+  const recordRun = (children, preceding) => {
     for (const child of children) {
       if (child.type === "loop") {
-        if (nonLoopCount > 0) offsets.set(child, nonLoopCount);
-      } else if (producesDomChild(child)) {
-        nonLoopCount++;
+        if (preceding.length > 0 && !offsets.has(child)) {
+          offsets.set(child, [...preceding]);
+        }
+        preceding.push(child);
+      } else if (child.type === "fragment" || child.type === "provider" || child.type === "async") {
+        recordRun(child.children, preceding);
+      } else {
+        preceding.push(child);
       }
     }
   };
   const containerVisit = ({ node, descend }) => {
-    recordChildren(node.children);
+    recordRun(node.children, []);
     descend();
   };
   walkIR(root, null, {
@@ -9622,6 +9699,19 @@ function computeLoopSiblingOffsets(root) {
   });
   return offsets;
 }
+function resolveLoopOffset(preceding) {
+  if (!preceding || preceding.length === 0) return void 0;
+  let staticCount = 0;
+  const dynamicTerms = [];
+  for (const node of preceding) {
+    const c = domElementCount(node);
+    if (c === null) staticCount += legacyElementCount(node);
+    else if (typeof c === "number") staticCount += c;
+    else dynamicTerms.push(c);
+  }
+  if (staticCount === 0 && dynamicTerms.length === 0) return void 0;
+  return { staticCount, dynamicTerms };
+}
 function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx2, options) {
   const result = [];
   const flat = options?.flatBranchMode === true;
@@ -9707,7 +9797,7 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx2, options)
           refsOuterParam: refsOuter,
           childComponents,
           insideConditional: !flat && scope.insideCond ? true : void 0,
-          siblingOffset: flat ? void 0 : siblingOffsets.get(n) || void 0,
+          offset: flat ? void 0 : resolveLoopOffset(siblingOffsets.get(n)),
           bindings
         });
         if (!flat) {
@@ -9917,7 +10007,7 @@ function collectElements(node, ctx2, siblingOffsets, insideConditional = false)
         isStaticArray: l.isStaticArray,
         useElementReconciliation,
         innerLoops: useElementReconciliation || l.isStaticArray && innerLoops?.length ? innerLoops : void 0,
-        siblingOffset: siblingOffsets.get(l) || void 0,
+        offset: resolveLoopOffset(siblingOffsets.get(l)),
         filterPredicate: l.filterPredicate ? {
           param: l.filterPredicate.param,
           raw: l.filterPredicate.raw
@@ -10218,7 +10308,7 @@ function summarizeLoopChildBranch(node, ctx2, siblingOffsets, loopParam, loopPar
     events: collectConditionalBranchEvents(node)
   };
 }
-var branchInnerLoopOptions;
+var EMPTY_RENDER_EXPRS, branchInnerLoopOptions;
 var init_collect_elements = __esm({
   "../jsx/src/ir-to-client-js/collect-elements.ts"() {
     "use strict";
@@ -10228,6 +10318,8 @@ var init_collect_elements = __esm({
     init_html_template();
     init_prop_handling();
     init_walker();
+    init_loop_chain();
+    EMPTY_RENDER_EXPRS = /* @__PURE__ */ new Set(["null", "undefined", "false", "''", '""', "``"]);
     branchInnerLoopOptions = {
       collectItemBindings: true,
       templateDepth: 1,
@@ -10787,6 +10879,8 @@ var init_imports = __esm({
       "splitProps",
       "spreadAttrs",
       "styleToCss",
+      "escapeAttr",
+      "escapeText",
       "qsa",
       "qsaItem",
       "qsaChildScope",
@@ -12624,7 +12718,7 @@ function buildOuterNestedPlan(elem, comp) {
     arrayExpr: elem.array,
     param: elem.param,
     indexParam,
-    offsetExpr: elem.siblingOffset ? `${indexParam} + ${elem.siblingOffset}` : indexParam,
+    offsetExpr: buildLoopChildIndexExpr(indexParam, elem.offset),
     outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
     propsExpr: buildStaticPropsExpr(comp.props)
   };
@@ -12642,12 +12736,12 @@ function buildInnerLoopNestedPlan(elem, innerLoop, innerComps) {
     outerArrayExpr: elem.array,
     outerParam: elem.param,
     outerIndexParam,
-    outerOffsetExpr: elem.siblingOffset ? `${outerIndexParam} + ${elem.siblingOffset}` : outerIndexParam,
+    outerOffsetExpr: buildLoopChildIndexExpr(outerIndexParam, elem.offset),
     outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
     innerContainerSlotId: innerLoop.containerSlotId ?? null,
     innerArrayExpr: innerLoop.array,
     innerParam: innerLoop.param,
-    innerOffsetExpr: innerLoop.siblingOffset ? `__innerIdx + ${innerLoop.siblingOffset}` : "__innerIdx",
+    innerOffsetExpr: buildLoopChildIndexExpr("__innerIdx", innerLoop.offset),
     innerPreludeStatements: innerLoop.mapPreamble ? [innerLoop.mapPreamble] : [],
     depth: innerLoop.depth,
     comps
@@ -13464,7 +13558,7 @@ function buildStaticArrayDelegationPlan(elem) {
       arrayExpr: buildChainedArrayExpr(elem),
       param: elem.param,
       mapPreamble: elem.mapPreamble ?? null,
-      siblingOffset: elem.siblingOffset ?? null
+      offset: elem.offset ?? null
     }
   };
 }
@@ -13618,6 +13712,11 @@ var init_build_insert = __esm({
 // ../jsx/src/ir-to-client-js/emit-reactive.ts
 function emitAttrUpdate(target, attrName, expression, meta) {
   const htmlName = toHTMLAttrName(attrName);
+  if (attrName === "dangerouslySetInnerHTML" || htmlName === "dangerouslySetInnerHTML") {
+    return [
+      `{ const __v = ${expression}; ${target}.innerHTML = __v != null && __v.__html != null ? String(__v.__html) : '' }`
+    ];
+  }
   if (htmlName === "style") {
     return [
       `{ const __v = styleToCss(${expression}); if (__v != null) ${target}.setAttribute('style', __v); else ${target}.removeAttribute('style') }`
@@ -14681,11 +14780,11 @@ function emitDynamicIndexLookup(ls, ev, handlerCall, lookup) {
   ls.push(`      }`);
 }
 function emitStaticIndexLookup(ls, ev, handlerCall, lookup, containerVar) {
-  const { arrayExpr, param, mapPreamble, siblingOffset } = lookup;
+  const { arrayExpr, param, mapPreamble, offset } = lookup;
   ls.push(`      let __el = ${varSlotId(ev.childSlotId)}El`);
   ls.push(`      while (__el.parentElement && __el.parentElement !== ${containerVar}) __el = __el.parentElement`);
   ls.push(`      if (__el.parentElement === ${containerVar}) {`);
-  const idxOffset = siblingOffset ? ` - ${siblingOffset}` : "";
+  const idxOffset = buildLoopChildIndexSubtraction(offset ?? void 0);
   ls.push(`        const __idx = Array.from(${containerVar}.children).indexOf(__el)${idxOffset}`);
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`);
   if (mapPreamble) ls.push(`        ${mapPreamble}`);
@@ -15013,7 +15112,7 @@ function buildStaticLoopPlan(elem, unsafeLocalNames) {
     }
   }
   const indexParam = elem.index || "__idx";
-  const childIndexExpr = elem.siblingOffset ? `${indexParam} + ${elem.siblingOffset}` : indexParam;
+  const childIndexExpr = buildLoopChildIndexExpr(indexParam, elem.offset);
   return {
     kind: "static",
     containerVar: `_${varSlotId(elem.slotId)}`,
@@ -17409,6 +17508,7 @@ var init_attr_value_emitter = __esm({
 });
 
 // ../jsx/src/combine-client-js.ts
+import ts18 from "typescript";
 function combineParentChildClientJs(files) {
   const result = /* @__PURE__ */ new Map();
   const lookup = /* @__PURE__ */ new Map();
@@ -17465,30 +17565,48 @@ function combineParentChildClientJs(files) {
   return result;
 }
 function parseAndMerge(content, importsBySource, otherImports, codeSections) {
-  const codeLines = [];
-  for (const line of content.split("\n")) {
-    if (line.startsWith("import ")) {
-      if (line.includes("@bf-child:")) continue;
-      const match = line.match(/^import \{ ([^}]+) \} from ['"]([^'"]+)['"]/);
-      if (match) {
-        const names = match[1].split(",").map((n) => n.trim());
-        const source = match[2];
-        if (!importsBySource.has(source)) {
-          importsBySource.set(source, /* @__PURE__ */ new Set());
-        }
-        for (const name of names) {
-          importsBySource.get(source).add(name);
-        }
-      } else {
-        if (!otherImports.includes(line)) {
-          otherImports.push(line);
-        }
+  const sourceFile = ts18.createSourceFile(
+    "combine.js",
+    content,
+    ts18.ScriptTarget.Latest,
+    /*setParentNodes*/
+    false,
+    ts18.ScriptKind.JS
+  );
+  const importSpans = [];
+  for (const stmt of sourceFile.statements) {
+    if (!ts18.isImportDeclaration(stmt)) continue;
+    const start = stmt.getStart(sourceFile);
+    const end = stmt.getEnd();
+    importSpans.push([start, end]);
+    const stmtText = content.slice(start, end);
+    if (stmtText.includes("@bf-child:")) continue;
+    const clause = stmt.importClause;
+    const bindings = clause?.namedBindings;
+    const specifier = ts18.isStringLiteral(stmt.moduleSpecifier) ? stmt.moduleSpecifier.text : "";
+    if (clause && !clause.name && bindings && ts18.isNamedImports(bindings)) {
+      if (!importsBySource.has(specifier)) {
+        importsBySource.set(specifier, /* @__PURE__ */ new Set());
+      }
+      const set = importsBySource.get(specifier);
+      for (const el of bindings.elements) {
+        const name = el.propertyName ? `${el.propertyName.text} as ${el.name.text}` : el.name.text;
+        set.add(name);
       }
     } else {
-      codeLines.push(line);
+      if (!otherImports.includes(stmtText)) {
+        otherImports.push(stmtText);
+      }
     }
   }
-  const code = codeLines.join("\n").trim();
+  let code = "";
+  let cursor = 0;
+  for (const [start, end] of importSpans) {
+    code += content.slice(cursor, start);
+    cursor = end;
+  }
+  code += content.slice(cursor);
+  code = code.trim();
   if (code) {
     codeSections.push(code);
   }
@@ -18921,7 +19039,7 @@ var init_runtime = __esm({
 
 // src/lib/resolve-imports.ts
 import { dirname as dirname2, resolve as resolve2 } from "node:path";
-import ts18 from "typescript";
+import ts19 from "typescript";
 function shapeFromDecl(decl) {
   const clause = decl.importClause;
   if (!clause) return null;
@@ -18931,7 +19049,7 @@ function shapeFromDecl(decl) {
   }
   const bindings = clause.namedBindings;
   if (bindings) {
-    if (ts18.isNamespaceImport(bindings)) {
+    if (ts19.isNamespaceImport(bindings)) {
       shape.namespace = bindings.name.text;
     } else {
       for (const el of bindings.elements) {
@@ -18945,38 +19063,38 @@ function shapeFromDecl(decl) {
 }
 function collectExportedNames(source) {
   const names = /* @__PURE__ */ new Set();
-  const sourceFile = ts18.createSourceFile(
+  const sourceFile = ts19.createSourceFile(
     "mod.ts",
     source,
-    ts18.ScriptTarget.Latest,
+    ts19.ScriptTarget.Latest,
     /*setParents*/
     false,
-    ts18.ScriptKind.TS
+    ts19.ScriptKind.TS
   );
   function hasExport(node) {
-    if (!ts18.canHaveModifiers(node)) return false;
-    const mods = ts18.getModifiers(node);
-    return mods?.some((m) => m.kind === ts18.SyntaxKind.ExportKeyword) ?? false;
+    if (!ts19.canHaveModifiers(node)) return false;
+    const mods = ts19.getModifiers(node);
+    return mods?.some((m) => m.kind === ts19.SyntaxKind.ExportKeyword) ?? false;
   }
   function collectFromBindingName(name) {
-    if (ts18.isIdentifier(name)) {
+    if (ts19.isIdentifier(name)) {
       names.add(name.text);
       return;
     }
     for (const el of name.elements) {
-      if (ts18.isBindingElement(el)) collectFromBindingName(el.name);
+      if (ts19.isBindingElement(el)) collectFromBindingName(el.name);
     }
   }
   for (const stmt of sourceFile.statements) {
-    if (ts18.isVariableStatement(stmt) && hasExport(stmt)) {
+    if (ts19.isVariableStatement(stmt) && hasExport(stmt)) {
       for (const d of stmt.declarationList.declarations) {
         collectFromBindingName(d.name);
       }
-    } else if (ts18.isFunctionDeclaration(stmt) && hasExport(stmt) && stmt.name) {
+    } else if (ts19.isFunctionDeclaration(stmt) && hasExport(stmt) && stmt.name) {
       names.add(stmt.name.text);
-    } else if (ts18.isClassDeclaration(stmt) && hasExport(stmt) && stmt.name) {
+    } else if (ts19.isClassDeclaration(stmt) && hasExport(stmt) && stmt.name) {
       names.add(stmt.name.text);
-    } else if (ts18.isExportDeclaration(stmt) && !stmt.moduleSpecifier && stmt.exportClause && ts18.isNamedExports(stmt.exportClause)) {
+    } else if (ts19.isExportDeclaration(stmt) && !stmt.moduleSpecifier && stmt.exportClause && ts19.isNamedExports(stmt.exportClause)) {
       if (stmt.isTypeOnly) continue;
       for (const el of stmt.exportClause.elements) {
         if (el.isTypeOnly) continue;
@@ -18987,16 +19105,16 @@ function collectExportedNames(source) {
   return [...names];
 }
 function hasUseClientDirective(source) {
-  const sourceFile = ts18.createSourceFile(
+  const sourceFile = ts19.createSourceFile(
     "check.tsx",
     source,
-    ts18.ScriptTarget.Latest,
+    ts19.ScriptTarget.Latest,
     /*setParents*/
     false,
-    ts18.ScriptKind.TSX
+    ts19.ScriptKind.TSX
   );
   for (const stmt of sourceFile.statements) {
-    if (!ts18.isExpressionStatement(stmt) || !ts18.isStringLiteral(stmt.expression)) {
+    if (!ts19.isExpressionStatement(stmt) || !ts19.isStringLiteral(stmt.expression)) {
       return false;
     }
     if (stmt.expression.text === "use client") return true;
@@ -19005,53 +19123,53 @@ function hasUseClientDirective(source) {
 }
 function collectTopLevelBindings(source) {
   const names = /* @__PURE__ */ new Set();
-  const sourceFile = ts18.createSourceFile(
+  const sourceFile = ts19.createSourceFile(
     "bundle.ts",
     source,
-    ts18.ScriptTarget.Latest,
+    ts19.ScriptTarget.Latest,
     /*setParents*/
     false,
-    ts18.ScriptKind.TS
+    ts19.ScriptKind.TS
   );
   function collectFromBindingName(name) {
-    if (ts18.isIdentifier(name)) {
+    if (ts19.isIdentifier(name)) {
       names.add(name.text);
       return;
     }
     for (const el of name.elements) {
-      if (ts18.isBindingElement(el)) collectFromBindingName(el.name);
+      if (ts19.isBindingElement(el)) collectFromBindingName(el.name);
     }
   }
   for (const stmt of sourceFile.statements) {
-    if (ts18.isVariableStatement(stmt)) {
+    if (ts19.isVariableStatement(stmt)) {
       for (const d of stmt.declarationList.declarations) {
         collectFromBindingName(d.name);
       }
-    } else if (ts18.isFunctionDeclaration(stmt) && stmt.name) {
+    } else if (ts19.isFunctionDeclaration(stmt) && stmt.name) {
       names.add(stmt.name.text);
-    } else if (ts18.isClassDeclaration(stmt) && stmt.name) {
+    } else if (ts19.isClassDeclaration(stmt) && stmt.name) {
       names.add(stmt.name.text);
     }
   }
   return names;
 }
 function stripImportsAndExports(body) {
-  const sourceFile = ts18.createSourceFile(
+  const sourceFile = ts19.createSourceFile(
     "body.ts",
     body,
-    ts18.ScriptTarget.Latest,
+    ts19.ScriptTarget.Latest,
     /*setParents*/
     false,
-    ts18.ScriptKind.TS
+    ts19.ScriptKind.TS
   );
   const spans = [];
   const hoistedImports = [];
   for (const stmt of sourceFile.statements) {
-    if (ts18.isImportDeclaration(stmt)) {
+    if (ts19.isImportDeclaration(stmt)) {
       const start = stmt.getStart(sourceFile);
       const end = stmt.getEnd();
       const specifier = stmt.moduleSpecifier;
-      if (ts18.isStringLiteral(specifier)) {
+      if (ts19.isStringLiteral(specifier)) {
         const path23 = specifier.text;
         const isRelative = path23.startsWith("./") || path23.startsWith("../");
         if (!isRelative) {
@@ -19061,24 +19179,24 @@ function stripImportsAndExports(body) {
       spans.push([start, end]);
       continue;
     }
-    if (ts18.isExportDeclaration(stmt)) {
+    if (ts19.isExportDeclaration(stmt)) {
       spans.push([stmt.getStart(sourceFile), stmt.getEnd()]);
       continue;
     }
-    if (ts18.isExportAssignment(stmt)) {
-      const exportKw = stmt.getChildren(sourceFile).find((c) => c.kind === ts18.SyntaxKind.ExportKeyword);
-      const defaultKw = stmt.getChildren(sourceFile).find((c) => c.kind === ts18.SyntaxKind.DefaultKeyword);
-      const equalsKw = stmt.getChildren(sourceFile).find((c) => c.kind === ts18.SyntaxKind.EqualsToken);
+    if (ts19.isExportAssignment(stmt)) {
+      const exportKw = stmt.getChildren(sourceFile).find((c) => c.kind === ts19.SyntaxKind.ExportKeyword);
+      const defaultKw = stmt.getChildren(sourceFile).find((c) => c.kind === ts19.SyntaxKind.DefaultKeyword);
+      const equalsKw = stmt.getChildren(sourceFile).find((c) => c.kind === ts19.SyntaxKind.EqualsToken);
       const start = exportKw?.getStart(sourceFile) ?? stmt.getStart(sourceFile);
       const end = (defaultKw ?? equalsKw)?.getEnd() ?? exportKw?.getEnd() ?? stmt.getStart(sourceFile);
       if (end > start) spans.push([start, end]);
       continue;
     }
-    if (ts18.canHaveModifiers(stmt)) {
-      const mods = ts18.getModifiers(stmt);
+    if (ts19.canHaveModifiers(stmt)) {
+      const mods = ts19.getModifiers(stmt);
       if (!mods) continue;
       for (const mod of mods) {
-        if (mod.kind === ts18.SyntaxKind.ExportKeyword) {
+        if (mod.kind === ts19.SyntaxKind.ExportKeyword) {
           const start = mod.getStart(sourceFile);
           let end = mod.getEnd();
           while (end < body.length && /\s/.test(body[end])) end++;
@@ -19187,48 +19305,48 @@ function buildDanglingReferenceMessage(binding, s) {
 function isValueReference(id) {
   const parent = id.parent;
   if (!parent) return false;
-  if (ts18.isPropertyAccessExpression(parent) && parent.name === id) return false;
-  if (ts18.isPropertyAssignment(parent) && parent.name === id) return false;
-  if ((ts18.isMethodDeclaration(parent) || ts18.isGetAccessorDeclaration(parent) || ts18.isSetAccessorDeclaration(parent)) && parent.name === id) {
+  if (ts19.isPropertyAccessExpression(parent) && parent.name === id) return false;
+  if (ts19.isPropertyAssignment(parent) && parent.name === id) return false;
+  if ((ts19.isMethodDeclaration(parent) || ts19.isGetAccessorDeclaration(parent) || ts19.isSetAccessorDeclaration(parent)) && parent.name === id) {
     return false;
   }
-  if (ts18.isVariableDeclaration(parent) && parent.name === id) return false;
-  if (ts18.isFunctionDeclaration(parent) && parent.name === id) return false;
-  if (ts18.isFunctionExpression(parent) && parent.name === id) return false;
-  if (ts18.isClassDeclaration(parent) && parent.name === id) return false;
-  if (ts18.isClassExpression(parent) && parent.name === id) return false;
-  if (ts18.isParameter(parent) && parent.name === id) return false;
-  if (ts18.isBindingElement(parent) && (parent.name === id || parent.propertyName === id)) return false;
-  if (ts18.isLabeledStatement(parent) && parent.label === id) return false;
-  if (ts18.isBreakOrContinueStatement(parent) && parent.label === id) return false;
-  if (ts18.isImportSpecifier(parent) && (parent.name === id || parent.propertyName === id)) return false;
-  if (ts18.isExportSpecifier(parent) && (parent.name === id || parent.propertyName === id)) return false;
-  if (ts18.isImportClause(parent) && parent.name === id) return false;
-  if (ts18.isNamespaceImport(parent) && parent.name === id) return false;
-  if (ts18.isQualifiedName(parent) && parent.right === id) return false;
+  if (ts19.isVariableDeclaration(parent) && parent.name === id) return false;
+  if (ts19.isFunctionDeclaration(parent) && parent.name === id) return false;
+  if (ts19.isFunctionExpression(parent) && parent.name === id) return false;
+  if (ts19.isClassDeclaration(parent) && parent.name === id) return false;
+  if (ts19.isClassExpression(parent) && parent.name === id) return false;
+  if (ts19.isParameter(parent) && parent.name === id) return false;
+  if (ts19.isBindingElement(parent) && (parent.name === id || parent.propertyName === id)) return false;
+  if (ts19.isLabeledStatement(parent) && parent.label === id) return false;
+  if (ts19.isBreakOrContinueStatement(parent) && parent.label === id) return false;
+  if (ts19.isImportSpecifier(parent) && (parent.name === id || parent.propertyName === id)) return false;
+  if (ts19.isExportSpecifier(parent) && (parent.name === id || parent.propertyName === id)) return false;
+  if (ts19.isImportClause(parent) && parent.name === id) return false;
+  if (ts19.isNamespaceImport(parent) && parent.name === id) return false;
+  if (ts19.isQualifiedName(parent) && parent.right === id) return false;
   return true;
 }
 function detectStrippedReferences(bundleSource, stripped) {
   if (stripped.length === 0) return [];
   let sf;
   try {
-    sf = ts18.createSourceFile(
+    sf = ts19.createSourceFile(
       "bundle.js",
       bundleSource,
-      ts18.ScriptTarget.Latest,
+      ts19.ScriptTarget.Latest,
       /*setParents*/
       true,
-      ts18.ScriptKind.JS
+      ts19.ScriptKind.JS
     );
   } catch {
     return [];
   }
   const firstReference = /* @__PURE__ */ new Map();
   function visit3(node) {
-    if (ts18.isIdentifier(node) && isValueReference(node)) {
+    if (ts19.isIdentifier(node) && isValueReference(node)) {
       if (!firstReference.has(node.text)) firstReference.set(node.text, node);
     }
-    ts18.forEachChild(node, visit3);
+    ts19.forEachChild(node, visit3);
   }
   visit3(sf);
   const errors = [];
@@ -19258,18 +19376,18 @@ function detectStrippedReferences(bundleSource, stripped) {
   return errors;
 }
 async function walkAndCollect(content, searchDirs, modules, visiting, loggingPath, stripped, stubDeps, nextId) {
-  const sourceFile = ts18.createSourceFile(
+  const sourceFile = ts19.createSourceFile(
     "walk.js",
     content,
-    ts18.ScriptTarget.Latest,
+    ts19.ScriptTarget.Latest,
     /*setParents*/
     false,
-    ts18.ScriptKind.JS
+    ts19.ScriptKind.JS
   );
   const sites = [];
   for (const stmt of sourceFile.statements) {
-    if (!ts18.isImportDeclaration(stmt)) continue;
-    if (!ts18.isStringLiteral(stmt.moduleSpecifier)) continue;
+    if (!ts19.isImportDeclaration(stmt)) continue;
+    if (!ts19.isStringLiteral(stmt.moduleSpecifier)) continue;
     const spec = stmt.moduleSpecifier.text;
     if (!spec.startsWith("./") && !spec.startsWith("../")) continue;
     const start = stmt.getStart(sourceFile);
@@ -19721,7 +19839,7 @@ var init_assets_ignore = __esm({
 });
 
 // src/lib/build.ts
-import ts19 from "typescript";
+import ts20 from "typescript";
 import { mkdir, readdir, stat, unlink } from "node:fs/promises";
 import { resolve as resolve6, basename, relative as relative2, dirname as dirname3, isAbsolute as isAbsolute2 } from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
@@ -20178,12 +20296,7 @@ async function build(config, options = {}) {
       try {
         let content = await readText(filePath);
         const before = content;
-        if (content.includes("@barefootjs/client")) {
-          content = content.replace(
-            /from ['"]@barefootjs\/client(?:\/[^'"]*)?['"]/g,
-            `from '${rel}'`
-          );
-        }
+        content = rewriteBarefootClientSpecifiers(content, rel);
         content = mergeDuplicateNamedImports(content);
         if (content !== before && await writeIfChanged(filePath, content)) {
           anyOutputChanged = true;
@@ -20272,7 +20385,7 @@ async function build(config, options = {}) {
   };
 }
 function extractBareImports(code) {
-  const { importedFiles } = ts19.preProcessFile(code, true, true);
+  const { importedFiles } = ts20.preProcessFile(code, true, true);
   const specifiers = /* @__PURE__ */ new Set();
   for (const { fileName } of importedFiles) {
     if (!fileName.startsWith(".") && !fileName.startsWith("/") && !fileName.includes("://")) {
@@ -20337,13 +20450,82 @@ function effectiveOutName(tplPath, entryBaseNoExt) {
   const entryDir = entryBaseNoExt.includes("/") ? entryBaseNoExt.slice(0, entryBaseNoExt.lastIndexOf("/")) : "";
   return entryDir ? `${entryDir}/${bn}` : bn;
 }
+function topLevelImportLines(content) {
+  const lines = /* @__PURE__ */ new Set();
+  const sourceFile = ts20.createSourceFile(
+    "merge.js",
+    content,
+    ts20.ScriptTarget.Latest,
+    /*setParentNodes*/
+    true,
+    ts20.ScriptKind.JS
+  );
+  for (const stmt of sourceFile.statements) {
+    if (ts20.isImportDeclaration(stmt)) {
+      const { line } = sourceFile.getLineAndCharacterOfPosition(stmt.getStart(sourceFile));
+      lines.add(line);
+    }
+  }
+  return lines;
+}
+function rewriteBarefootClientSpecifiers(content, rel) {
+  if (!content.includes("@barefootjs/client")) return content;
+  const sourceFile = ts20.createSourceFile(
+    "client.js",
+    content,
+    ts20.ScriptTarget.Latest,
+    /*setParentNodes*/
+    true,
+    ts20.ScriptKind.JS
+  );
+  const isBarefootClient = (s) => s === "@barefootjs/client" || s.startsWith("@barefootjs/client/");
+  const spans = [];
+  const visit3 = (node) => {
+    if (ts20.isImportDeclaration(node) || ts20.isExportDeclaration(node)) {
+      const ms = node.moduleSpecifier;
+      if (ms && ts20.isStringLiteral(ms) && isBarefootClient(ms.text)) {
+        spans.push([ms.getStart(sourceFile), ms.getEnd()]);
+      }
+    } else if (ts20.isCallExpression(node) && node.expression.kind === ts20.SyntaxKind.ImportKeyword) {
+      const arg = node.arguments[0];
+      if (arg && ts20.isStringLiteral(arg) && isBarefootClient(arg.text)) {
+        spans.push([arg.getStart(sourceFile), arg.getEnd()]);
+      }
+    }
+    ts20.forEachChild(node, visit3);
+  };
+  visit3(sourceFile);
+  if (spans.length === 0) return content;
+  spans.sort((a, b) => b[0] - a[0]);
+  let out = content;
+  for (const [start, end] of spans) {
+    out = out.slice(0, start) + `'${rel}'` + out.slice(end);
+  }
+  return out;
+}
 function mergeDuplicateNamedImports(content) {
   const lines = content.split("\n");
   const namedImportRe = /^import\s+\{\s*([^}]+)\s*\}\s+from\s+(['"])([^'"]+)\2\s*;?\s*$/;
   const bySource = /* @__PURE__ */ new Map();
   const dropIndices = /* @__PURE__ */ new Set();
   let changed = false;
+  {
+    const seen = /* @__PURE__ */ new Set();
+    let possibleDuplicate = false;
+    for (const line of lines) {
+      const m = line.match(namedImportRe);
+      if (!m) continue;
+      if (seen.has(m[3])) {
+        possibleDuplicate = true;
+        break;
+      }
+      seen.add(m[3]);
+    }
+    if (!possibleDuplicate) return content;
+  }
+  const realImportLines = topLevelImportLines(content);
   lines.forEach((line, idx) => {
+    if (!realImportLines.has(idx)) return;
     const m = line.match(namedImportRe);
     if (!m) return;
     const names = m[1].split(",").map((s) => s.trim()).filter(Boolean);
@@ -23847,7 +24029,13 @@ export default createConfig({
     }
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "dist/components"]
+  // Do NOT exclude dist/components here. The server imports the compiled
+  // SSR templates from there (see the @/components/* paths above), and
+  // tsx applies the JSX transform per-file honouring this include/
+  // exclude \u2014 an excluded .tsx loses jsxImportSource and falls back to
+  // the classic React runtime, so SSR throws "ReferenceError: React is
+  // not defined" at the first render. They must stay in scope.
+  "exclude": ["node_modules"]
 }
 `;
     HONO_NODE_ADAPTER = {
@@ -27567,9 +27755,9 @@ function findProjectConfig(startDir) {
   let dir = path.resolve(startDir);
   const { root: fsRoot } = path.parse(dir);
   while (true) {
-    const ts20 = path.join(dir, "barefoot.config.ts");
-    if (existsSync2(ts20)) {
-      return { dir, tsConfigPath: ts20 };
+    const ts21 = path.join(dir, "barefoot.config.ts");
+    if (existsSync2(ts21)) {
+      return { dir, tsConfigPath: ts21 };
     }
     if (dir === fsRoot) return null;
     dir = path.dirname(dir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/cli",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "CLI for agent-driven UI component discovery and scaffolding",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,7 +31,7 @@
     "typescript": "^5.0.0"
   },
   "devDependencies": {
-    "@barefootjs/jsx": "0.5.2",
+    "@barefootjs/jsx": "0.5.3",
     "@types/node": "^22.0.0"
   }
 }