@barefootjs/jsx 0.27.0 → 0.28.1

package/dist/ir-to-client-js/imports.d.ts

@@ -2,9 +2,9 @@
  * Import detection and DOM import management.
  */
 import type { ComponentIR } from '../types.ts';
-export declare const RUNTIME_IMPORT_CANDIDATES: readonly ['createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount', 'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'patchLeaf', 'createDisposableEffect', 'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild', 'createPortal', 'provideContext', 'createContext', 'useContext', 'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode', 'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText', 'claimSlots', 'lazySlots', 'beginTurn', 'endTurn', 'date', 'formatDate'];
+export declare const RUNTIME_IMPORT_CANDIDATES: readonly ['createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount', 'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'mapArrayLazy', 'patchLeaf', 'createDisposableEffect', 'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild', 'createPortal', 'provideContext', 'createContext', 'useContext', 'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode', 'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText', 'claimSlots', 'lazySlots', 'lazyClaimSlots', 'textOrNode', 'beginTurn', 'endTurn', 'date', 'formatDate'];
 /** @deprecated Use RUNTIME_IMPORT_CANDIDATES */
-export declare const DOM_IMPORT_CANDIDATES: readonly ["createSignal", "createMemo", "createEffect", "onCleanup", "onMount", "hydrate", "insert", "getLoopChildren", "getLoopNodes", "mapArray", "mapArrayAnchored", "patchLeaf", "createDisposableEffect", "createComponent", "renderChild", "registerComponent", "registerTemplate", "initChild", "upsertChild", "createPortal", "provideContext", "createContext", "useContext", "forwardProps", "applyRestAttrs", "splitProps", "spreadAttrs", "styleToCss", "escapeAttr", "escapeText", "escapeTextOrNode", "qsa", "qsaItem", "qsaChildScope", "qsaChildScopes", "upsertChildItem", "__slot", "__bfSlot", "__bfText", "claimSlots", "lazySlots", "beginTurn", "endTurn", "date", "formatDate"];
+export declare const DOM_IMPORT_CANDIDATES: readonly ["createSignal", "createMemo", "createEffect", "onCleanup", "onMount", "hydrate", "insert", "getLoopChildren", "getLoopNodes", "mapArray", "mapArrayAnchored", "mapArrayLazy", "patchLeaf", "createDisposableEffect", "createComponent", "renderChild", "registerComponent", "registerTemplate", "initChild", "upsertChild", "createPortal", "provideContext", "createContext", "useContext", "forwardProps", "applyRestAttrs", "splitProps", "spreadAttrs", "styleToCss", "escapeAttr", "escapeText", "escapeTextOrNode", "qsa", "qsaItem", "qsaChildScope", "qsaChildScopes", "upsertChildItem", "__slot", "__bfSlot", "__bfText", "claimSlots", "lazySlots", "lazyClaimSlots", "textOrNode", "beginTurn", "endTurn", "date", "formatDate"];
 export declare const RUNTIME_MODULE = "@barefootjs/client/runtime";
 export declare const IMPORT_PLACEHOLDER = "/* __BAREFOOTJS_DOM_IMPORTS__ */";
 export declare const MODULE_CONSTANTS_PLACEHOLDER = "/* __MODULE_LEVEL_CONSTANTS__ */";
@@ -17,6 +17,30 @@ export declare function detectUsedImports(code: string): Set<string>;
  * compiler-emitted /runtime subpath).
  */
 export declare function collectUserDomImports(ir: ComponentIR): string[];
+/**
+ * Build the "is this local name used as a value in the generated code?"
+ * test used to decide which imported specifiers survive into the client
+ * bundle. Prefers a real value-reference set over the historical
+ * `\bname\b` text scan (#2432: an object key or string literal that
+ * merely spells an imported name used to emit a phantom import). Falls
+ * back to a substring scan when the generated text cannot be parsed
+ * cleanly — a partial parse would under-report references and DROP a
+ * needed import. The reference set is computed at most once per call.
+ *
+ * The fallback is a plain `includes()`, not a `\bname\b` regex: `\b` is
+ * defined over `[A-Za-z0-9_]`, so a `$`-prefixed name (`$fetch`, as
+ * exported by `ofetch`) or a non-ASCII local both sit outside a word
+ * boundary and would never match — silently dropping the import, the one
+ * failure direction this helper must never take. Worse, splicing
+ * `localName` straight into `new RegExp(...)` treated `$` as the
+ * end-of-input anchor, so `\b$fetch\b` couldn't match `$fetch` at all.
+ * `includes()` is deliberately COARSER than a word-boundary scan (it
+ * matches `helper` inside `helperFoo` too) — that's fine here: the
+ * fallback's only job is "never under-report", and over-keeping an
+ * import whose binding already exists is harmless, while dropping one is
+ * fatal.
+ */
+export declare function makeValueUsageTest(generatedCode: string): (localName: string) => boolean;
 /**
  * Collect external (non-DOM, non-component) imports that are used in generated code.
  * These are third-party libraries like @barefootjs/form, zod, etc. that need to be

package/dist/ir-to-client-js/imports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imports.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/imports.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,aAAa,CAAA;AAItD,eAAO,MAAM,yBAAyB,YACpC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EACpE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,kBAAkB,EAAE,WAAW,EAAE,wBAAwB,EAC7H,iBAAiB,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EACrG,cAAc,EACd,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAC/C,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAC3H,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAIxG,YAAY,EAAE,WAAW,EAEzB,WAAW,EAAE,SAAS,EAItB,MAAM,EAIN,YAAY,CACJ,CAAA;AAEV,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,wqBAA4B,CAAA;AAE9D,eAAO,MAAM,cAAc,+BAA+B,CAAA;AAE1D,eAAO,MAAM,kBAAkB,qCAAqC,CAAA;AACpE,eAAO,MAAM,4BAA4B,qCAAqC,CAAA;AAE9E;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAqB3D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,CAiB/D;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAmCvH"}
+{"version":3,"file":"imports.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/imports.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,aAAa,CAAA;AAKtD,eAAO,MAAM,yBAAyB,YACpC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EACpE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,kBAAkB,EAAE,cAAc,EAAE,WAAW,EAAE,wBAAwB,EAC7I,iBAAiB,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EACrG,cAAc,EACd,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAC/C,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAC3H,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAUxG,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAEzD,WAAW,EAAE,SAAS,EAItB,MAAM,EAIN,YAAY,CACJ,CAAA;AAEV,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,wtBAA4B,CAAA;AAE9D,eAAO,MAAM,cAAc,+BAA+B,CAAA;AAE1D,eAAO,MAAM,kBAAkB,qCAAqC,CAAA;AACpE,eAAO,MAAM,4BAA4B,qCAAqC,CAAA;AAE9E;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAqB3D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,CAoB/D;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,GAAG,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAWxF;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAsCvH"}

package/dist/value-references.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Single door for "is this identifier a VALUE reference in emitted JS".
+ *
+ * Replaces `\bname\b` text scans at the import-emission sites (#2432): a
+ * regex scan can't tell a genuine value reference (`paperColor({ ... })`)
+ * from an object key or string literal that merely spells an imported
+ * name (`{ Theme: 'テーマ' }`). That false match used to make
+ * `collectExternalImports` re-emit a per-specifier type-only import
+ * (`import { paperColor, type Theme } from '../lib/theme'`) as a VALUE
+ * import, which the CLI's relative-import inliner then placed in the IIFE's
+ * `return { … }` with no binding — `ReferenceError: Theme is not defined`
+ * at load, killing the whole page's client JS.
+ *
+ * `packages/cli`'s `detectStrippedReferences` (in `resolve-imports.ts`)
+ * shares the same classifier for its own dangling-reference scan, so the
+ * two "is this a real use" checks in the pipeline can never drift apart.
+ */
+import ts from 'typescript';
+/**
+ * Identifier-position classifier: returns `true` when `id` is being USED
+ * as a value, `false` when it's a declaration name, property key, member-
+ * access name, or other non-reference slot.
+ *
+ * A ShorthandPropertyAssignment (`{ Theme }`) intentionally counts as a
+ * reference — it reads the binding, it doesn't just spell its name.
+ *
+ * Caveat: this is a syntactic test, not a scope analysis. If a local
+ * function parameter happens to share a name with an imported binding,
+ * references inside that function's body will count as references to
+ * the import (false positive). Acceptable: over-counting a reference
+ * just means we keep an import we didn't strictly need, which is a
+ * strict improvement over the alternative failure direction (dropping a
+ * needed import and producing a `ReferenceError`).
+ */
+export declare function isValueReferenceIdentifier(id: ts.Identifier): boolean;
+/**
+ * Parse `code` and collect the text of every identifier that is a VALUE
+ * reference per `isValueReferenceIdentifier`.
+ *
+ * Returns `null` when the text did not parse cleanly. `null` means
+ * "cannot answer" — callers MUST fall back to their previous (regex-scan)
+ * behaviour rather than treating it as an empty set. Narrowing on a
+ * partial parse would DROP a needed import, which is the failure
+ * direction we must never take (a phantom missing-import build failure
+ * is recoverable; a silently dead client bundle is not).
+ */
+export declare function collectValueReferencedNames(code: string): Set<string> | null;
+//# sourceMappingURL=value-references.d.ts.map

package/dist/value-references.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-references.d.ts","sourceRoot":"","sources":["../src/value-references.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,GAAG,OAAO,CAgCrE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CA0B5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/jsx",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description": "JSX compiler for BarefootJS - transforms JSX to server HTML + client JS",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,7 @@
     "directory": "packages/jsx"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.27.0"
+    "@barefootjs/shared": "0.28.1"
   },
   "peerDependencies": {
     "@barefootjs/client": ">=0.2.0",

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

@@ -4380,7 +4380,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L190 — (no label) 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4431,11 +4431,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __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 __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item())) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items(), _s1, (item) => String(item), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item()
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item()
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -4494,7 +4515,7 @@ 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 { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4545,11 +4566,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __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 __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item())) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items(), _s1, (item) => String(item), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item()
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item()
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -4559,7 +4601,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L180 — (no label) 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4610,11 +4652,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __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 __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item().name)) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items().filter(item => item.active), _s1, (item) => String(item.id), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item().name
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item().name
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -5032,7 +5095,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/advanced/compiler-internals.md doc-examples L126 — (no label) 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -5083,11 +5146,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __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 __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(t().name)) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => todos().filter(t => !t.done).toSorted((a, b) => a.date - b.date), _s1, (t) => String(t.id), {
+    createRow: (__e, __idx) => {
+      const t = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = t().name
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const t = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = t().name
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -5159,7 +5243,7 @@ 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 { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -5210,11 +5294,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __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 __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item().name)) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items(), _s1, (item) => String(item.id), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item().name
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item().name
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -5224,7 +5329,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/advanced/performance.md doc-examples L70 — ❌ Index key — DOM nodes recreated on reorder 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -5275,11 +5380,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __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 __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item().name)) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items(), _s1, (item, i) => String(i), {
+    createRow: (__e, i) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item().name
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item().name
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }

