@barefootjs/jsx 0.26.3 → 0.27.0

package/src/__tests__/__snapshots__/doc-examples.test.ts.snap

@@ -1,18 +1,16 @@
 // Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L15 — Ternary 1`] = `
-"import { $, $t, __bfSlot, __bfText, createComponent, createDisposableEffect, createEffect, createSignal, escapeText, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, __bfSlot, createComponent, createDisposableEffect, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, insert, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -23,12 +21,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -58,11 +54,8 @@ export function initExample(__scope, _p = {}) {
     template: () => { const __slots = []; return { html: \`<p bf-c="s0" bf="s2"><!--bf:s1-->\${__bfSlot(count(), __slots)}<!--/--> items</p>\`, slots: __slots } },
     bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {
       const __disposers = []
-      let __anchor_s1 = $t(__branchScope, 's1')[0]
-      __disposers.push(createDisposableEffect(() => {
-        const __val = count()
-        __anchor_s1 = __bfText(__anchor_s1, __val)
-      }))
+      const __bfw_s1 = lazySlots(__branchScope, [{ id: 's1', kind: 'markup', path: [] }])
+      __disposers.push(createDisposableEffect(() => { __bfw_s1('s1', escapeTextOrNode(count())) }))
       return () => __disposers.forEach(d => d())
     }
   }, {
@@ -78,18 +71,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L18 — Logical AND 1`] = `
-"import { $, $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, insert, renderChild } from '@barefootjs/client/runtime'
+"import { $, $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, insert, lazySlots, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -100,12 +91,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -154,18 +143,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L31 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -176,12 +163,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -219,18 +204,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L40 — ✅ Simple predicate 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -241,12 +224,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -284,18 +265,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L45 — ✅ Block body with simple statements — also works 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -306,12 +285,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -358,19 +335,85 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L59 — ✅ Sort then render 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L59 — ✅ Projection — works on every adapter 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray, patchLeaf } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
+  createEffect(() => {
+    const __val = String(_p.todo)
+    __bfw_s0('s0', escapeTextOrNode(__val))
+  })
+
+}
+
+hydrate('TodoItem__b3c36eee', { init: initTodoItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${escapeText(String(_p.todo))}<!--/--></li>\` })
+export function TodoItem(_p, __bfKey) { return createComponent('TodoItem__b3c36eee', _p, __bfKey) }
+export function initItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
+  createEffect(() => {
+    const __val = String(_p.item)
+    __bfw_s0('s0', escapeTextOrNode(__val))
+  })
+
+}
+
+hydrate('Item__b3c36eee', { init: initItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${escapeText(String(_p.item))}<!--/--></li>\` })
+export function Item(_p, __bfKey) { return createComponent('Item__b3c36eee', _p, __bfKey) }
+function initDashboard() {}
+
+hydrate('Dashboard__b3c36eee', { init: initDashboard, template: (_p) => \`<div>D</div>\` })
+export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c36eee', _p, __bfKey) }
+export function initExample(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const children = _p.children
+  const [count, setCount] = createSignal(0)
+  const [isLoggedIn] = createSignal(false)
+  const [todos] = createSignal([])
+  const [items] = createSignal([])
+  const [filter] = createSignal('all')
+  const [accepted] = createSignal(false)
+  const [text, setText] = createSignal('')
+
+  const [_s1] = $(__scope, 's1')
+
+  mapArray(() => (todos()).flatMap((todo) => todo.tags.map((tag) => ({ k: (\`\${todo.id}:\${tag}\`), h: \`<li data-key-1="\${escapeAttr(\`\${todo.id}:\${tag}\`)}"><!--bf:s0-->\${escapeText(tag)}<!--/--></li>\` }))), _s1, (__bfD, __bfI) => String(__bfD.k ?? __bfI), (__bfD, __idx, __existing) => {
+    let __el = __existing
+    if (!__el) { const __tpl = document.createElement('template'); __tpl.innerHTML = __bfD().h; __el = __tpl.content.firstElementChild }
+    let __last = __existing ? undefined : __bfD().h
+    createEffect(() => {
+      const __html = __bfD().h
+      if (__last === undefined) { __last = __html; return }
+      if (__html !== __last) { __last = __html; patchLeaf(__el, __html) }
+    })
+    return __el
+  }, 'l1')
+
+}
+
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l1-->\${([]).flatMap((todo) => \`<!--bf-loop:l0-->\${todo.tags.map((tag) => \`<li data-key-1="\${escapeAttr(\`\${todo.id}:\${tag}\`)}"><!--bf:s0-->\${escapeText(tag)}<!--/--></li>\`).join('')}<!--bf-/loop:l0-->\`).join('')}<!--bf-/loop:l1--></div>\` })
+export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
+`;
+
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L64 — ✅ Statement body — JS-runtime adapters; /* @client */ on Go/Mojo etc. 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray, patchLeaf } from '@barefootjs/client/runtime'
 
