@barefootjs/cli 0.5.1 → 0.5.3

package/dist/docs/core/llms.txt

@@ -12,6 +12,7 @@
 
 ## Reactivity
 
+- [batch](https://barefootjs.dev/docs/reactivity/batch.md): Groups multiple signal writes so dependent effects and memos run once, after all writes complete.
 - [createEffect](https://barefootjs.dev/docs/reactivity/create-effect.md): Runs a function and re-runs it whenever its tracked signal dependencies change.
 - [createMemo](https://barefootjs.dev/docs/reactivity/create-memo.md): Creates a cached derived value that recomputes only when its dependencies change.
 - [createSignal](https://barefootjs.dev/docs/reactivity/create-signal.md): Creates a reactive getter/setter pair for managing state.

package/dist/docs/core/reactivity/batch.md

@@ -0,0 +1,135 @@
+---
+title: batch
+description: Groups multiple signal writes so dependent effects and memos run once, after all writes complete.
+---
+
+# batch
+
+Groups multiple signal writes so that dependent effects and memos run **once**,
+after all the writes inside the batch complete — instead of once per write.
+
+```tsx
+import { batch } from '@barefootjs/client'
+
+batch<T>(fn: () => T): T
+```
+
+Returns the value produced by `fn`.
+
+## Default behavior (no batch)
+
+BarefootJS propagates updates **synchronously**: each setter call immediately
+re-runs every subscriber. This keeps reads-after-writes predictable — after a
+setter returns, derived memos, effects, and the DOM already reflect the new value.
+
+The cost is that writing N signals that share a subscriber re-runs that
+subscriber N times, and the subscriber briefly observes intermediate states
+where some signals are updated and others are not:
+
+```tsx
+const [x, setX] = createSignal(40)
+const [y, setY] = createSignal(60)
+
+createEffect(() => {
+  // depends on both x and y
+  send({ x: x(), y: y() })
+})
+
+setX(70) // effect runs — observes x=70, y=60 (intermediate)
+setY(30) // effect runs again — observes x=70, y=30
+```
+
+Beyond its initial run on creation, the effect ran twice more — once per write —
+and saw a transient `x=70, y=60` state.
+
+## With batch
+
+```tsx
+batch(() => {
+  setX(70)
+  setY(30)
+})
+// effect runs once, observing x=70, y=30
+```
+
+Inside `batch`, writes are collected and dependent subscribers are de-duplicated,
+so each runs **exactly once** after the batch ends — and never observes an
+intermediate, half-updated state.
+
+## When to use
+
+When a single handler updates several signals that feed shared effects/memos,
+`batch` collapses the work into one update pass — and keeps the subscriber from
+running while a cross-field invariant is temporarily broken:
+
+```tsx
+const reset = () => {
+  batch(() => {
+    setName('')
+    setEmail('')
+    setAge(0)
+    // ...20 more fields
+  })
+  // every subscriber ran once, not once-per-field
+}
+```
+
+## Caveats
+
+### Derived values are stale *inside* the batch
+
+`batch` defers the work that recomputes derived values. Plain signal reads return
+the new value immediately, but **memos and effect-driven values stay stale until
+the batch ends**:
+
+```tsx
+const [n, setN] = createSignal(1)
+const doubled = createMemo(() => n() * 2)
+
+batch(() => {
+  setN(10)
+  n()       // 10  — plain signal read is fresh
+  doubled() // 2   — STALE; the memo hasn't recomputed yet
+})
+doubled()   // 20  — recomputed after the batch ends
+```
+
+If you need the recomputed value, read it after the batch.
+
+### `await` escapes the batch
+
+`batch` only covers the **synchronous** portion of `fn`. Wrapping an async
+function in `batch` groups only the writes before the first `await` — everything
+after runs ungrouped, and the promise `batch` returns is easy to leave floating.
+
+Instead, wrap each synchronous group of writes in its own `batch`, with `await`
+between the groups:
+
+```tsx
+const onSubmit = async () => {
+  batch(() => {
+    setLoading(true)
+    setError(null)
+  })
+
+  try {
+    const result = await save()
+    batch(() => {
+      setLoading(false)
+      setResult(result)
+    })
+  } catch (err) {
+    batch(() => {
+      setLoading(false)
+      setError(err)
+    })
+  }
+}
+```
+
+## Note
+
+`batch` is an **opt-in** optimization. Forgetting it is never a correctness bug —
+code still works, just with extra subscriber runs. Reach for `batch` when a
+handler writes many signals that share subscribers, or when an effect must not
+observe a partially-updated state.

package/dist/docs/core/reactivity.md

@@ -9,7 +9,7 @@ All reactive primitives are imported from `@barefootjs/client`:
 
 ```tsx
 "use client"
-import { createSignal, createEffect, createMemo, onMount, onCleanup, untrack } from '@barefootjs/client'
+import { createSignal, createEffect, createMemo, onMount, onCleanup, untrack, batch } from '@barefootjs/client'
 ```
 
 ## API Reference
@@ -22,6 +22,7 @@ import { createSignal, createEffect, createMemo, onMount, onCleanup, untrack } f
 | [`onMount`](./reactivity/on-mount.md) | Run once on component initialization |
 | [`onCleanup`](./reactivity/on-cleanup.md) | Register cleanup for effects and lifecycle |
 | [`untrack`](./reactivity/untrack.md) | Read signals without tracking dependencies |
+| [`batch`](./reactivity/batch.md) | Group signal writes so subscribers run once |
 
 ## Guides
 

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}}`;
       }
@@ -2450,6 +2478,24 @@ function getSourceLocation(node, sourceFile, filePath) {
     }
   };
 }
+function membersToProperties(members, sourceFile) {
+  return members.filter(ts6.isPropertySignature).map((member) => ({
+    name: propertyNameText(member.name, sourceFile),
+    type: typeNodeToTypeInfo(member.type, sourceFile) ?? {
+      kind: "unknown",
+      raw: "unknown"
+    },
+    optional: !!member.questionToken,
+    readonly: !!member.modifiers?.some(
+      (m) => m.kind === ts6.SyntaxKind.ReadonlyKeyword
+    )
+  }));
+}
+function propertyNameText(name, sourceFile) {
+  if (!name) return "";
+  if (ts6.isStringLiteral(name) || ts6.isNumericLiteral(name)) return name.text;
+  return name.getText(sourceFile);
+}
 function typeNodeToTypeInfo(typeNode, sourceFile) {
   if (!typeNode) return null;
   const raw = typeNode.getText(sourceFile);
@@ -2488,20 +2534,21 @@ function typeNodeToTypeInfo(typeNode, sourceFile) {
     return {
       kind: "object",
       raw,
-      properties: typeNode.members.filter(ts6.isPropertySignature).map((member) => ({
-        name: member.name?.getText(sourceFile) ?? "",
-        type: typeNodeToTypeInfo(member.type, sourceFile) ?? {
-          kind: "unknown",
-          raw: "unknown"
-        },
-        optional: !!member.questionToken,
-        readonly: !!member.modifiers?.some(
-          (m) => m.kind === ts6.SyntaxKind.ReadonlyKeyword
-        )
-      }))
+      properties: membersToProperties(typeNode.members, sourceFile)
     };
   }
   if (ts6.isTypeReferenceNode(typeNode)) {
+    const refName = ts6.isIdentifier(typeNode.typeName) ? typeNode.typeName.text : "";
+    if ((refName === "Array" || refName === "ReadonlyArray") && typeNode.typeArguments?.length === 1) {
+      return {
+        kind: "array",
+        raw,
+        elementType: typeNodeToTypeInfo(typeNode.typeArguments[0], sourceFile) ?? {
+          kind: "unknown",
+          raw: "unknown"
+        }
+      };
+    }
     return {
       kind: "interface",
       raw
@@ -3679,14 +3726,17 @@ function collectInterfaceDefinition(node, ctx2) {
     kind: "interface",
     name: node.name.text,
     definition: node.getText(ctx2.sourceFile),
+    properties: membersToProperties(node.members, ctx2.sourceFile),
     loc: getSourceLocation(node, ctx2.sourceFile, ctx2.filePath)
   });
 }
 function collectTypeAliasDefinition(node, ctx2) {
+  const properties = ts7.isTypeLiteralNode(node.type) ? membersToProperties(node.type.members, ctx2.sourceFile) : void 0;
   ctx2.typeDefinitions.push({
     kind: "type",
     name: node.name.text,
     definition: node.getText(ctx2.sourceFile),
+    properties,
     loc: getSourceLocation(node, ctx2.sourceFile, ctx2.filePath)
   });
 }
@@ -5882,7 +5932,7 @@ function checkSupport(expr) {
           return {
             supported: false,
             level: "L5_UNSUPPORTED",
-            reason: `Higher-order method '${methodName}()' requires client-side evaluation. Use @client directive or pre-compute in Go.`
+            reason: `Method '${methodName}()' has no template lowering and requires client-side evaluation. Wrap the expression in /* @client */ to defer it to hydration, or pre-compute the value before rendering.`
           };
         }
       }
@@ -6172,7 +6222,7 @@ var init_expression_parser = __esm({
       "some",
       "forEach",
       "flatMap",
-      "flat"
+      "flat",
       // #1448 Tier A — Array methods. Each method PR adds the lowering
       // (typically a new `array-method` variant or runtime helper) and
       // removes its row here. See packages/adapter-tests/fixtures/methods/.
@@ -6202,6 +6252,34 @@ var init_expression_parser = __esm({
       // `bf_lower` / `bf_upper` (Go) and Perl's native `lc` / `uc` (Mojo).
       // `trim` lowers via the `array-method` IR + `bf_trim` (Go) and a
       // Perl regex strip (Mojo).
+      //
+      // #1448 follow-up — String methods that have NO lowering yet. These
+      // were previously absent from this gate, so `isSupported` reported
+      // them "supported" and the adapters emitted a raw method call
+      // (`{{.Name.StartsWith "a"}}` on Go, `$name->{startsWith}('a')` on
+      // Mojo) with no build diagnostic — a silent footgun that only
+      // surfaced as a crash at template-render time. Listing them here
+      // makes the build fail loudly with BF101 (the same treatment the
+      // unsupported array methods above get), pointing users at the
+      // `/* @client */` escape hatch. Each name drops off as its lowering
+      // lands. See #1448 "Unsupported string methods" Tier B / Tier C.
+      "split",
+      "startsWith",
+      "endsWith",
+      "replace",
+      "replaceAll",
+      "repeat",
+      "padStart",
+      "padEnd",
+      "charAt",
+      "charCodeAt",
+      "codePointAt",
+      "normalize",
+      "substring",
+      "substr",
+      "match",
+      "matchAll",
+      "search"
     ]);
   }
 });
@@ -8260,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) {
@@ -9540,29 +9618,100 @@ 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();
-  walkIR(root, null, {
-    element: ({ node: el, descend }) => {
-      let nonLoopCount = 0;
-      for (const child of el.children) {
-        if (child.type === "loop") {
-          if (nonLoopCount > 0) offsets.set(child, nonLoopCount);
-        } else if (producesDomChild(child)) {
-          nonLoopCount++;
+  const recordRun = (children, preceding) => {
+    for (const child of children) {
+      if (child.type === "loop") {
+        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);
       }
-      descend();
     }
-    // All container kinds (fragment / component / provider / async / loop /
-    // conditional / if-statement) rely on walkIR's default descent with the
-    // same scope. Leaves (text / expression / slot) are no-ops.
+  };
+  const containerVisit = ({ node, descend }) => {
+    recordRun(node.children, []);
+    descend();
+  };
+  walkIR(root, null, {
+    element: containerVisit,
+    component: containerVisit,
+    fragment: containerVisit,
+    provider: containerVisit,
+    async: containerVisit
+    // `loop` / `conditional` / `if-statement` are not flat sibling
+    // containers (their children are item bodies / branches), and leaves
+    // (text / expression / slot) have no children — all rely on walkIR's
+    // default descent with the same scope.
   });
   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;
@@ -9648,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) {
@@ -9858,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
@@ -10159,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";
@@ -10169,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,
@@ -10728,6 +10879,8 @@ var init_imports = __esm({
       "splitProps",
       "spreadAttrs",
       "styleToCss",
+      "escapeAttr",
+      "escapeText",
       "qsa",
       "qsaItem",
       "qsaChildScope",
@@ -12565,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)
   };
@@ -12583,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
@@ -13405,7 +13558,7 @@ function buildStaticArrayDelegationPlan(elem) {
       arrayExpr: buildChainedArrayExpr(elem),
       param: elem.param,
       mapPreamble: elem.mapPreamble ?? null,
-      siblingOffset: elem.siblingOffset ?? null
+      offset: elem.offset ?? null
     }
   };
 }
@@ -13559,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') }`
@@ -14622,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}`);
@@ -14954,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)}`,
@@ -17350,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();
@@ -17406,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);
   }
@@ -18862,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;
@@ -18872,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) {
@@ -18886,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;
@@ -18928,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;
@@ -18946,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) {
@@ -19002,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++;
@@ -19128,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 = [];
@@ -19199,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);
@@ -19662,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";
@@ -20119,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;
@@ -20213,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("://")) {
@@ -20278,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);
@@ -23788,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 = {
@@ -27508,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.1",
+  "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.1",
+    "@barefootjs/jsx": "0.5.3",
     "@types/node": "^22.0.0"
   }
 }