package/src/__tests__/client-js-generation.test.ts

@@ -2638,7 +2638,10 @@ describe('Client JS generation', () => {
       const js = result.files.find(f => f.type === 'clientJs')!.content
       // The branch arm's mapArray call must live inside a
       // createDisposableEffect that is pushed into __disposers.
-      expect(js).toMatch(/__disposers\.push\(createDisposableEffect\(\(\)\s*=>\s*\{[\s\S]*?mapArray\(/)
+      // `mapArray(` or `mapArrayLazy(` — a lazy-row-eligible branch loop
+      // (spec/slot-unification.md §9.4) uses the latter and has exactly the
+      // same disposal obligation.
+      expect(js).toMatch(/__disposers\.push\(createDisposableEffect\(\(\)\s*=>\s*\{[\s\S]*?mapArray(Lazy)?\(/)
     })
 
     test('nested conditional inside a conditional branch is wrapped in createDisposableEffect', () => {

package/src/__tests__/composite-branch-loop.test.ts

@@ -53,7 +53,10 @@ describe('composite loops inside conditional branches (#724)', () => {
     const js = clientJs!.content
 
     // Should use mapArray inside the branch's bindEvents
-    expect(js).toContain('mapArray(')
+    // `mapArray(` or `mapArrayLazy(` — a lazy-row-eligible branch loop
+    // (spec/slot-unification.md §9.4) uses the latter; either satisfies
+    // "keyed reconciliation, not a composite/component shape".
+    expect(js).toMatch(/\bmapArray(Lazy)?\(/)
 
     // After O-1's mode-collapse PR, child component init goes through the
     // runtime `upsertChild` helper instead of an emit-side
@@ -96,7 +99,10 @@ describe('composite loops inside conditional branches (#724)', () => {
     const js = clientJs!.content
 
     // Should use mapArray for per-item reactivity
-    expect(js).toContain('mapArray(')
+    // `mapArray(` or `mapArrayLazy(` — a lazy-row-eligible branch loop
+    // (spec/slot-unification.md §9.4) uses the latter; either satisfies
+    // "keyed reconciliation, not a composite/component shape".
+    expect(js).toMatch(/\bmapArray(Lazy)?\(/)
 
     // Should NOT use createComponent inside the init body (no child
     // components in this fixture). The CLI also emits a callable shim
@@ -147,7 +153,10 @@ describe('composite loops inside conditional branches (#724)', () => {
     const js = clientJs!.content
 
     // Should use mapArray for the loop
-    expect(js).toContain('mapArray(')
+    // `mapArray(` or `mapArrayLazy(` — a lazy-row-eligible branch loop
+    // (spec/slot-unification.md §9.4) uses the latter; either satisfies
+    // "keyed reconciliation, not a composite/component shape".
+    expect(js).toMatch(/\bmapArray(Lazy)?\(/)
 
     // Should have event delegation (addEventListener + closest pattern)
     expect(js).toContain(".addEventListener('click', (__bfEvt) => {")

package/src/__tests__/conditional-mapArray-key.test.ts

@@ -29,11 +29,17 @@ function clientJs(source: string, file = 'CondKey.tsx'): string {
   return cjs!.content
 }
 
+/**
+ * Reconciler call sites, whichever family they use. A lazy-row-eligible loop
+ * (spec/slot-unification.md §9.4) emits `mapArrayLazy(`; everything else keeps
+ * `mapArray(`. The key expression this suite asserts on is the same third
+ * argument in both shapes, so match the family, not one member of it.
+ */
 function mapArrayCalls(content: string): string[] {
   return content
     .split('\n')
     .map((ln) => ln.trim())
-    .filter((ln) => ln.startsWith('mapArray('))
+    .filter((ln) => ln.startsWith('mapArray(') || ln.startsWith('mapArrayLazy('))
 }
 
 describe('mapArray key extraction across conditional branches (#1098)', () => {

package/src/__tests__/create-selector.test.ts

@@ -7,9 +7,14 @@
  * `isSelected(row.id)` as reactive with no analyzer changes — the callee's
  * type carries the brand, not the call's return type. These tests pin:
  *   - the classic js-framework-benchmark row compiles with `isSelected(row.id)`
- *     wired to a single per-row `createEffect` (not the legacy
- *     `selected() === row.id` shape, which would still work but subscribes
- *     every row to the raw signal)
+ *     wired through the lazy row graph — ZERO emitted per-row effects, the
+ *     loop-level effect living in `mapArrayLazy` (spec §9). Until §9.3a
+ *     was lifted this shape was gate-INELIGIBLE (an opaque local whose call
+ *     is the reactive read could not be primed) and compiled to one per-row
+ *     `createEffect`; the runtime re-subscribe seam replaced that, so the
+ *     loop is emitted like any other. Either way it is never
+ *     the legacy `selected() === row.id` shape, which subscribes every row
+ *     to the raw signal.
  *   - the loop-param accessor wrap applies only to the call ARGUMENT
  *     (`row.id` -> `row().id`), leaving the `isSelected` callee untouched
  *   - the hoisted skeleton fast path (#2223) still fires for a selector-driven
@@ -36,7 +41,7 @@ function compile(source: string, filename: string): { clientJs: string; template
 }
 
 describe('createSelector (perf, #2143 gap 5)', () => {
-  test('isSelected(row.id) in a loop body compiles to one per-row createEffect', () => {
+  test('isSelected(row.id) in a loop body compiles through the lazy row graph', () => {
     const source = `
       'use client'
       import { createSignal, createSelector } from '@barefootjs/client'
@@ -66,12 +71,21 @@ describe('createSelector (perf, #2143 gap 5)', () => {
     // The callee itself is never rewritten to an accessor call.
     expect(clientJs).not.toContain('isSelected()(')
 
-    // Exactly one createEffect wraps the selector-driven class attribute —
-    // not the O(rows) `selected() === row.id` shape.
+    // The selector-driven class attribute costs NO emitted effect at all:
+    // the loop is lazy-eligible, so its one loop-level effect lives inside
+    // `mapArrayLazy` rather than in the emitted row body. It is also never
+    // the O(rows) `selected() === row.id` shape.
     const effectCount = (clientJs.match(/createEffect\(/g) ?? []).length
-    expect(effectCount).toBe(1)
+    expect(effectCount).toBe(0)
+    expect(clientJs).toContain('mapArrayLazy(')
     expect(clientJs).not.toContain('selected() ===')
 
+    // `isSelected` is an opaque local (its CALL is the reactive read). Nothing
+    // in the emission marks that: the runtime's re-subscribe seam applies to
+    // every loop-level outer effect, so the compiler has no judgement to
+    // encode here (§9.3a).
+    expect(clientJs).not.toContain('outerNeedsResubscribe')
+
     // The hoisted skeleton fast path (#2223) still fires: a single-line
     // renderItem clones from a once-per-loop template.
     expect(clientJs).toMatch(/const __tpl_\w+ = document\.createElement\('template'\)/)

package/src/__tests__/ir-to-client-js/imports.test.ts

@@ -1,5 +1,5 @@
 import { describe, test, expect } from 'bun:test'
-import { collectExternalImports } from '../../ir-to-client-js/imports'
+import { collectExternalImports, collectUserDomImports } from '../../ir-to-client-js/imports'
 import type { ComponentIR, ImportInfo, SourceLocation } from '../../types'
 
 const dummyLoc: SourceLocation = { file: 'test.tsx', start: { line: 1, column: 0 }, end: { line: 1, column: 0 } }
@@ -229,4 +229,101 @@ describe('collectExternalImports', () => {
       "import { z } from 'zod'",
     ])
   })
+
+  // #2432: `collectExternalImports` used a `\bname\b` text scan to decide
+  // which specifiers survive into the client bundle. That scan never
+  // consulted the per-specifier `isTypeOnly` flag, so a per-specifier
+  // `import { paperColor, type Theme } from '../lib/theme'` re-emitted
+  // `Theme` as a VALUE import whenever the word "Theme" merely appeared in
+  // the generated code (e.g. as an object key) — the CLI's relative-import
+  // inliner then put `Theme` in the IIFE's `return { … }` with no binding,
+  // producing `ReferenceError: Theme is not defined` at load.
+  test('per-specifier type-only specifier is not emitted, while its value sibling is (#2432)', () => {
+    const ir: ReturnType<typeof makeIR> = makeIR([{
+      source: '../lib/theme',
+      specifiers: [
+        { name: 'paperColor', alias: null, isDefault: false, isNamespace: false },
+        { name: 'Theme', alias: null, isDefault: false, isNamespace: false, isTypeOnly: true },
+      ],
+      isTypeOnly: false,
+      loc: dummyLoc,
+    }])
+    const code = "const labels = { Theme: 'テーマ' };\nconst c = paperColor({ paper: '#fff' });"
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { paperColor } from '../lib/theme'"])
+  })
+
+  test('a value specifier that appears ONLY as an object key is not emitted (#2432)', () => {
+    const ir = makeIR([makeImport('./utils', ['helper'])])
+    const code = 'const o = { helper: 1 };'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
+  test('a value specifier that appears ONLY inside a string literal is not emitted (#2432)', () => {
+    const ir = makeIR([makeImport('./utils', ['helper'])])
+    const code = "const s = 'helper is a function';"
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
+  test('a value specifier that appears ONLY as a property-access name is not emitted (#2432)', () => {
+    const ir = makeIR([makeImport('./utils', ['helper'])])
+    const code = 'obj.helper();'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
+  test('a value specifier used via shorthand property IS emitted (#2432)', () => {
+    const ir = makeIR([makeImport('./utils', ['helper'])])
+    const code = 'const o = { helper };'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { helper } from './utils'"])
+  })
+
+  test('unparseable generated text falls back to the text scan (#2432)', () => {
+    const ir = makeIR([makeImport('some-lib', ['helper'])])
+    const code = 'MyComponent helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { helper } from 'some-lib'"])
+  })
+
+  // These two pin the fallback branch specifically (generated text that does
+  // NOT parse cleanly, so `makeValueUsageTest` falls back to a substring
+  // scan rather than the AST-based value-reference set). #2432: the
+  // fallback used to be a `new RegExp(`\\b${localName}\\b`)` scan, which
+  // silently DROPPED the import for either shape below — `\b` isn't defined
+  // for `$` or non-ASCII characters, and `$` is also a regex metacharacter
+  // (end-of-input anchor) when spliced unescaped into `new RegExp(...)`, so
+  // `\b$fetch\b` could never match `$fetch` at all. Dropping the import is
+  // the one failure direction this helper must never take.
+  test('fallback matches a $-prefixed specifier (#2432)', () => {
+    const ir = makeIR([makeImport('ofetch', ['$fetch'])])
+    const code = 'MyComponent $fetch()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { $fetch } from 'ofetch'"])
+  })
+
+  test('fallback matches a non-ASCII specifier (#2432)', () => {
+    const ir = makeIR([makeImport('some-lib', ['日本語'])])
+    const code = 'MyComponent 日本語()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { 日本語 } from 'some-lib'"])
+  })
+})
+
+describe('collectUserDomImports', () => {
+  test('per-specifier type-only specifier is not emitted from the runtime subpath (#2432)', () => {
+    const ir = makeIR([{
+      source: '@barefootjs/client',
+      specifiers: [
+        { name: 'createSignal', alias: null, isDefault: false, isNamespace: false },
+        { name: 'Signal', alias: null, isDefault: false, isNamespace: false, isTypeOnly: true },
+      ],
+      isTypeOnly: false,
+      loc: dummyLoc,
+    }])
+    const result = collectUserDomImports(ir)
+    expect(result).toEqual(['createSignal'])
+  })
 })