-  let __anchor_s0 = _s0
+export function initTodoItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -381,12 +424,84 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
+  createEffect(() => {
+    const __val = String(_p.item)
+    __bfw_s0('s0', escapeTextOrNode(__val))
+  })
+
+}
+
+hydrate('Item__b3c36eee', { init: initItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${escapeText(String(_p.item))}<!--/--></li>\` })
+export function Item(_p, __bfKey) { return createComponent('Item__b3c36eee', _p, __bfKey) }
+function initDashboard() {}
+
+hydrate('Dashboard__b3c36eee', { init: initDashboard, template: (_p) => \`<div>D</div>\` })
+export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c36eee', _p, __bfKey) }
+export function initExample(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const children = _p.children
+  const [count, setCount] = createSignal(0)
+  const [isLoggedIn] = createSignal(false)
+  const [todos] = createSignal([])
+  const [items] = createSignal([])
+  const [filter] = createSignal('all')
+  const [accepted] = createSignal(false)
+  const [text, setText] = createSignal('')
+
+  const [_s0] = $(__scope, 's0')
 
-  let __anchor_s0 = _s0
+  mapArray(() => (todos()).flatMap((todo) => {
+  if (todo.hidden) return []
+  return todo.tags.map(tag => ({ k: (\`\${todo.id}:\${tag}\`), h: \`<li>\${escapeText((tag))}</li>\` }))
+}), _s0, (__bfD, __bfI) => String(__bfD.k ?? __bfI), (__bfD, __idx, __existing) => {
+    let __el = __existing
+    if (!__el) { const __tpl = document.createElement('template'); __tpl.innerHTML = __bfD().h; __el = __tpl.content.firstElementChild }
+    let __last = __existing ? undefined : __bfD().h
+    createEffect(() => {
+      const __html = __bfD().h
+      if (__last === undefined) { __last = __html; return }
+      if (__html !== __last) { __last = __html; patchLeaf(__el, __html) }
+    })
+    return __el
+  }, 'l0')
+
+}
+
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s0"><!--bf-loop:l0-->\${([]).flatMap((todo) => {
+  if (todo.hidden) return []
+  return todo.tags.map(tag => \`<li>\${escapeText((tag))}</li>\`)
+}).join('')}<!--bf-/loop:l0--></div>\` })
+export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
+`;
+
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L74 — ✅ Sort then render 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
+
+export function initTodoItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
+  createEffect(() => {
+    const __val = String(_p.todo)
+    __bfw_s0('s0', escapeTextOrNode(__val))
+  })
+
+}
+
+hydrate('TodoItem__b3c36eee', { init: initTodoItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${escapeText(String(_p.todo))}<!--/--></li>\` })
+export function TodoItem(_p, __bfKey) { return createComponent('TodoItem__b3c36eee', _p, __bfKey) }
+export function initItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -423,19 +538,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L64 — ✅ Filter, sort, then render 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L79 — ✅ Filter, sort, then render 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -446,12 +559,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -488,19 +599,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L69 — ✅ Multi-key: sort by price, break ties by name 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L84 — ✅ Multi-key: sort by price, break ties by name 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -511,12 +620,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -553,19 +660,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L74 — ✅ Relational ternary 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L89 — ✅ Relational ternary 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -576,12 +681,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -618,19 +721,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L85 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L100 — (no label) 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -641,12 +742,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -682,19 +781,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div><button bf="s0"
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L125 — ✅ Nested \`.filter()\` / \`.map()\` now compiles everywhere 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L142 — ✅ Nested \`.filter()\` / \`.map()\` now compiles everywhere 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -705,12 +802,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -734,12 +829,10 @@ export function initExample(__scope, _p = {}) {
   const [accepted] = createSignal(false)
   const [text, setText] = createSignal('')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = items().filter(x => x.tags.filter(t => t.active).length > 0).map(t => t.name)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -748,19 +841,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L132 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L149 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -771,12 +862,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -800,12 +889,10 @@ export function initExample(__scope, _p = {}) {
   const [accepted] = createSignal(false)
   const [text, setText] = createSignal('')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = items().filter(x => x.tags.some(t => t.active)).map(t => t.name)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -814,19 +901,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L135 — ✅ Add /* @client */ to evaluate on the client 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L152 — ✅ Add /* @client */ to evaluate on the client 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -837,12 +922,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -867,29 +950,28 @@ export function initExample(__scope, _p = {}) {
   const [text, setText] = createSignal('')
 
   // @client: s0
+  { const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'text', path: [0], markerless: true }])
   createEffect(() => {
-    updateClientMarker(__scope, 's0', items().filter(x => x.tags.some(t => t.active)).map(t => t.name))
-  })
+    __bfw_s0('s0', items().filter(x => x.tags.some(t => t.active)).map(t => t.name))
+  }) }
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-client:s0--><!--/--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:s0--><!--/--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L142 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L159 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -900,12 +982,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -929,12 +1009,10 @@ export function initExample(__scope, _p = {}) {
   const [accepted] = createSignal(false)
   const [text, setText] = createSignal('')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = items().reduce((sum, x) => sum + x.price, 0)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -943,19 +1021,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L145 — ✅ Use /* @client */ 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L162 — ✅ Use /* @client */ 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -966,12 +1042,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -996,29 +1070,28 @@ export function initExample(__scope, _p = {}) {
   const [text, setText] = createSignal('')
 
   // @client: s0
+  { const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'text', path: [0], markerless: true }])
   createEffect(() => {
-    updateClientMarker(__scope, 's0', items().reduce((sum, x) => sum + x.price, 0))
-  })
+    __bfw_s0('s0', items().reduce((sum, x) => sum + x.price, 0))
+  }) }
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-client:s0--><!--/--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:s0--><!--/--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L162 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L179 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1029,12 +1102,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1058,12 +1129,10 @@ export function initExample(__scope, _p = {}) {
   const [accepted] = createSignal(false)
   const [text, setText] = createSignal('')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = items().filter(function(x) { return x.done })
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1072,19 +1141,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L165 — ✅ Use arrow functions for adapter portability 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L182 — ✅ Use arrow functions for adapter portability 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1095,12 +1162,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1124,12 +1189,10 @@ export function initExample(__scope, _p = {}) {
   const [accepted] = createSignal(false)
   const [text, setText] = createSignal('')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = items().filter(x => x.done)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1138,19 +1201,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L178 — ✅ Value-producing block bodies normalize (let-inline) and lower everywhere 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L195 — ✅ Value-producing block bodies normalize (let-inline) and lower everywhere 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1161,12 +1222,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1203,19 +1262,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L188 — ❌ BF021 on Go/Mojo — a JS-runtime target (Hono, CSR) runs the comparator 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L205 — ❌ BF021 on Go/Mojo — a JS-runtime target (Hono, CSR) runs the comparator 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1226,12 +1283,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1268,19 +1323,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L193 — ✅ Use /* @client */ 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L210 — ✅ Use /* @client */ 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1291,12 +1344,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1333,8 +1384,8 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L205 — ❌ BF021 on Go/Mojo — \`byPrice\` is imported, not declared in this file 1`] = `
-"import { $, $t, createComponent, createEffect, escapeText, hydrate, mapArray, tAfter } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L222 — ❌ BF021 on Go/Mojo — \`byPrice\` is imported, not declared in this file 1`] = `
+"import { $, createComponent, createEffect, escapeAttr, escapeText, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
 import { byPrice } from './comparators'
 
 
@@ -1350,31 +1401,28 @@ export function initSortedList(__scope, _p = {}) {
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
   mapArray(() => items.sort(byPrice), _s1, (item) => String(item.id), (item, __idx, __existing) => {
     const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __p = __existing ? null : [__el.firstChild]
-    { const __rt_s0 = __p ? tAfter(__p[0]) : $t(__el, 's0')[0]
-    if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(item().name) }) }
+    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
+    createEffect(() => { __bfw_s0('s0', String(item().name)) })
     return __el
   }, 'l0')
 
 }
 
-hydrate('SortedList__b3c36eee', { init: initSortedList, template: (_p) => \`<ul bf="s1"><!--bf-loop:l0-->\${_p.items.sort(byPrice).map((item) => \`<li data-key="\${item.id}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></ul>\` })
+hydrate('SortedList__b3c36eee', { init: initSortedList, template: (_p) => \`<ul bf="s1"><!--bf-loop:l0-->\${_p.items.sort(byPrice).map((item) => \`<li data-key="\${escapeAttr(item.id)}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></ul>\` })
 export function SortedList(_p, __bfKey) { return createComponent('SortedList__b3c36eee', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L211 — ✅ Use /* @client */, or inline / re-declare the comparator locally 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L228 — ✅ Use /* @client */, or inline / re-declare the comparator locally 1`] = `
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1385,12 +1433,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1427,19 +1473,17 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/client-directive.md doc-examples L59 — Nested higher-order methods 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/client-directive.md doc-examples L76 — Nested higher-order methods 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1450,12 +1494,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1480,29 +1522,28 @@ export function initExample(__scope, _p = {}) {
   const [text, setText] = createSignal('')
 
   // @client: s0
+  { const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'text', path: [0], markerless: true }])
   createEffect(() => {
-    updateClientMarker(__scope, 's0', items().filter(x => x.tags().filter(t => t.active).length > 0))
-  })
+    __bfw_s0('s0', items().filter(x => x.tags().filter(t => t.active).length > 0))
+  }) }
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-client:s0--><!--/--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:s0--><!--/--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/client-directive.md doc-examples L62 — Unsupported array methods 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/client-directive.md doc-examples L79 — Unsupported array methods 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1513,12 +1554,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1543,29 +1582,28 @@ export function initExample(__scope, _p = {}) {
   const [text, setText] = createSignal('')
 
   // @client: s0
+  { const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'text', path: [0], markerless: true }])
   createEffect(() => {
-    updateClientMarker(__scope, 's0', items().reduce((sum, x) => sum + x.price, 0))
-  })
+    __bfw_s0('s0', items().reduce((sum, x) => sum + x.price, 0))
+  }) }
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-client:s0--><!--/--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:s0--><!--/--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/client-directive.md doc-examples L74 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/client-directive.md doc-examples L91 — (no label) 1`] = `
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1576,12 +1614,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1606,29 +1642,28 @@ export function initExample(__scope, _p = {}) {
   const [text, setText] = createSignal('')
 
   // @client: s0
+  { const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'text', path: [0, 0], markerless: true }])
   createEffect(() => {
-    updateClientMarker(__scope, 's0', todos().filter(t => !t.done).length)
-  })
+    __bfw_s0('s0', todos().filter(t => !t.done).length)
+  }) }
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div><strong bf="s1"><!--bf-client:s0--><!--/--></strong></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div><strong bf="s1"><!--bf:s0--><!--/--></strong></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
 exports[`docs/core/rendering/fragment.md doc-examples L11 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1639,12 +1674,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1675,18 +1708,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/fragment.md doc-examples L23 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1697,12 +1728,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -1890,7 +1919,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/reactivity/create-signal.md doc-examples L95 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -1900,12 +1929,11 @@ export function initCounter(__scope, _p = {}) {
   const [count, setCount] = createSignal(0)
 
   const [_s2] = $(__scope, 's2')
-  const [_s0] = $t(__scope, 's0')
 
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   if (_s2) _s2.addEventListener('click', () => { setCount(n => n + 1) })
@@ -2079,18 +2107,16 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/reactivity/create-effect.md doc-examples L115 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2101,12 +2127,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2213,18 +2237,16 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/reactivity/create-memo.md doc-examples L60 — No memo needed 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2235,12 +2257,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2264,12 +2284,10 @@ export function initExample(__scope, _p = {}) {
   const [accepted] = createSignal(false)
   const [text, setText] = createSignal('')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count() * 2
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2520,19 +2538,17 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/reactivity/props-reactivity.md doc-examples L82 — Parent 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Child */'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2543,12 +2559,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2601,18 +2615,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/reactivity/props-reactivity.md doc-examples L85 — Compiled props object 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2623,12 +2635,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2659,7 +2669,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/component-authoring.mdx doc-examples L16 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initGreeting(__scope, _p = {}) {
@@ -2668,12 +2678,10 @@ export function initGreeting(__scope, _p = {}) {
 
   const name = _p.name
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = name
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2683,7 +2691,7 @@ export function Greeting(_p, __bfKey) { return createComponent('Greeting', _p, _
 `;
 
 exports[`docs/core/components/component-authoring.mdx doc-examples L29 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -2693,12 +2701,11 @@ export function initCounter(__scope, _p = {}) {
   const [count, setCount] = createSignal(0)
 
   const [_s1] = $(__scope, 's1')
-  const [_s0] = $t(__scope, 's0')
 
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   if (_s1) _s1.addEventListener('click', () => { setCount(n => n + 1) })
@@ -2790,19 +2797,17 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L14 — (no label) 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Card */'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2813,12 +2818,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2872,19 +2875,17 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L68 — Input 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Slot */'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2895,12 +2896,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2936,18 +2935,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L73 — Output 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2958,12 +2955,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -2997,19 +2992,17 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L86 — (no label) 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Button */'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3020,12 +3013,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3061,19 +3052,17 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L93 — (no label) 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Button */'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3084,12 +3073,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3125,19 +3112,17 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L109 — Dialog trigger as a custom element 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeAttr, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:DialogTrigger */'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3148,12 +3133,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3189,7 +3172,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L118 — (no label) 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Dialog */'
 import '/* @bf-child:DialogTrigger */'
 import '/* @bf-child:DialogOverlay */'
@@ -3205,12 +3188,10 @@ export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3221,12 +3202,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3279,18 +3258,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L140 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3301,12 +3278,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3353,18 +3328,16 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/context-api.md doc-examples L40 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, provideContext } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots, provideContext } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3375,12 +3348,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3466,7 +3437,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/context-api.md doc-examples L94 — Usage 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:ThemeProvider */'
 import '/* @bf-child:ThemedButton */'
 
@@ -3474,12 +3445,10 @@ export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3490,12 +3459,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3619,7 +3586,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/context-api.md doc-examples L170 — (no label) 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Accordion */'
 import '/* @bf-child:AccordionTrigger */'
 import '/* @bf-child:AccordionContent */'
@@ -3628,12 +3595,10 @@ export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3644,12 +3609,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3689,18 +3652,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/context-api.md doc-examples L190 — Provider passes signal getter 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, provideContext } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots, provideContext } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3711,12 +3672,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3806,7 +3765,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/portals.md doc-examples L53 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createPortal, createSignal, escapeText, hydrate, isSSRPortal } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createPortal, createSignal, escapeText, escapeTextOrNode, hydrate, isSSRPortal, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initTooltip(__scope, _p = {}) {
@@ -3827,12 +3786,11 @@ export function initTooltip(__scope, _p = {}) {
   }
 
   const [_s0, _s2] = $(__scope, 's0', 's2')
-  const [_s1] = $t(__scope, 's1')
 
-  let __anchor_s1 = _s1
+  const __bfw_s1 = lazySlots(__scope, [{ id: 's1', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = _p.text
-    __anchor_s1 = __bfText(__anchor_s1, __val)
+    __bfw_s1('s1', escapeTextOrNode(__val))
   })
 
   if (_s0) _s0.addEventListener('mouseenter', () => { setVisible(true) })
@@ -3911,25 +3869,23 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/props-type-safety.md doc-examples L16 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initGreeting(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0, _s1] = $t(__scope, 's0', 's1')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = _p.greeting ?? 'Hello'
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
-  let __anchor_s1 = _s1
+  const __bfw_s1 = lazySlots(__scope, [{ id: 's1', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = _p.name
-    __anchor_s1 = __bfText(__anchor_s1, __val)
+    __bfw_s1('s1', escapeTextOrNode(__val))
   })
 
 }
@@ -3975,19 +3931,17 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/props-type-safety.md doc-examples L89 — (no label) 1`] = `
-"import { $c, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Card */'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -3998,12 +3952,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4057,7 +4009,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/core-concepts/how-it-works.mdx doc-examples L33 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -4067,12 +4019,11 @@ export function initCounter(__scope, _p = {}) {
   const [count, setCount] = createSignal(0)
 
   const [_s1] = $(__scope, 's1')
-  const [_s0] = $t(__scope, 's0')
 
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   if (_s1) _s1.addEventListener('click', () => { setCount(n => n + 1) })
@@ -4105,7 +4056,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/core-concepts/mpa-style.md doc-examples L23 — (no label) 1`] = `
-"import { $, $c, $t, __bfText, createComponent, createEffect, escapeAttr, escapeText, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $, $c, createComponent, createEffect, escapeAttr, escapeText, escapeTextOrNode, hydrate, initChild, lazySlots, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:ReviewStars */'
 import '/* @bf-child:AddToCart */'
 
@@ -4117,19 +4068,18 @@ export function initProductPage(__scope, _p = {}) {
   const product = _p.product ?? {}
 
   const [_s4] = $(__scope, 's4')
-  const [_s0, _s2] = $t(__scope, 's0', 's2')
   const [_s5, _s6] = $c(__scope, 's5', 's6')
 
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = product.name
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
-  let __anchor_s2 = _s2
+  const __bfw_s2 = lazySlots(__scope, [{ id: 's2', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = product.description
-    __anchor_s2 = __bfText(__anchor_s2, __val)
+    __bfw_s2('s2', escapeTextOrNode(__val))
   })
 
   createEffect(() => {
@@ -4161,19 +4111,17 @@ export function ProductPage(_p, __bfKey) { return createComponent('ProductPage',
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L55 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initGreeting(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = _p.name
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4183,7 +4131,7 @@ export function Greeting(_p, __bfKey) { return createComponent('Greeting', _p, _
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L82 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -4197,12 +4145,11 @@ export function initCounter(__scope, _p = {}) {
   })
 
   const [_s2] = $(__scope, 's2')
-  const [_s0] = $t(__scope, 's0')
 
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   if (_s2) _s2.addEventListener('click', () => { setCount(n => n + 1) })
@@ -4235,18 +4182,16 @@ export function Layout(_p, __bfKey) { return createComponent('Layout', _p, __bfK
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L167 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, insert, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4257,12 +4202,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4305,18 +4248,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L171 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, insert, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4327,12 +4268,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4375,18 +4314,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L177 — (no label) 1`] = `
-"import { $, $t, __bfSlot, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, __bfSlot, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, insert, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4397,12 +4334,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4445,18 +4380,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L190 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, mapArray, tAfter } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4467,12 +4400,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4502,32 +4433,29 @@ export function initExample(__scope, _p = {}) {
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
   mapArray(() => items(), _s1, (item) => String(item), (item, __idx, __existing) => {
     const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __p = __existing ? null : [__el.firstChild]
-    { const __rt_s0 = __p ? tAfter(__p[0]) : $t(__el, 's0')[0]
-    if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(item()) }) }
+    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
+    createEffect(() => { __bfw_s0('s0', String(item())) })
     return __el
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).map((item) => \`<li data-key="\${item}"><!--bf:s0-->\${escapeText(item)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).map((item) => \`<li data-key="\${escapeAttr(item)}"><!--bf:s0-->\${escapeText(item)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L71 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initGreeting(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = _p.name
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4537,7 +4465,7 @@ export function Greeting(_p, __bfKey) { return createComponent('Greeting', _p, _
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L95 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -4551,12 +4479,11 @@ export function initCounter(__scope, _p = {}) {
   })
 
   const [_s2] = $(__scope, 's2')
-  const [_s0] = $t(__scope, 's0')
 
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   if (_s2) _s2.addEventListener('click', () => { setCount(n => n + 1) })
@@ -4567,18 +4494,16 @@ export function Counter(_p, __bfKey) { return createComponent('Counter', _p, __b
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L168 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, mapArray, tAfter } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4589,12 +4514,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4624,31 +4547,28 @@ export function initExample(__scope, _p = {}) {
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
   mapArray(() => items(), _s1, (item) => String(item), (item, __idx, __existing) => {
     const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __p = __existing ? null : [__el.firstChild]
-    { const __rt_s0 = __p ? tAfter(__p[0]) : $t(__el, 's0')[0]
-    if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(item()) }) }
+    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
+    createEffect(() => { __bfw_s0('s0', String(item())) })
     return __el
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).map((item) => \`<li data-key="\${item}"><!--bf:s0-->\${escapeText(item)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).map((item) => \`<li data-key="\${escapeAttr(item)}"><!--bf:s0-->\${escapeText(item)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L180 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, mapArray, tAfter } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4659,12 +4579,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4694,31 +4612,28 @@ export function initExample(__scope, _p = {}) {
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
   mapArray(() => items().filter(item => item.active), _s1, (item) => String(item.id), (item, __idx, __existing) => {
     const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __p = __existing ? null : [__el.firstChild]
-    { const __rt_s0 = __p ? tAfter(__p[0]) : $t(__el, 's0')[0]
-    if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(item().name) }) }
+    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
+    createEffect(() => { __bfw_s0('s0', String(item().name)) })
     return __el
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).filter(item => item.active).map((item) => \`<li data-key="\${item.id}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).filter(item => item.active).map((item) => \`<li data-key="\${escapeAttr(item.id)}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L194 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4729,12 +4644,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4765,15 +4678,15 @@ export function initExample(__scope, _p = {}) {
     items.forEach((t, __idx) => {
       let __iterEl = _s1.children[__idx]
       if (__iterEl) {
-        { const [__rt_s0] = $t(__iterEl, 's0')
-        if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(t.name) }) }
+        const __bfw_s0 = lazySlots(__iterEl, [{ id: 's0', kind: 'text', path: [] }])
+        createEffect(() => { __bfw_s0('s0', String(t.name)) })
       }
     })
   }
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${items.toSorted((a, b) => a.priority - b.priority).map((t) => \`<li data-key="\${t.id}"><!--bf:s0-->\${escapeText(t.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${items.toSorted((a, b) => a.priority - b.priority).map((t) => \`<li data-key="\${escapeAttr(t.id)}"><!--bf:s0-->\${escapeText(t.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
@@ -4802,18 +4715,16 @@ export function TodoList(_p, __bfKey) { return createComponent('TodoList', _p, _
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L260 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, insert, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4824,12 +4735,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4872,18 +4781,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/custom-adapter.md doc-examples L169 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4894,12 +4801,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4930,18 +4835,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/custom-adapter.md doc-examples L174 — (no label) 1`] = `
-"import { $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4952,12 +4855,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -4988,18 +4889,16 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/custom-adapter.md doc-examples L195 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5010,12 +4909,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5046,31 +4943,29 @@ export function initExample(__scope, _p = {}) {
     items.forEach((item, __idx) => {
       let __iterEl = _s1.children[__idx]
       if (__iterEl) {
-        { const [__rt_s0] = $t(__iterEl, 's0')
-        if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(item.name) }) }
+        const __bfw_s0 = lazySlots(__iterEl, [{ id: 's0', kind: 'text', path: [] }])
+        createEffect(() => { __bfw_s0('s0', String(item.name)) })
       }
     })
   }
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${items.map((item) => \`<li data-key="\${item.id}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${items.map((item) => \`<li data-key="\${escapeAttr(item.id)}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
 exports[`docs/core/adapters/custom-adapter.md doc-examples L200 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5081,12 +4976,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5117,15 +5010,15 @@ export function initExample(__scope, _p = {}) {
     items.forEach((item, __idx) => {
       let __iterEl = _s1.children[__idx]
       if (__iterEl) {
-        { const [__rt_s0] = $t(__iterEl, 's0')
-        if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(item.name) }) }
+        const __bfw_s0 = lazySlots(__iterEl, [{ id: 's0', kind: 'text', path: [] }])
+        createEffect(() => { __bfw_s0('s0', String(item.name)) })
       }
     })
   }
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${items.map((item) => \`<li data-key="\${item.id}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${items.map((item) => \`<li data-key="\${escapeAttr(item.id)}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
@@ -5139,18 +5032,16 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/advanced/compiler-internals.md doc-examples L126 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, mapArray, tAfter } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5161,12 +5052,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5196,15 +5085,14 @@ export function initExample(__scope, _p = {}) {
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
   mapArray(() => todos().filter(t => !t.done).toSorted((a, b) => a.date - b.date), _s1, (t) => String(t.id), (t, __idx, __existing) => {
     const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __p = __existing ? null : [__el.firstChild]
-    { const __rt_s0 = __p ? tAfter(__p[0]) : $t(__el, 's0')[0]
-    if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(t().name) }) }
+    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
+    createEffect(() => { __bfw_s0('s0', String(t().name)) })
     return __el
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).filter(t => !t.done).toSorted((a, b) => a.date - b.date).map((t) => \`<li data-key="\${t.id}"><!--bf:s0-->\${escapeText(t.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).filter(t => !t.done).toSorted((a, b) => a.date - b.date).map((t) => \`<li data-key="\${escapeAttr(t.id)}"><!--bf:s0-->\${escapeText(t.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
@@ -5271,18 +5159,16 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/advanced/performance.md doc-examples L67 — ✅ Stable key — DOM nodes reused when list changes 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, mapArray, tAfter } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5293,12 +5179,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5328,31 +5212,28 @@ export function initExample(__scope, _p = {}) {
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
   mapArray(() => items(), _s1, (item) => String(item.id), (item, __idx, __existing) => {
     const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __p = __existing ? null : [__el.firstChild]
-    { const __rt_s0 = __p ? tAfter(__p[0]) : $t(__el, 's0')[0]
-    if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(item().name) }) }
+    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
+    createEffect(() => { __bfw_s0('s0', String(item().name)) })
     return __el
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).map((item) => \`<li data-key="\${item.id}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).map((item) => \`<li data-key="\${escapeAttr(item.id)}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
 exports[`docs/core/advanced/performance.md doc-examples L70 — ❌ Index key — DOM nodes recreated on reorder 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, mapArray, tAfter } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.todo)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5363,12 +5244,10 @@ export function initItem(__scope, _p = {}) {
   if (!__scope) return
   const __scopeId = __scope.getAttribute('bf-s')
 
-  const [_s0] = $t(__scope, 's0')
-
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = String(_p.item)
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
 }
@@ -5398,15 +5277,14 @@ export function initExample(__scope, _p = {}) {
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
   mapArray(() => items(), _s1, (item, i) => String(i), (item, i, __existing) => {
     const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __p = __existing ? null : [__el.firstChild]
-    { const __rt_s0 = __p ? tAfter(__p[0]) : $t(__el, 's0')[0]
-    if (__rt_s0) createEffect(() => { __rt_s0.textContent = String(item().name) }) }
+    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
+    createEffect(() => { __bfw_s0('s0', String(item().name)) })
     return __el
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).map((item, i) => \`<li data-key="\${i}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).map((item, i) => \`<li data-key="\${escapeAttr(i)}"><!--bf:s0-->\${escapeText(item.name)}<!--/--></li>\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
@@ -5618,7 +5496,7 @@ export function TimelineBar(_p, __bfKey) { return createComponent('TimelineBar',
 `;
 
 exports[`docs/core/introduction.mdx doc-examples L15 — (no label) 1`] = `
-"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeText, escapeTextOrNode, hydrate, lazySlots } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -5628,12 +5506,11 @@ export function initCounter(__scope, _p = {}) {
   const [count, setCount] = createSignal(0)
 
   const [_s1] = $(__scope, 's1')
-  const [_s0] = $t(__scope, 's0')
 
-  let __anchor_s0 = _s0
+  const __bfw_s0 = lazySlots(__scope, [{ id: 's0', kind: 'markup', path: [] }])
   createEffect(() => {
     const __val = count()
-    __anchor_s0 = __bfText(__anchor_s0, __val)
+    __bfw_s0('s0', escapeTextOrNode(__val))
   })
 
   if (_s1) _s1.addEventListener('click', () => { setCount(n => n + 1) })