@barefootjs/cli 0.26.4 → 0.27.0

package/dist/docs/core/advanced/compiler-internals.md

@@ -195,7 +195,7 @@ createEffect(() => {
 ### 4. Code Generation Order
 
 ```javascript
-import { $, $t, createEffect, createMemo, createSignal, hydrate, onMount } from '@barefootjs/client'
+import { $, createEffect, createMemo, createSignal, escapeTextOrNode, hydrate, lazySlots, onMount } from '@barefootjs/client/runtime'
 
 export function initCounter(__scope, _p = {}) {
   if (!__scope) return
@@ -216,15 +216,16 @@ export function initCounter(__scope, _p = {}) {
   const doubled = createMemo(() => count() * 2)
 
   // 4. Element references (always destructured, always returns array)
-  //    $()  — regular elements:  querySelector('[bf="id"]') within scope
-  //    $t() — text nodes:        find comment marker <!--bf:id-->
+  //    $() — regular elements: querySelector('[bf="id"]') within scope
   const [_s3] = $(__scope, 's3')
-  const [_s0, _s2] = $t(__scope, 's0', 's2')
 
-  // 5. Dynamic text updates
+  // 5. Dynamic content updates — the compiler emits a claim plan (data)
+  //    per slot; lazySlots() claims the <!--bf:id-->…<!--/--> marker
+  //    range once on first write, then writes through the held reference
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   // 6. Reactive attribute updates
@@ -266,7 +267,7 @@ hydrate('Counter', {
 Only used imports are included:
 
 ```javascript
-import { $, $t, createEffect, createMemo, createSignal, hydrate, onMount } from '@barefootjs/client'
+import { $, createEffect, createMemo, createSignal, escapeTextOrNode, hydrate, lazySlots, onMount } from '@barefootjs/client/runtime'
 ```
 
 ### 6. Template Registration

package/dist/docs/core/advanced/performance.md

@@ -51,7 +51,7 @@ The compiler detects static arrays and skips reconciliation:
 const tabs = ['Home', 'About', 'Contact']
 {tabs.map(tab => <Tab label={tab} />)}
 
-// Dynamic — reconcileElements needed
+// Dynamic — keyed reconciliation (mapArray) needed
 const [items, setItems] = createSignal([...])
 {items().map(item => <Item key={item.id} data={item} />)}
 ```

package/dist/docs/core/core-concepts/how-it-works.mdx

@@ -82,7 +82,7 @@ export function Counter({ __instanceId, ... }) {
 Client JS (Phase 2b):
 
 ```js
-import { $, $t, createEffect, createSignal, hydrate } from '@barefootjs/client'
+import { $, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initCounter(__scope, _p = {}) {
   if (!__scope) return
@@ -90,11 +90,13 @@ export function initCounter(__scope, _p = {}) {
   const [count, setCount] = createSignal(0)
 
   const [_s1] = $(__scope, 's1')       // element lookup
-  const [_s0] = $t(__scope, 's0')      // text node lookup
 
+  // Content slot: claimed lazily from the <!--bf:s0-->…<!--/--> marker
+  // pair on first write, then updated through the held reference
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    if (_s0) _s0.nodeValue = String(__val ?? '')
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   if (_s1) _s1.addEventListener('click', () => { setCount(n => n + 1) })
@@ -102,7 +104,7 @@ export function initCounter(__scope, _p = {}) {
 
 hydrate('Counter', {
   init: initCounter,
-  template: (_p) => `<button bf="s1"> Count: <!--bf:s0-->${(0)}<!--/--></button>`
+  template: (_p) => `<button bf="s1"> Count: <!--bf:s0-->${escapeText((0))}<!--/--></button>`
 })
 ```
 
@@ -135,9 +137,11 @@ Marker-driven hydration attaches behavior to server-rendered HTML.
 4. Init function runs per scope — signals, effects, handlers
 5. Runtime tracks scopes to prevent double initialization
 
-### Scoped Queries
+### Scoped Queries and Slot Claiming
 
-`$()` and `$t()` search within a scope, excluding child component scopes:
+Element lookups (`$()`) and content-slot claims (`claimSlots()` /
+`lazySlots()`) both operate within a scope, excluding child component
+scopes:
 
 ```html
 <div bf-s="TodoApp_x1">
@@ -148,4 +152,16 @@ Marker-driven hydration attaches behavior to server-rendered HTML.
 </div>
 ```
 
-`$(__scope, 's0')` in TodoApp finds `<h1>`, not the `<span>` inside TodoItem. The `~` prefix marks a child scope excluded from parent queries.
+`$(__scope, 's0')` in TodoApp finds `<h1>`, not the `<span>` inside
+TodoItem. The `~` prefix marks a child scope excluded from parent
+queries.
+
+Dynamic *content* (reactive text and markup regions) is not looked up
+per update. Instead the compiler emits a **claim plan** — a data
+description of each slot (`{ id, kind, path }`) — and the runtime claims
+the slot's DOM position **once**: `lazySlots()` scans for the slot's
+`<!--bf:id-->…<!--/-->` marker pair on the first write (skipping child
+scopes, same as `$()`), holds the reference, and every later write goes
+through that held reference with no re-scanning. `claimSlots()` is the
+eager variant used where content may be mutated before the first write
+(streaming, portals).

package/dist/docs/core/introduction.mdx

@@ -63,7 +63,7 @@ export function Counter({ __instanceId, ... }) {
 **Client script** — Wires up only the interactive parts:
 
 ```js
-import { $, $t, createEffect, createSignal, hydrate } from '@barefootjs/client'
+import { $, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initCounter(__scope, _p = {}) {
   if (!__scope) return
@@ -71,11 +71,13 @@ export function initCounter(__scope, _p = {}) {
   const [count, setCount] = createSignal(0)
 
   const [_s1] = $(__scope, 's1')       // find element with bf="s1"
-  const [_s0] = $t(__scope, 's0')      // find text node at <!--bf:s0-->
 
+  // Claim the content slot between <!--bf:s0--> and <!--/--> on first
+  // write; later writes reuse the claimed reference (no re-scanning)
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    if (_s0) _s0.nodeValue = String(__val ?? '')
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   if (_s1) _s1.addEventListener('click', () => { setCount(n => n + 1) })
@@ -83,6 +85,6 @@ export function initCounter(__scope, _p = {}) {
 
 hydrate('Counter', {
   init: initCounter,
-  template: (_p) => `<button bf="s1"> Count: <!--bf:s0-->${(0)}<!--/--></button>`
+  template: (_p) => `<button bf="s1"> Count: <!--bf:s0-->${escapeText((0))}<!--/--></button>`
 })
 ```

package/dist/docs/core/rendering/client-directive.md

@@ -32,23 +32,40 @@ See [JSX Compatibility — Limitations](./jsx-compatibility.md#limitations) for
 
 ## How It Works
 
-The compiler skips template generation for the expression. The server outputs a comment marker; the client JS evaluates it:
+The compiler skips template generation for the expression: the server can never evaluate it, so the SSR-rendered width is always zero. The client claims a slot for it and writes the real value once the browser evaluates the expression — the general case behind both compiled shapes below (`spec/slot-unification.md` §4).
 
-**Server output:**
+**Claimed slot (the common case):** a marker pair is still emitted so the client has an anchor comment to claim against.
 
 ```html
-<!--bf-client:s2--><!--/-->
+<!-- server output -->
+<!--bf:s0--><!--/--> items left
 ```
 
-**Client JS:**
+```js
+// client JS
+{ const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'text', path: [] }])
+createEffect(() => {
+  __bfw_s0('s0', todos().filter(t => !t.done).length)
+}) }
+```
+
+**Markerless elision (Step B):** when the expression is the ONLY content of its own element — not adjacent to other text/expressions, and not inside a loop or conditional branch — the compiler proves a static child-index path to the slot's position and drops the marker pair entirely from both SSR and CSR output. `<strong>{/* @client */ todos().filter(t => !t.done).length}</strong>` from the [TodoApp example](https://github.com/piconic-ai/barefootjs/blob/main/integrations/shared/components/TodoApp.tsx) qualifies:
+
+```html
+<!-- server output -->
+<strong bf="s1"></strong>
+```
 
 ```js
-// @client: s2
+// client JS
+{ const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'text', path: [0, 0], markerless: true }])
 createEffect(() => {
-  updateClientMarker(__scope, 's2', todos().filter(t => !t.done).length)
-})
+  __bfw_s0('s0', todos().filter(t => !t.done).length)
+}) }
 ```
 
+Either way, the claim happens lazily on the first write — nothing is touched until the effect actually runs — and every later write goes through the held reference, never re-scanning the DOM (`packages/client/src/runtime/claim-slots.ts`).
+
 
 ## Examples
 

package/dist/index.js

@@ -3926,6 +3926,10 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       return escapeHtml(node.value);
     case "expression": {
       if (node.expr === "null" || node.expr === "undefined") return "";
+      if (node.markerless) {
+        const bare = wrapInterpolation(wrapExpr(node.expr));
+        return `\${${bare}}`;
+      }
       const inner = wrapInterpolation(wrapExpr(node.expr));
       const valueExpr = node.joinArrayChild ? `Array.isArray(${inner}) ? ${inner}.join('') : (${inner} ?? '')` : inner;
       if (node.slotId) {
@@ -4741,7 +4745,7 @@ function generateCsrTemplateWithOpts(node, opts) {
     case "expression":
       if (node.expr === "null" || node.expr === "undefined") return "";
       if (node.clientOnly && node.slotId) {
-        return `<!--bf-client:${node.slotId}--><!--/-->`;
+        return `<!--bf:${node.slotId}--><!--/-->`;
       }
       {
         const transformed = transformExpr(node.expr, node.templateExpr);
@@ -14323,7 +14327,11 @@ function collectElements(node, ctx2, siblingOffsets, insideConditional = false)
     },
     expression: ({ node: ex, scope: inCond }) => {
       if (ex.clientOnly && ex.slotId) {
-        ctx2.clientOnlyElements.push({ slotId: ex.slotId, expression: ex.expr });
+        ctx2.clientOnlyElements.push({
+          slotId: ex.slotId,
+          expression: ex.expr,
+          elidedPath: ex.markerless ? ex.elidedPath : void 0
+        });
         return;
       }
       if (!ex.slotId || inCond) return;
@@ -15327,13 +15335,11 @@ var init_imports = __esm({
       "onMount",
       "hydrate",
       "insert",
-      "reconcileElements",
       "getLoopChildren",
       "getLoopNodes",
       "mapArray",
       "mapArrayAnchored",
       "patchLeaf",
-      "patchSlotRange",
       "createDisposableEffect",
       "createComponent",
       "renderChild",
@@ -15341,7 +15347,6 @@ var init_imports = __esm({
       "registerTemplate",
       "initChild",
       "upsertChild",
-      "updateClientMarker",
       "createPortal",
       "provideContext",
       "createContext",
@@ -15353,6 +15358,7 @@ var init_imports = __esm({
       "styleToCss",
       "escapeAttr",
       "escapeText",
+      "escapeTextOrNode",
       "qsa",
       "qsaItem",
       "qsaChildScope",
@@ -15361,7 +15367,11 @@ var init_imports = __esm({
       "__slot",
       "__bfSlot",
       "__bfText",
-      "tAfter",
+      // Claim-plan interpreter (slot unification A2/A3, spec/slot-unification.md)
+      // — the "one claim mechanism" that replaced `patchSlotRange` and
+      // `updateClientMarker` (both deleted) as the content-slot update door.
+      "claimSlots",
+      "lazySlots",
       // Profile mode (#1690, SR3) — turn-boundary markers around event handlers.
       "beginTurn",
       "endTurn",
@@ -18617,6 +18627,25 @@ var init_build_insert = __esm({
   }
 });
 
+// ../jsx/src/ir-to-client-js/control-flow/stringify/claim-plan.ts
+function slotSpecLiteral(slot) {
+  const pathSrc = slot.pathExpr ?? `[${slot.path.join(", ")}]`;
+  const markerlessSrc = slot.markerless ? ", markerless: true" : "";
+  return `{ id: '${slot.id}', kind: '${slot.kind}', path: ${pathSrc}${markerlessSrc} }`;
+}
+function claimPlanLiteral(slots) {
+  return `[${slots.map(slotSpecLiteral).join(", ")}]`;
+}
+function claimWriterVarName(slots, sanitize) {
+  const first = slots[0]?.id ?? "0";
+  return `__bfw_${sanitize(first)}`;
+}
+var init_claim_plan = __esm({
+  "../jsx/src/ir-to-client-js/control-flow/stringify/claim-plan.ts"() {
+    "use strict";
+  }
+});
+
 // ../jsx/src/ir-to-client-js/emit-reactive.ts
 import ts14 from "typescript";
 function bindingIdArg(ctx2, slotId) {
@@ -18795,17 +18824,18 @@ function emitDynamicTextUpdates(lines, ctx2) {
     const conditionalElems = elems.filter((e) => e.insideConditional);
     const normalElems = elems.filter((e) => !e.insideConditional);
     if (normalElems.length > 0 || conditionalElems.length > 0) {
-      for (const elem of normalElems) {
-        const v = varSlotId(elem.slotId);
-        lines.push(`  let __anchor_${v} = _${v}`);
-      }
       const __textSlot = (normalElems[0] ?? conditionalElems[0])?.slotId;
+      let writer = "";
+      if (normalElems.length > 0) {
+        const slots = normalElems.map((elem) => ({ id: elem.slotId, kind: "markup", path: [] }));
+        writer = claimWriterVarName(slots, varSlotId);
+        lines.push(`  const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`);
+      }
       lines.push(`  createEffect(() => {`);
       if (normalElems.length > 0) {
         lines.push(`    const __val = ${expr}`);
         for (const elem of normalElems) {
-          const v = varSlotId(elem.slotId);
-          lines.push(`    __anchor_${v} = __bfText(__anchor_${v}, __val)`);
+          lines.push(`    ${writer}('${elem.slotId}', escapeTextOrNode(__val))`);
         }
         for (const elem of conditionalElems) {
           const v = varSlotId(elem.slotId);
@@ -18828,10 +18858,13 @@ function emitDynamicTextUpdates(lines, ctx2) {
 }
 function emitClientOnlyExpressions(lines, ctx2) {
   for (const elem of ctx2.clientOnlyElements) {
+    const slots = elem.elidedPath ? [{ id: elem.slotId, kind: "text", path: elem.elidedPath, markerless: true }] : [{ id: elem.slotId, kind: "text", path: [] }];
+    const writer = claimWriterVarName(slots, varSlotId);
     lines.push(`  // @client: ${elem.slotId}`);
+    lines.push(`  { const ${writer} = lazySlots(__scope, ${claimPlanLiteral(slots)})`);
     lines.push(`  createEffect(() => {`);
-    lines.push(`    updateClientMarker(__scope, '${elem.slotId}', ${elem.expression})`);
-    lines.push(`  }${bindingIdArg(ctx2, elem.slotId)})`);
+    lines.push(`    ${writer}('${elem.slotId}', ${elem.expression})`);
+    lines.push(`  }${bindingIdArg(ctx2, elem.slotId)}) }`);
     lines.push("");
   }
 }
@@ -18939,6 +18972,7 @@ var init_emit_reactive = __esm({
     "use strict";
     init_html_constants();
     init_utils();
+    init_claim_plan();
     init_html_template();
     init_date_lowering();
     init_to_locale_date_lowering();
@@ -19008,13 +19042,18 @@ function stringifyBranchInnerLoops(lines, plan, indent, pc) {
         inner.outerLoopParamBindings
       );
     }
-    for (const text of inner.reactiveTexts) {
+    const conditionalTexts = inner.reactiveTexts.filter((t) => t.insideConditional);
+    const plainTexts = inner.reactiveTexts.filter((t) => !t.insideConditional);
+    for (const text of conditionalTexts) {
       const bf = profileBindingId(pc, text.slotId);
-      if (text.insideConditional) {
-        lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__bel${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) }${bf})`);
-      } else {
-        lines.push(`${indent}  { const [__rt] = $t(__bel${uid}, '${text.slotId}')`);
-        lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }${bf}) }`);
+      lines.push(`${indent}  createEffect(() => { claimSlots(__bel${uid}, [{ id: '${text.slotId}', kind: 'text', path: [] }]).write('${text.slotId}', String(${text.wrappedExpression})) }${bf})`);
+    }
+    if (plainTexts.length > 0) {
+      const slots = plainTexts.map((t) => ({ id: t.slotId, kind: "text", path: [] }));
+      const writer = claimWriterVarName(slots, varSlotId);
+      lines.push(`${indent}  const ${writer} = lazySlots(__bel${uid}, ${claimPlanLiteral(slots)})`);
+      for (const text of plainTexts) {
+        lines.push(`${indent}  createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)})`);
       }
     }
     if (inner.nestedConditionals.length > 0) {
@@ -19056,10 +19095,13 @@ function stringifyLoopChildArm(lines, arm, armIndent, pc) {
     stringifyLoopChildConditional(lines, cond, `${armIndent}  `, pc);
     lines.push(`${armIndent}}))`);
   }
-  for (const text of arm.texts) {
-    const varName = `__rt_${varSlotId(text.slotId)}`;
-    lines.push(`${armIndent}let ${varName} = $t(__branchScope, '${text.slotId}')[0]`);
-    lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => { ${varName} = __bfText(${varName}, ${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}))`);
+  if (arm.texts.length > 0) {
+    const slots = arm.texts.map((t) => ({ id: t.slotId, kind: "markup", path: [] }));
+    const writer = claimWriterVarName(slots, varSlotId);
+    lines.push(`${armIndent}const ${writer} = lazySlots(__branchScope, ${claimPlanLiteral(slots)})`);
+    for (const text of arm.texts) {
+      lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => { ${writer}('${text.slotId}', escapeTextOrNode(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)}))`);
+    }
   }
   lines.push(`${armIndent}return () => __disposers.forEach(d => d())`);
 }
@@ -19072,19 +19114,45 @@ var init_loop_child_arm = __esm({
     init_template_parse();
     init_event_listener();
     init_component_scope();
+    init_claim_plan();
   }
 });
 
 // ../jsx/src/ir-to-client-js/control-flow/stringify/reactive-effects.ts
 function stringifyReactiveEffects(lines, plan, opts) {
-  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot, textIndexBySlot } = opts;
+  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot, textClaimPathExprs, preambleRegions = [], mapPreambleWrapped } = opts;
   const lookup = bodyIsMultiRoot ? "qsaItem" : "qsa";
-  const pc = plan.profileComponentName;
+  const pc = plan?.profileComponentName;
   const bindingBfId = (slotId) => profileBindingId(pc, slotId);
-  for (const slot of plan.attrSlots) {
+  const attrSlots = plan?.attrSlots ?? [];
+  const outerTexts = plan?.outerTexts ?? [];
+  const conditionals = plan?.conditionals ?? [];
+  if (pc) {
+    emitAttrSlotsGranular(lines, indent, elVar, lookup, attrSlots, elementIndexBySlot, bindingBfId);
+    emitOuterTexts(lines, indent, elVar, outerTexts, bindingBfId, textClaimPathExprs);
+    emitPreambleRegionsEffect(lines, indent, elVar, preambleRegions, mapPreambleWrapped);
+  } else {
+    emitConsolidatedRowEffect(
+      lines,
+      indent,
+      elVar,
+      lookup,
+      attrSlots,
+      outerTexts,
+      elementIndexBySlot,
+      textClaimPathExprs,
+      preambleRegions,
+      mapPreambleWrapped
+    );
+  }
+  for (const cond of conditionals) {
+    emitOuterConditional(lines, indent, elVar, cond, pc);
+  }
+}
+function emitAttrSlotsGranular(lines, indent, elVar, lookup, attrSlots, elementIndexBySlot, bindingBfId) {
+  for (const slot of attrSlots) {
     const varName = `__ra_${varSlotId(slot.slotId)}`;
-    const pIdx = elementIndexBySlot?.get(slot.slotId);
-    const lookupExpr = pIdx !== void 0 ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${slot.slotId}"]')` : `${lookup}(${elVar}, '[bf="${slot.slotId}"]')`;
+    const lookupExpr = attrLookupExpr(slot.slotId, varName, elVar, lookup, elementIndexBySlot);
     lines.push(`${indent}{ const ${varName} = ${lookupExpr}`);
     lines.push(`${indent}if (${varName}) {`);
     for (const attr of slot.attrs) {
@@ -19096,21 +19164,79 @@ function stringifyReactiveEffects(lines, plan, opts) {
     }
     lines.push(`${indent}} }`);
   }
-  for (const text of plan.outerTexts) {
-    emitOuterText(lines, indent, elVar, text, bindingBfId(text.slotId), textIndexBySlot?.get(text.slotId));
+}
+function emitPreambleRegionsEffect(lines, indent, elVar, preambleRegions, mapPreambleWrapped) {
+  if (preambleRegions.length === 0) return;
+  const slots = preambleRegions.map((r2) => ({ id: r2.slotId, kind: "markup", path: [] }));
+  const writer = claimWriterVarName(slots, varSlotId);
+  lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(slots)})`);
+  lines.push(`${indent}createEffect(() => {`);
+  if (mapPreambleWrapped) lines.push(`${indent}  ${mapPreambleWrapped}`);
+  for (const region of preambleRegions) {
+    lines.push(`${indent}  ${writer}('${region.slotId}', ${region.valueExpr})`);
   }
-  for (const cond of plan.conditionals) {
-    emitOuterConditional(lines, indent, elVar, cond, pc);
+  lines.push(`${indent}})`);
+}
+function attrLookupExpr(slotId, varName, elVar, lookup, elementIndexBySlot) {
+  const pIdx = elementIndexBySlot?.get(slotId);
+  return pIdx !== void 0 ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${slotId}"]')` : `${lookup}(${elVar}, '[bf="${slotId}"]')`;
+}
+function emitConsolidatedRowEffect(lines, indent, elVar, lookup, attrSlots, outerTexts, elementIndexBySlot, textClaimPathExprs, preambleRegions, mapPreambleWrapped) {
+  if (attrSlots.length === 0 && outerTexts.length === 0 && preambleRegions.length === 0) return;
+  for (const slot of attrSlots) {
+    const varName = `__ra_${varSlotId(slot.slotId)}`;
+    lines.push(`${indent}const ${varName} = ${attrLookupExpr(slot.slotId, varName, elVar, lookup, elementIndexBySlot)}`);
+  }
+  const claimSlots = [
+    ...outerTexts.map((t) => ({ id: t.slotId, kind: "text", path: [], pathExpr: textClaimPathExprs?.get(t.slotId) })),
+    ...preambleRegions.map((r2) => ({ id: r2.slotId, kind: "markup", path: [] }))
+  ];
+  const writer = claimSlots.length > 0 ? claimWriterVarName(claimSlots, varSlotId) : null;
+  if (writer) {
+    lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(claimSlots)})`);
+  }
+  if (attrSlots.length === 0 && preambleRegions.length === 0 && outerTexts.length === 1) {
+    const text = outerTexts[0];
+    lines.push(`${indent}createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) })`);
+    return;
+  }
+  lines.push(`${indent}createEffect(() => {`);
+  for (const slot of attrSlots) {
+    const varName = `__ra_${varSlotId(slot.slotId)}`;
+    lines.push(`${indent}  if (${varName}) {`);
+    for (const attr of slot.attrs) {
+      lines.push(`${indent}    {`);
+      for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta)) {
+        lines.push(`${indent}      ${stmt}`);
+      }
+      lines.push(`${indent}    }`);
+    }
+    lines.push(`${indent}  }`);
   }
+  if (preambleRegions.length > 0 && mapPreambleWrapped) {
+    lines.push(`${indent}  ${mapPreambleWrapped}`);
+  }
+  for (const text of outerTexts) {
+    lines.push(`${indent}  ${writer}('${text.slotId}', String(${text.wrappedExpression}))`);
+  }
+  for (const region of preambleRegions) {
+    lines.push(`${indent}  ${writer}('${region.slotId}', ${region.valueExpr})`);
+  }
+  lines.push(`${indent}})`);
 }
-function emitOuterText(lines, indent, elVar, text, bfId = "", pIdx) {
-  const varName = `__rt_${varSlotId(text.slotId)}`;
-  if (pIdx !== void 0) {
-    lines.push(`${indent}{ const ${varName} = __p ? tAfter(__p[${pIdx}]) : $t(${elVar}, '${text.slotId}')[0]`);
-  } else {
-    lines.push(`${indent}{ const [${varName}] = $t(${elVar}, '${text.slotId}')`);
+function emitOuterTexts(lines, indent, elVar, texts, bindingBfId, textClaimPathExprs) {
+  if (texts.length === 0) return;
+  const slots = texts.map((t) => ({
+    id: t.slotId,
+    kind: "text",
+    path: [],
+    pathExpr: textClaimPathExprs?.get(t.slotId)
+  }));
+  const writer = claimWriterVarName(slots, varSlotId);
+  lines.push(`${indent}const ${writer} = lazySlots(${elVar}, ${claimPlanLiteral(slots)})`);
+  for (const text of texts) {
+    lines.push(`${indent}createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${bindingBfId(text.slotId)})`);
   }
-  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${bfId}) }`);
 }
 function emitOuterConditional(lines, indent, elVar, cond, pc) {
   const armIndent = `${indent}    `;
@@ -19132,6 +19258,7 @@ var init_reactive_effects = __esm({
     init_utils();
     init_emit_reactive();
     init_loop_child_arm();
+    init_claim_plan();
   }
 });
 
@@ -19242,20 +19369,6 @@ function emitLoopChildRefs(lines, refs, opts) {
     lines.push(`${indent}if (${varName}) ${emitRefCall(ref.callback, varName)} }`);
   }
 }
-function emitPreambleRegionEffects(lines, regions, mapPreambleWrapped, opts) {
-  if (regions.length === 0) return;
-  const { indent, elVar } = opts;
-  for (const region of regions) {
-    const v = varSlotId(region.slotId);
-    lines.push(`${indent}{ let __last_${v}`);
-    lines.push(`${indent}createEffect(() => {`);
-    if (mapPreambleWrapped) lines.push(`${indent}  ${mapPreambleWrapped}`);
-    lines.push(`${indent}  const __html_${v} = ${region.valueExpr}`);
-    lines.push(`${indent}  if (__last_${v} === undefined) { __last_${v} = __html_${v}; return }`);
-    lines.push(`${indent}  if (__html_${v} !== __last_${v}) { __last_${v} = __html_${v}; patchSlotRange(${elVar}, '${region.slotId}', __html_${v}) }`);
-    lines.push(`${indent}}) }`);
-  }
-}
 function stringifyLoop(lines, plan) {
   switch (plan.kind) {
     case "static":
@@ -19354,26 +19467,33 @@ function stringifyPlainLoop(lines, plan, topIndent = "  ") {
       ...reactiveEffects?.attrSlots.map((s) => s.slotId) ?? [],
       ...childRefs.map((r2) => r2.childSlotId)
     ];
-    const textSlotIds = reactiveEffects?.outerTexts.map((t) => t.slotId) ?? [];
-    if (elementSlotIds.length > 0 || textSlotIds.length > 0) {
-      const built = buildSkeletonPathPlan(plan.skeletonPaths, "__el", { elementSlotIds, textSlotIds });
+    if (elementSlotIds.length > 0) {
+      const built = buildSkeletonPathPlan(plan.skeletonPaths, "__el", { elementSlotIds, textSlotIds: [] });
       if (built.arrayElems.length > 0) {
         pathPlan = built;
         lines.push(`${bodyIndent}const __p = __existing ? null : [${built.arrayElems.join(", ")}]`);
       }
     }
   }
-  if (reactiveEffects !== null) {
+  const textClaimPathExprs = /* @__PURE__ */ new Map();
+  if (hoistedTpl && plan.skeletonPaths) {
+    for (const text of reactiveEffects?.outerTexts ?? []) {
+      const path25 = plan.skeletonPaths.textMarkerPaths.get(text.slotId);
+      if (path25) textClaimPathExprs.set(text.slotId, `__existing ? [] : [${path25.join(", ")}]`);
+    }
+  }
+  if (reactiveEffects !== null || preambleRegions.length > 0) {
     stringifyReactiveEffects(lines, reactiveEffects, {
       indent: bodyIndent,
       elVar: "__el",
       bodyIsMultiRoot,
       elementIndexBySlot: pathPlan?.elementIndexBySlot,
-      textIndexBySlot: pathPlan?.textIndexBySlot
+      textClaimPathExprs,
+      preambleRegions,
+      mapPreambleWrapped
     });
   }
   emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: "__el", bodyIsMultiRoot, elementIndexBySlot: pathPlan?.elementIndexBySlot });
-  emitPreambleRegionEffects(lines, preambleRegions, mapPreambleWrapped, { indent: bodyIndent, elVar: "__el" });
   lines.push(`${bodyIndent}return __el`);
   lines.push(`${topIndent}}, '${markerId}'${loopBfId})`);
 }
@@ -19474,10 +19594,13 @@ function stringifyStaticLoop(lines, plan) {
     }
     lines.push(`        }`);
   }
-  for (const text of texts) {
-    const vn = `__rt_${varSlotId(text.slotId)}`;
-    lines.push(`        { const [${vn}] = $t(__iterEl, '${text.slotId}')`);
-    lines.push(`        if (${vn}) createEffect(() => { ${vn}.textContent = String(${text.expression}) }${profileBindingId(pc, text.slotId)}) }`);
+  if (texts.length > 0) {
+    const slots = texts.map((t) => ({ id: t.slotId, kind: "text", path: [] }));
+    const writer = claimWriterVarName(slots, varSlotId);
+    lines.push(`        const ${writer} = lazySlots(__iterEl, ${claimPlanLiteral(slots)})`);
+    for (const text of texts) {
+      lines.push(`        createEffect(() => { ${writer}('${text.slotId}', String(${text.expression})) }${profileBindingId(pc, text.slotId)})`);
+    }
   }
   emitLoopChildRefs(lines, childRefs, { indent: "        ", elVar: "__iterEl", bodyIsMultiRoot: false });
   lines.push(`      }`);
@@ -19495,6 +19618,7 @@ var init_loop = __esm({
     init_skeleton_paths();
     init_component_loop();
     init_composite_loop();
+    init_claim_plan();
   }
 });
 
@@ -19550,13 +19674,18 @@ function emitReactive(lines, inner, indent, pc) {
   if (inner.childLevels.length > 0) {
     stringifyInnerLoops(lines, inner.childLevels, `${indent}  `, pc);
   }
-  for (const text of emit.reactiveTexts) {
+  const conditionalTexts = emit.reactiveTexts.filter((t) => t.insideConditional);
+  const plainTexts = emit.reactiveTexts.filter((t) => !t.insideConditional);
+  for (const text of conditionalTexts) {
     const bf = profileBindingId(pc, text.slotId);
-    if (text.insideConditional) {
-      lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__innerEl${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) }${bf})`);
-    } else {
-      lines.push(`${indent}  { const [__rt] = $t(__innerEl${uid}, '${text.slotId}')`);
-      lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }${bf}) }`);
+    lines.push(`${indent}  createEffect(() => { claimSlots(__innerEl${uid}, [{ id: '${text.slotId}', kind: 'text', path: [] }]).write('${text.slotId}', String(${text.wrappedExpression})) }${bf})`);
+  }
+  if (plainTexts.length > 0) {
+    const slots = plainTexts.map((t) => ({ id: t.slotId, kind: "text", path: [] }));
+    const writer = claimWriterVarName(slots, varSlotId);
+    lines.push(`${indent}  const ${writer} = lazySlots(__innerEl${uid}, ${claimPlanLiteral(slots)})`);
+    for (const text of plainTexts) {
+      lines.push(`${indent}  createEffect(() => { ${writer}('${text.slotId}', String(${text.wrappedExpression})) }${profileBindingId(pc, text.slotId)})`);
     }
   }
   for (const attr of emit.reactiveAttrs) {
@@ -19618,6 +19747,7 @@ var init_inner_loop = __esm({
     init_emit_reactive();
     init_template_parse();
     init_loop();
+    init_claim_plan();
   }
 });
 
@@ -19943,11 +20073,16 @@ function emitPlain(lines, plan) {
       indent: "          ",
       singleRootLayout: "inline"
     });
-    if (reactiveEffects !== null) {
-      stringifyReactiveEffects(lines, reactiveEffects, { indent: "          ", elVar: "__el", bodyIsMultiRoot });
+    if (reactiveEffects !== null || preambleRegions.length > 0) {
+      stringifyReactiveEffects(lines, reactiveEffects, {
+        indent: "          ",
+        elVar: "__el",
+        bodyIsMultiRoot,
+        preambleRegions,
+        mapPreambleWrapped
+      });
     }
     emitLoopChildRefs(lines, childRefs, { indent: "          ", elVar: "__el", bodyIsMultiRoot });
-    emitPreambleRegionEffects(lines, preambleRegions, mapPreambleWrapped, { indent: "          ", elVar: "__el" });
     lines.push(`          return __el`);
     lines.push(`        }, '${markerId}'${loopBfId})`);
   }
@@ -20038,13 +20173,13 @@ function emitArmBody(lines, body2, mode2, indent, profileComponentName) {
     }
     lines.push(`${indent}} }`);
   }
-  for (const te of body2.textEffects) {
-    const v = varSlotId(te.slotId);
-    lines.push(`${indent}let __anchor_${v} = $t(__branchScope, '${te.slotId}')[0]`);
-    lines.push(`${indent}__disposers.push(createDisposableEffect(() => {`);
-    lines.push(`${indent}  const __val = ${te.expression}`);
-    lines.push(`${indent}  __anchor_${v} = __bfText(__anchor_${v}, __val)`);
-    lines.push(`${indent}}${bindingBfId(te.slotId)}))`);
+  if (body2.textEffects.length > 0) {
+    const slots = body2.textEffects.map((te) => ({ id: te.slotId, kind: "markup", path: [] }));
+    const writer = claimWriterVarName(slots, varSlotId);
+    lines.push(`${indent}const ${writer} = lazySlots(__branchScope, ${claimPlanLiteral(slots)})`);
+    for (const te of body2.textEffects) {
+      lines.push(`${indent}__disposers.push(createDisposableEffect(() => { ${writer}('${te.slotId}', escapeTextOrNode(${te.expression})) }${bindingBfId(te.slotId)}))`);
+    }
   }
   if (body2.loops.length > 0) {
     stringifyBranchLoops(lines, body2.loops);
@@ -20077,6 +20212,7 @@ var init_insert = __esm({
     init_branch_loop();
     init_event_listener();
     init_component_scope();
+    init_claim_plan();
   }
 });
 
@@ -20340,7 +20476,6 @@ var init_control_flow = __esm({
 // ../jsx/src/ir-to-client-js/element-refs.ts
 function generateElementRefs(ctx2) {
   const regularSlots = /* @__PURE__ */ new Set();
-  const textSlots = /* @__PURE__ */ new Set();
   const componentSlots = /* @__PURE__ */ new Set();
   const conditionalSlotIds = collectConditionalSlotIds(ctx2);
   for (const elem of ctx2.interactiveElements) {
@@ -20348,11 +20483,6 @@ function generateElementRefs(ctx2) {
       regularSlots.add(elem.slotId);
     }
   }
-  for (const elem of ctx2.dynamicElements) {
-    if (!elem.insideConditional) {
-      textSlots.add(elem.slotId);
-    }
-  }
   for (const elem of ctx2.conditionalElements) {
     regularSlots.add(elem.slotId);
   }
@@ -20381,10 +20511,9 @@ function generateElementRefs(ctx2) {
   for (const slotId of componentSlots) {
     regularSlots.delete(slotId);
   }
-  if (regularSlots.size === 0 && textSlots.size === 0 && componentSlots.size === 0) return "";
+  if (regularSlots.size === 0 && componentSlots.size === 0) return "";
   const refLines = [];
   emitSlotRefs(refLines, [...regularSlots], "$");
-  emitSlotRefs(refLines, [...textSlots], "$t");
   emitSlotRefs(refLines, [...componentSlots], "$c");
   return refLines.join("\n");
 }
@@ -21034,6 +21163,107 @@ var init_ir_to_client_js = __esm({
   }
 });
 
+// ../jsx/src/ir-to-client-js/client-only-elision.ts
+function decideClientOnlyElision(root2) {
+  walkNode(root2, [], /* @__PURE__ */ new Set(), { bailed: false });
+}
+function walkNode(node, path25, forceCloseAncestors, state2) {
+  if (state2.bailed) return;
+  if (node.type === "element") {
+    if (!elementIsPathSafe(node.tag, flattenSkeletonChildren(node.children))) {
+      state2.bailed = true;
+      return;
+    }
+    const groupIdx = skeletonForceCloseGroup(node.tag);
+    if (groupIdx >= 0 && forceCloseAncestors.has(groupIdx)) {
+      state2.bailed = true;
+      return;
+    }
+    const nextAncestors = groupIdx >= 0 ? /* @__PURE__ */ new Set([...forceCloseAncestors, groupIdx]) : forceCloseAncestors;
+    walkChildren(flattenSkeletonChildren(node.children), path25, nextAncestors, state2);
+  } else if (node.type === "fragment") {
+    walkChildren(flattenSkeletonChildren(node.children), path25, forceCloseAncestors, state2);
+  }
+}
+function walkChildren(children2, parentPath, forceCloseAncestors, state2) {
+  let frozen = false;
+  let idx = 0;
+  let pendingText = false;
+  for (let i = 0; i < children2.length; i++) {
+    if (state2.bailed) return;
+    const child = children2[i];
+    switch (child.type) {
+      case "text": {
+        if (child.value === "") continue;
+        if (!pendingText) idx += 1;
+        pendingText = true;
+        continue;
+      }
+      case "expression": {
+        if (child.expr === "null" || child.expr === "undefined") continue;
+        if (child.clientOnly && child.slotId) {
+          const adjacent = isTextLike(children2[i - 1]) || isTextLike(children2[i + 1]);
+          if (!frozen && !adjacent) {
+            markElided(child, [...parentPath, idx]);
+            frozen = true;
+          } else {
+            frozen = true;
+          }
+          idx += 1;
+          pendingText = false;
+          continue;
+        }
+        frozen = true;
+        idx += 1;
+        pendingText = false;
+        continue;
+      }
+      case "element": {
+        if (!elementIsPathSafe(child.tag, flattenSkeletonChildren(child.children))) {
+          state2.bailed = true;
+          return;
+        }
+        if (!frozen) {
+          walkNode(child, [...parentPath, idx], forceCloseAncestors, state2);
+        }
+        idx += 1;
+        pendingText = false;
+        continue;
+      }
+      case "fragment":
+        continue;
+      // already flattened
+      default:
+        frozen = true;
+        idx += 1;
+        pendingText = false;
+        continue;
+    }
+  }
+}
+function isTextLike(node) {
+  if (!node) return false;
+  if (node.type === "text") return node.value !== "";
+  if (node.type === "expression") return node.expr !== "null" && node.expr !== "undefined";
+  return false;
+}
+function markElided(expr, path25) {
+  expr.markerless = true;
+  expr.elidedPath = path25;
+}
+function elementIsPathSafe(tag, flatChildren) {
+  if (SKELETON_PATH_HAZARD_TAGS.has(tag)) return false;
+  if (VOID_ELEMENTS.has(tag) && flatChildren.length > 0) return false;
+  if (tag === "tr" && hasForeignTableRowContent(flatChildren)) return false;
+  return true;
+}
+var init_client_only_elision = __esm({
+  "../jsx/src/ir-to-client-js/client-only-elision.ts"() {
+    "use strict";
+    init_html_template();
+  }
+});
+
 // ../jsx/src/css-layer-prefixer.ts
 function prefixClass(cls, layerName) {
   if (!cls || cls.startsWith("layer-")) return cls;
@@ -22208,7 +22438,7 @@ function checkRichTypeMethodCalls(root2, metadata, errors) {
   if (!metadata.propsType) return;
   const matchers = prepareLoweringMatchers(metadata);
   const seen = /* @__PURE__ */ new Set();
-  walkNode(root2, metadata, EMPTY_BINDINGS2, matchers, errors, seen);
+  walkNode2(root2, metadata, EMPTY_BINDINGS2, matchers, errors, seen);
 }
 function isLoweringClaimed(matchers, callee, args2) {
   return matchers.some((m) => m(callee, args2) !== null);
@@ -22336,7 +22566,7 @@ function walkAttrValue(value2, clientOnly, loc, meta, bindings, matchers, errors
     walkTemplateParts(value2.parts, loc, meta, bindings, matchers, errors, seen);
   }
 }
-function walkNode(node, meta, bindings, matchers, errors, seen) {
+function walkNode2(node, meta, bindings, matchers, errors, seen) {
   if (node.type === "expression") {
     if (!node.clientOnly && node.parsed) checkExpr(node.parsed, node.loc, meta, bindings, matchers, errors, seen);
   } else if (node.type === "conditional") {
@@ -22356,11 +22586,11 @@ function walkNode(node, meta, bindings, matchers, errors, seen) {
     case "component":
     case "fragment":
     case "provider":
-      for (const child of node.children) walkNode(child, meta, bindings, matchers, errors, seen);
+      for (const child of node.children) walkNode2(child, meta, bindings, matchers, errors, seen);
       break;
     case "async":
-      walkNode(node.fallback, meta, bindings, matchers, errors, seen);
-      for (const child of node.children) walkNode(child, meta, bindings, matchers, errors, seen);
+      walkNode2(node.fallback, meta, bindings, matchers, errors, seen);
+      for (const child of node.children) walkNode2(child, meta, bindings, matchers, errors, seen);
       break;
     case "loop": {
       if (node.clientOnly) break;
@@ -22369,29 +22599,29 @@ function walkNode(node, meta, bindings, matchers, errors, seen) {
       const arrayType = node.arrayParsed ? resolveReceiverType(node.arrayParsed, meta, bindings) : null;
       loopBindings.set(node.param, arrayType?.kind === "array" ? arrayType.elementType ?? null : null);
       if (node.index) loopBindings.set(node.index, null);
-      for (const child of node.children) walkNode(child, meta, loopBindings, matchers, errors, seen);
+      for (const child of node.children) walkNode2(child, meta, loopBindings, matchers, errors, seen);
       if (node.childComponent) {
-        for (const child of node.childComponent.children) walkNode(child, meta, loopBindings, matchers, errors, seen);
+        for (const child of node.childComponent.children) walkNode2(child, meta, loopBindings, matchers, errors, seen);
       }
       for (const nested of node.nestedComponents ?? []) {
-        for (const child of nested.children) walkNode(child, meta, loopBindings, matchers, errors, seen);
+        for (const child of nested.children) walkNode2(child, meta, loopBindings, matchers, errors, seen);
       }
       for (const seg of node.flatMapCallback?.segments ?? []) {
-        if (seg.kind === "jsx") walkNode(seg.ir, meta, loopBindings, matchers, errors, seen);
+        if (seg.kind === "jsx") walkNode2(seg.ir, meta, loopBindings, matchers, errors, seen);
       }
       for (const seg of node.preamble?.segments ?? []) {
-        if (seg.kind === "jsx") walkNode(seg.ir, meta, loopBindings, matchers, errors, seen);
+        if (seg.kind === "jsx") walkNode2(seg.ir, meta, loopBindings, matchers, errors, seen);
       }
       break;
     }
     case "conditional":
       if (node.clientOnly) break;
-      walkNode(node.whenTrue, meta, bindings, matchers, errors, seen);
-      walkNode(node.whenFalse, meta, bindings, matchers, errors, seen);
+      walkNode2(node.whenTrue, meta, bindings, matchers, errors, seen);
+      walkNode2(node.whenFalse, meta, bindings, matchers, errors, seen);
       break;
     case "if-statement":
-      walkNode(node.consequent, meta, bindings, matchers, errors, seen);
-      if (node.alternate) walkNode(node.alternate, meta, bindings, matchers, errors, seen);
+      walkNode2(node.consequent, meta, bindings, matchers, errors, seen);
+      if (node.alternate) walkNode2(node.alternate, meta, bindings, matchers, errors, seen);
       break;
   }
 }
@@ -22464,6 +22694,7 @@ function compileMultipleComponents(source, filePath, componentNames, options2) {
     };
     componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR);
     checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors);
+    decideClientOnlyElision(componentIR.root);
     if (options2.cssLayerPrefix) {
       applyCssLayerPrefix(componentIR, options2.cssLayerPrefix);
     }
@@ -22801,6 +23032,7 @@ function compileJSX(source, filePath, options2) {
   };
   componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR);
   checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors);
+  decideClientOnlyElision(componentIR.root);
   if (ctx2.importedClientSignalNames.size > 0) {
     const sources = /* @__PURE__ */ new Set();
     for (const imp of ctx2.imports) {
@@ -22922,6 +23154,7 @@ var init_compiler = __esm({
     init_jsx_to_ir();
     init_builtins();
     init_ir_to_client_js();
+    init_client_only_elision();
     init_emit_module_level();
     init_imports();
     init_component_scope();
@@ -26867,6 +27100,7 @@ __export(src_exports, {
   createProgramForFile: () => createProgramForFile,
   dangerousInnerHtmlDiagnostic: () => dangerousInnerHtmlDiagnostic,
   dangerousInnerHtmlMetacharViolation: () => dangerousInnerHtmlMetacharViolation,
+  decideClientOnlyElision: () => decideClientOnlyElision,
   describeFallback: () => describeFallback,
   diffProfiles: () => diffProfiles,
   diffStaticBudget: () => diffStaticBudget,
@@ -26981,6 +27215,7 @@ var init_src2 = __esm({
     init_analyzer();
     init_shared_program();
     init_jsx_to_ir();
+    init_client_only_elision();
     init_module_exports();
     init_interface();
     init_test_adapter();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/cli",
-  "version": "0.26.4",
+  "version": "0.27.0",
   "description": "CLI for agent-driven UI component discovery and scaffolding",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,11 +29,11 @@
   "dependencies": {
     "esbuild": "^0.25.0",
     "typescript": "^5.0.0",
-    "@barefootjs/client": "0.26.4",
-    "@barefootjs/shared": "0.26.4"
+    "@barefootjs/client": "0.27.0",
+    "@barefootjs/shared": "0.27.0"
   },
   "devDependencies": {
-    "@barefootjs/jsx": "0.26.4",
+    "@barefootjs/jsx": "0.27.0",
     "@types/node": "^22.0.0",
     "@happy-dom/global-registrator": "^20.0.11",
     "happy-dom": "^20.0.11"