@barefootjs/client 0.33.4 → 0.34.0

package/dist/csr-adapter.js

@@ -168757,10 +168757,22 @@ Additional information: BADCLIENT: Bad error code, ${badCode} not found in range
 var import_typescript25 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/analyzer.ts
-var import_typescript9 = __toESM(require_typescript(), 1);
+var import_typescript10 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/expression-parser.ts
 var import_typescript = __toESM(require_typescript(), 1);
+
+// ../jsx/src/lowering-registry.ts
+var plugins = [];
+function registerLoweringPlugin(plugin) {
+  const existing = plugins.findIndex((p) => p.name === plugin.name);
+  if (existing >= 0)
+    plugins[existing] = plugin;
+  else
+    plugins.push(plugin);
+}
+
+// ../jsx/src/expression-parser.ts
 var UNSUPPORTED_METHODS = new Set([
   "filter",
   "map",
@@ -168833,7 +168845,7 @@ var EVAL_MATH_METHODS = new Set([
 ]);
 
 // ../jsx/src/prop-rewrite.ts
-var import_typescript5 = __toESM(require_typescript(), 1);
+var import_typescript7 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/ir-to-client-js/utils.ts
 var import_typescript3 = __toESM(require_typescript(), 1);
@@ -168967,18 +168979,45 @@ var SVG_XML_CAMEL_ATTRS = new Set([
   "zoomAndPan"
 ]);
 // ../jsx/src/ir-to-client-js/csr-substitute.ts
+var import_typescript5 = __toESM(require_typescript(), 1);
+
+// ../jsx/src/props-binding.ts
 var import_typescript4 = __toESM(require_typescript(), 1);
+function isIdentifierName(key) {
+  if (key.length === 0)
+    return false;
+  for (let i = 0;i < key.length; ) {
+    const cp = key.codePointAt(i);
+    const ok = i === 0 ? import_typescript4.default.isIdentifierStart(cp, import_typescript4.default.ScriptTarget.Latest) : import_typescript4.default.isIdentifierPart(cp, import_typescript4.default.ScriptTarget.Latest);
+    if (!ok)
+      return false;
+    i += cp > 65535 ? 2 : 1;
+  }
+  return true;
+}
+function propsDestructureBinding(p) {
+  const callerKey = p.sourceName ?? p.name;
+  const localName = p.name;
+  const binding = callerKey === localName ? localName : `${isIdentifierName(callerKey) ? callerKey : JSON.stringify(callerKey)}: ${localName}`;
+  return p.defaultValue ? `${binding} = ${p.defaultValue}` : binding;
+}
+var EMPTY_SET = new Set;
+
+// ../jsx/src/ir-to-client-js/csr-substitute.ts
 function extractFreeIdentifiersFromText(text) {
   if (!text || text.trim().length === 0)
     return new Set;
-  const sf = import_typescript4.default.createSourceFile("__free_ids__.ts", `(${text});`, import_typescript4.default.ScriptTarget.Latest, true, import_typescript4.default.ScriptKind.TS);
+  const sf = import_typescript5.default.createSourceFile("__free_ids__.ts", `(${text});`, import_typescript5.default.ScriptTarget.Latest, true, import_typescript5.default.ScriptKind.TS);
   const stmt = sf.statements[0];
-  if (!stmt || !import_typescript4.default.isExpressionStatement(stmt))
+  if (!stmt || !import_typescript5.default.isExpressionStatement(stmt))
     return new Set;
-  const expr = import_typescript4.default.isParenthesizedExpression(stmt.expression) ? stmt.expression.expression : stmt.expression;
+  const expr = import_typescript5.default.isParenthesizedExpression(stmt.expression) ? stmt.expression.expression : stmt.expression;
   return extractFreeIdentifiersFromNode(expr);
 }
 
+// ../jsx/src/ir-to-client-js/rewrite-props-object.ts
+var import_typescript6 = __toESM(require_typescript(), 1);
+
 // ../jsx/src/scope/binding-scope.ts
 class BindingScope {
   frames;
@@ -169100,27 +169139,6 @@ var SKELETON_PATH_FORCE_CLOSE_GROUPS = [
   new Set(["li"])
 ];
 
-// ../jsx/src/props-binding.ts
-var import_typescript6 = __toESM(require_typescript(), 1);
-function isIdentifierName(key) {
-  if (key.length === 0)
-    return false;
-  for (let i = 0;i < key.length; ) {
-    const cp = key.codePointAt(i);
-    const ok = i === 0 ? import_typescript6.default.isIdentifierStart(cp, import_typescript6.default.ScriptTarget.Latest) : import_typescript6.default.isIdentifierPart(cp, import_typescript6.default.ScriptTarget.Latest);
-    if (!ok)
-      return false;
-    i += cp > 65535 ? 2 : 1;
-  }
-  return true;
-}
-function propsDestructureBinding(p) {
-  const callerKey = p.sourceName ?? p.name;
-  const localName = p.name;
-  const binding = callerKey === localName ? localName : `${isIdentifierName(callerKey) ? callerKey : JSON.stringify(callerKey)}: ${localName}`;
-  return p.defaultValue ? `${binding} = ${p.defaultValue}` : binding;
-}
-
 // ../jsx/src/instrumentation.ts
 var _counters = freshCounters();
 function freshCounters() {
@@ -169134,20 +169152,21 @@ function freshCounters() {
 }
 
 // ../jsx/src/analyzer-context.ts
-var import_typescript8 = __toESM(require_typescript(), 1);
+var import_typescript9 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/strip-types.ts
-var import_typescript7 = __toESM(require_typescript(), 1);
+var import_typescript8 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/analyzer-context.ts
-var _typePrinter = import_typescript8.default.createPrinter({ removeComments: true, omitTrailingSemicolon: true });
-var _blankTypeSourceFile = import_typescript8.default.createSourceFile("__bf_types__.ts", "", import_typescript8.default.ScriptTarget.Latest);
+var _typePrinter = import_typescript9.default.createPrinter({ removeComments: true, omitTrailingSemicolon: true });
+var _blankTypeSourceFile = import_typescript9.default.createSourceFile("__bf_types__.ts", "", import_typescript9.default.ScriptTarget.Latest);
 
 // ../jsx/src/errors.ts
 var ErrorCodes = {
   MISSING_USE_CLIENT: "BF001",
   CLIENT_IMPORTING_SERVER: "BF003",
   SIGNAL_OUTSIDE_COMPONENT: "BF011",
+  PRIMITIVE_VIA_NAMESPACE_IMPORT: "BF013",
   UNSUPPORTED_JSX_PATTERN: "BF021",
   MISSING_KEY_IN_LIST: "BF023",
   MISSING_KEY_IN_NESTED_LIST: "BF024",
@@ -169180,6 +169199,7 @@ var errorMessages = {
   [ErrorCodes.MISSING_USE_CLIENT]: "'use client' directive required for components with createSignal or event handlers",
   [ErrorCodes.CLIENT_IMPORTING_SERVER]: "Client component cannot import server component",
   [ErrorCodes.SIGNAL_OUTSIDE_COMPONENT]: "Module-level reactive declaration (createSignal / createMemo) is not allowed. " + "The downstream codegen drops the declaration silently and every reference becomes a ReferenceError at SSR and at hydrate. " + "Move the declaration inside a component function so each mount gets its own state.",
+  [ErrorCodes.PRIMITIVE_VIA_NAMESPACE_IMPORT]: "Reactive primitive called through a namespace import of '@barefootjs/client' (import * as ns) is not recognized; " + "the declaration is dropped and its references throw ReferenceError at hydrate. Import the primitive by name instead.",
   [ErrorCodes.UNSUPPORTED_JSX_PATTERN]: "Unsupported JSX pattern",
   [ErrorCodes.MISSING_KEY_IN_LIST]: "Missing key attribute in list rendering. Add a key prop for efficient updates",
   [ErrorCodes.MISSING_KEY_IN_NESTED_LIST]: "Nested .map() loop requires key attribute for event delegation. Add a key prop to elements in the inner loop",
@@ -169371,46 +169391,46 @@ function extractFreeIdentifiersFromNode(node) {
   const ids = new Set;
   const boundNames = new Set;
   function addBindingNames(name, out) {
-    if (import_typescript9.default.isIdentifier(name))
+    if (import_typescript10.default.isIdentifier(name))
       out.push(name.text);
-    else if (import_typescript9.default.isObjectBindingPattern(name))
+    else if (import_typescript10.default.isObjectBindingPattern(name))
       name.elements.forEach((e) => addBindingNames(e.name, out));
-    else if (import_typescript9.default.isArrayBindingPattern(name))
+    else if (import_typescript10.default.isArrayBindingPattern(name))
       name.elements.forEach((e) => {
-        if (!import_typescript9.default.isOmittedExpression(e))
+        if (!import_typescript10.default.isOmittedExpression(e))
           addBindingNames(e.name, out);
       });
   }
   function visit(n) {
-    if (import_typescript9.default.isTypeNode(n))
+    if (import_typescript10.default.isTypeNode(n))
       return;
-    if (import_typescript9.default.isIdentifier(n)) {
+    if (import_typescript10.default.isIdentifier(n)) {
       const parent = n.parent;
-      if (parent && import_typescript9.default.isPropertyAccessExpression(parent) && parent.name === n)
+      if (parent && import_typescript10.default.isPropertyAccessExpression(parent) && parent.name === n)
         return;
-      if (parent && import_typescript9.default.isPropertyAssignment(parent) && parent.name === n)
+      if (parent && import_typescript10.default.isPropertyAssignment(parent) && parent.name === n)
         return;
-      if (parent && import_typescript9.default.isParameter(parent) && parent.name === n)
+      if (parent && import_typescript10.default.isParameter(parent) && parent.name === n)
         return;
-      if (parent && import_typescript9.default.isVariableDeclaration(parent) && parent.name === n)
+      if (parent && import_typescript10.default.isVariableDeclaration(parent) && parent.name === n)
         return;
       if (boundNames.has(n.text))
         return;
       ids.add(n.text);
       return;
     }
-    if (import_typescript9.default.isArrowFunction(n)) {
+    if (import_typescript10.default.isArrowFunction(n)) {
       const params = [];
       for (const p of n.parameters)
         addBindingNames(p.name, params);
       for (const name of params)
         boundNames.add(name);
-      import_typescript9.default.forEachChild(n, visit);
+      import_typescript10.default.forEachChild(n, visit);
       for (const name of params)
         boundNames.delete(name);
       return;
     }
-    import_typescript9.default.forEachChild(n, visit);
+    import_typescript10.default.forEachChild(n, visit);
   }
   visit(node);
   return ids;
@@ -169433,7 +169453,7 @@ var REACTIVE_PRIMITIVES = new Set([
 ]);
 
 // ../jsx/src/jsx-to-ir.ts
-var import_typescript13 = __toESM(require_typescript(), 1);
+var import_typescript14 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/types.ts
 var SCOPE_FORBIDDEN = {
@@ -169469,7 +169489,7 @@ var REACTIVE_BINDING_KINDS = new Set([
 ]);
 
 // ../jsx/src/module-exports.ts
-var import_typescript10 = __toESM(require_typescript(), 1);
+var import_typescript11 = __toESM(require_typescript(), 1);
 function formatParamWithType(p) {
   const rest = p.isRest ? "..." : "";
   const optional = p.optional ? "?" : "";
@@ -169504,21 +169524,21 @@ function findAssignedNames(bodyText, candidates) {
   const assigned = new Set;
   if (candidates.size === 0)
     return assigned;
-  const sf = import_typescript10.default.createSourceFile("bf-assignment-scan.tsx", bodyText, import_typescript10.default.ScriptTarget.Latest, false, import_typescript10.default.ScriptKind.TSX);
+  const sf = import_typescript11.default.createSourceFile("bf-assignment-scan.tsx", bodyText, import_typescript11.default.ScriptTarget.Latest, false, import_typescript11.default.ScriptKind.TSX);
   const record = (target) => {
-    if (import_typescript10.default.isIdentifier(target) && candidates.has(target.text)) {
+    if (import_typescript11.default.isIdentifier(target) && candidates.has(target.text)) {
       assigned.add(target.text);
     }
   };
   const visit = (node) => {
-    if (import_typescript10.default.isBinaryExpression(node) && isAssignmentOperator(node.operatorToken.kind)) {
+    if (import_typescript11.default.isBinaryExpression(node) && isAssignmentOperator(node.operatorToken.kind)) {
       record(node.left);
-    } else if ((import_typescript10.default.isPrefixUnaryExpression(node) || import_typescript10.default.isPostfixUnaryExpression(node)) && (node.operator === import_typescript10.default.SyntaxKind.PlusPlusToken || node.operator === import_typescript10.default.SyntaxKind.MinusMinusToken)) {
+    } else if ((import_typescript11.default.isPrefixUnaryExpression(node) || import_typescript11.default.isPostfixUnaryExpression(node)) && (node.operator === import_typescript11.default.SyntaxKind.PlusPlusToken || node.operator === import_typescript11.default.SyntaxKind.MinusMinusToken)) {
       record(node.operand);
     }
-    import_typescript10.default.forEachChild(node, visit);
+    import_typescript11.default.forEachChild(node, visit);
   };
-  import_typescript10.default.forEachChild(sf, visit);
+  import_typescript11.default.forEachChild(sf, visit);
   return assigned;
 }
 function closeOverWritersOfMutableBindings(primaryRefs, declarations, mutableNames) {
@@ -169541,14 +169561,14 @@ function closeOverWritersOfMutableBindings(primaryRefs, declarations, mutableNam
   return reachable;
 }
 function isAssignmentOperator(kind) {
-  return kind >= import_typescript10.default.SyntaxKind.FirstAssignment && kind <= import_typescript10.default.SyntaxKind.LastAssignment;
+  return kind >= import_typescript11.default.SyntaxKind.FirstAssignment && kind <= import_typescript11.default.SyntaxKind.LastAssignment;
 }
 
 // ../jsx/src/reactivity-checker.ts
-var import_typescript11 = __toESM(require_typescript(), 1);
+var import_typescript12 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/free-refs.ts
-var import_typescript12 = __toESM(require_typescript(), 1);
+var import_typescript13 = __toESM(require_typescript(), 1);
 var _bindingMapCache = new WeakMap;
 
 // ../jsx/src/to-locale-date-lowering.ts
@@ -169996,28 +170016,16 @@ var KEYWORDS_AND_GLOBALS = new Set([
 ]);
 
 // ../jsx/src/ir-to-client-js/walk-prop-accesses.ts
-var import_typescript14 = __toESM(require_typescript(), 1);
-
-// ../jsx/src/ir-to-client-js/imports.ts
-var import_typescript16 = __toESM(require_typescript(), 1);
-
-// ../jsx/src/value-references.ts
 var import_typescript15 = __toESM(require_typescript(), 1);
 
-// ../jsx/src/relocate.ts
+// ../jsx/src/ir-to-client-js/imports.ts
 var import_typescript17 = __toESM(require_typescript(), 1);
 
-// ../jsx/src/lowering-registry.ts
-var plugins = [];
-function registerLoweringPlugin(plugin) {
-  const existing = plugins.findIndex((p) => p.name === plugin.name);
-  if (existing >= 0)
-    plugins[existing] = plugin;
-  else
-    plugins.push(plugin);
-}
+// ../jsx/src/value-references.ts
+var import_typescript16 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/relocate.ts
+var import_typescript18 = __toESM(require_typescript(), 1);
 var REGISTRY_SAFE_BINDING_KINDS = new Set([
   "global",
   "module-import",
@@ -170184,10 +170192,10 @@ function formatDateLocalNames(metadata) {
 }
 
 // ../jsx/src/ir-to-client-js/prune-unused-prop-extractions.ts
-var import_typescript18 = __toESM(require_typescript(), 1);
+var import_typescript19 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/ir-to-client-js/control-flow/plan/lazy-preamble.ts
-var import_typescript19 = __toESM(require_typescript(), 1);
+var import_typescript20 = __toESM(require_typescript(), 1);
 var NO_PREAMBLE = {
   lazySafe: true,
   facts: { declaredNames: new Set, freeNames: new Set }
@@ -170237,7 +170245,7 @@ var INERT_BINDING_GLOBALS = new Set([
 ]);
 
 // ../jsx/src/ir-to-client-js/emit-reactive.ts
-var import_typescript20 = __toESM(require_typescript(), 1);
+var import_typescript21 = __toESM(require_typescript(), 1);
 
 // ../jsx/src/ir-to-client-js/control-flow/stringify/event-delegation.ts
 var NON_BUBBLING_EVENTS = new Set([
@@ -170251,9 +170259,6 @@ var NON_BUBBLING_EVENTS = new Set([
   "pointerleave"
 ]);
 
-// ../jsx/src/ir-to-client-js/rewrite-props-object.ts
-var import_typescript21 = __toESM(require_typescript(), 1);
-
 // ../jsx/src/ir-to-client-js/source-map.ts
 var BASE64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 function encodeVLQ(value) {

package/dist/runtime/component.d.ts

@@ -6,6 +6,16 @@
  */
 import type { ComponentDef } from './types.ts';
 export declare function setParentScopeId(id: string | null): void;
+/**
+ * Run `fn` with `_parentScopeId` temporarily set to `id`, restoring the
+ * previous value afterward (even if `fn` throws). A static loop's
+ * materialize `forEach` (#2833) runs during `init`, not template
+ * evaluation, so `_parentScopeId` is null there — this lets it evaluate the
+ * row's template as if it were still inside the parent's own template, so
+ * `renderChild` stamps `bf-h` with the same `__scopeId` the static init's
+ * `qsaChildScopes` selector interpolates.
+ */
+export declare function withParentScope<T>(id: string | null, fn: () => T): T;
 /**
  * Where `mapArray` wants a fresh loop row connected before its `init` runs.
  *
@@ -81,9 +91,13 @@ export interface CreateComponentSlotInfo {
     mount: string;
 }
 /**
- * The `HTMLElement | DocumentFragment` return covers exactly one shape: a
+ * The `HTMLElement | DocumentFragment` return covers exactly two shapes: a
  * BARE call (no `mountAt`, no ambient row-mount point) for a genuine
- * fragment-root component (#2722). Every other combination — a normal
+ * fragment-root component (#2722), or for a root-is-a-child-call comment
+ * wrapper mounted at the top level (#2728 — same rule: no single element
+ * can carry the `<!--bf-scope:-->` boundary comments to an unknown
+ * destination, so the caller gets the whole bundle back as a fragment).
+ * Every other combination — a normal
  * component, or a fragment-root one with `mountAt`/row-mount already
  * telling this function where to connect — still returns the real,
  * single `HTMLElement`, unchanged (that element stays the caller-visible
@@ -118,9 +132,17 @@ export declare function createComponent(nameOrDef: string | ComponentDef, props?
  * @param name - Component name (e.g., 'Spinner')
  * @param props - Props to pass to the template
  * @param key - Optional key for list reconciliation
+ * @param slotSuffix - Slot id in the parent (e.g. 's0') this child was rendered into
+ * @param loopItemRoot - True when this child IS a keyed loop's row root
+ *   (`IRComponent.loopItemRoot`, #2833): it still gets slot identity
+ *   (`bf-h`/`bf-m`, so a pure-CSR mount's static `qsaChildScopes` init can
+ *   find it the same way it finds a slotted non-root child) but derives its
+ *   OWN scope id rather than the parent's — matching Hono, which stamps
+ *   `__bfParent`/`__bfMount` on a loop item root while still letting an
+ *   interactive child's own `__scopeId` win over `__bfScope`.
  * @returns HTML string with scope marker
  */
-export declare function renderChild(name: string, props: Record<string, unknown>, key?: string | number, slotSuffix?: string): string;
+export declare function renderChild(name: string, props: Record<string, unknown>, key?: string | number, slotSuffix?: string, loopItemRoot?: boolean): string;
 /**
  * Escape ">" inside HTML attribute values to prevent broken parsing.
  * UnoCSS classes like has-[>svg]:shrink-0 contain ">" which terminates

package/dist/runtime/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/runtime/component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/runtime/component.ts"],"names":[],"mappings":"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"}

package/dist/runtime/index.d.ts

@@ -15,7 +15,7 @@ export { mapArrayLazy, type LazyRowEntry, type LazyRowPlan } from './map-array-l
 export { patchLeaf } from './patch-leaf.ts';
 export { claimSlots, lazySlots, lazyClaimSlots, textOrNode, type SlotSpec, type ClaimPlan, type ClaimedSlots, type ClaimedSlotsRW, type SlotWriter } from './claim-slots.ts';
 export { registerTemplate, getTemplate, hasTemplate, type TemplateFn } from './template.ts';
-export { createComponent, mountRowRoot, renderChild, parseHTML, escapeAttr, escapeText, escapeTextOrNode, bfMarkup, isBfMarkup, escapeTextOrMarkup, markupOrEmpty, type BfMarkup, } from './component.ts';
+export { createComponent, mountRowRoot, renderChild, withParentScope, parseHTML, escapeAttr, escapeText, escapeTextOrNode, bfMarkup, isBfMarkup, escapeTextOrMarkup, markupOrEmpty, type BfMarkup, } from './component.ts';
 export { applyRestAttrs } from './apply-rest-attrs.ts';
 export { spreadAttrs } from './spread-attrs.ts';
 export { styleToCss } from './style.ts';

package/dist/runtime/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,UAAU,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,OAAO,EACP,OAAO,EACP,KAAK,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,gBAAgB,EAOhB,kBAAkB,EAClB,KAAK,gBAAgB,EACrB,sBAAsB,EACtB,KAAK,QAAQ,EACb,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,GACpB,MAAM,6BAA6B,CAAA;AAEpC,OAAO,EACL,mBAAmB,EACnB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,aAAa,GACnB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAI9C,OAAO,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,KAAK,OAAO,GACb,MAAM,cAAc,CAAA;AAGrB,OAAO,EACL,YAAY,EACZ,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,KAAK,MAAM,EACX,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,MAAM,aAAa,CAAA;AAIpB,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAI3D,OAAO,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAK3C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAG5K,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAG3F,OAAO,EACL,eAAe,EACf,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,gBAAgB,EAKhB,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,KAAK,QAAQ,GACd,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC9G,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACpH,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3F,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,KAAK,YAAY,EAAE,KAAK,oBAAoB,EAAE,MAAM,aAAa,CAAA;AACrG,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAQ3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGpC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAG1D,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"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"}

package/dist/runtime/index.js

@@ -1349,6 +1349,15 @@ var _parentScopeId = null;
 function setParentScopeId(id) {
   _parentScopeId = id;
 }
+function withParentScope(id, fn) {
+  const prev = _parentScopeId;
+  _parentScopeId = id;
+  try {
+    return fn();
+  } finally {
+    _parentScopeId = prev;
+  }
+}
 var _rowMountPoint = null;
 function setRowMountPoint(p) {
   const prev = _rowMountPoint;
@@ -1415,12 +1424,14 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt, keyAttr
   const derivedScopeId = slot?.parent && slot.mount ? `${slot.parent}_${slot.mount}` : null;
   const scopeId = isCommentWrapper && !isFragmentRoot ? null : derivedScopeId ?? `${def?.name ?? name}_${generateId()}`;
   const prevParentScopeId = _parentScopeId;
+  let wrapperScopeId = null;
   if (scopeId) {
     _parentScopeId = scopeId;
   } else if (slot?.parent) {
     _parentScopeId = slot.parent;
   } else if (!_parentScopeId) {
-    _parentScopeId = `${def?.name ?? name}_${generateId()}`;
+    wrapperScopeId = `${def?.name ?? name}_${generateId()}`;
+    _parentScopeId = wrapperScopeId;
   }
   let html;
   try {
@@ -1450,12 +1461,13 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt, keyAttr
   if (key !== undefined) {
     element.setAttribute(keyAttrName2, String(key));
   }
-  const fragmentComments = isFragmentRoot && scopeId ? {
-    start: document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${scopeId}`),
-    end: document.createComment(`${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}`)
+  const commentScopeId = isFragmentRoot ? scopeId : isCommentWrapper ? wrapperScopeId : null;
+  const fragmentComments = commentScopeId ? {
+    start: document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${commentScopeId}`),
+    end: document.createComment(`${BF_SCOPE_COMMENT_END_PREFIX}${commentScopeId}`)
   } : null;
   if (fragmentComments) {
-    commentScopeRegistry.set(element, { commentNode: fragmentComments.start, scopeId });
+    commentScopeRegistry.set(element, { commentNode: fragmentComments.start, scopeId: commentScopeId });
   }
   const rootIsDeferredPlaceholder = element.hasAttribute(BF_PLACEHOLDER);
   let bareFragment = null;
@@ -1518,16 +1530,18 @@ function spliceAttrsAfterFirstTag(html, attrs) {
   const insertPos = firstElMatch.index;
   return html.slice(0, insertPos) + html.slice(insertPos).replace(TAG_HEAD_PATTERN, `$1${attrs}`);
 }
-function renderChild(name, props, key, slotSuffix) {
+function renderChild(name, props, key, slotSuffix, loopItemRoot) {
   const templateFn = getTemplate(name);
-  const suffix = slotSuffix ? `_${slotSuffix}` : "";
   const def = getRegisteredDef(name);
   const displayName = def?.name ?? name;
   const isFragmentRoot = def?.fragmentRoot === true;
-  const scopePrefix = _parentScopeId && slotSuffix ? _parentScopeId : `${displayName}_${generateId()}`;
+  const hasSlot = !!(_parentScopeId && slotSuffix);
+  const derivesFromParent = hasSlot && !loopItemRoot;
+  const suffix = slotSuffix && !loopItemRoot ? `_${slotSuffix}` : "";
+  const scopePrefix = derivesFromParent ? _parentScopeId : `${displayName}_${generateId()}`;
   const scopeId = `${scopePrefix}${suffix}`;
   const keyAttr = key !== undefined ? ` ${BF_KEY}="${key}"` : "";
-  const slotAttrs = _parentScopeId && slotSuffix ? ` ${BF_HOST}="${_parentScopeId}" ${BF_AT}="${slotSuffix}"` : "";
+  const slotAttrs = hasSlot ? ` ${BF_HOST}="${_parentScopeId}" ${BF_AT}="${slotSuffix}"` : "";
   const bfsAttr = `${BF_SCOPE}="${scopeId}"`;
   if (!templateFn) {
     return isFragmentRoot ? `<!--${BF_SCOPE_COMMENT_PREFIX}${scopeId}--><div></div><!--${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}-->` : `<div ${bfsAttr}${slotAttrs}${keyAttr}></div>`;
@@ -1542,7 +1556,7 @@ function renderChild(name, props, key, slotSuffix) {
   }
   let html = raw.trim().replace(PLACEHOLDER_ATTR_PATTERN, _parentScopeId ? ` bf-s="${_parentScopeId}"` : "");
   if (isFragmentRoot) {
-    const hostSuffix = _parentScopeId && slotSuffix ? `|h=${_parentScopeId}|m=${slotSuffix}` : "";
+    const hostSuffix = hasSlot ? `|h=${_parentScopeId}|m=${slotSuffix}` : "";
     const keyedHtml = keyAttr ? spliceAttrsAfterFirstTag(html, keyAttr) : html;
     return `<!--${BF_SCOPE_COMMENT_PREFIX}${scopeId}${hostSuffix}-->${keyedHtml}<!--${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}-->`;
   }
@@ -3382,6 +3396,7 @@ function setupStreaming() {
   w[BF_SEAM_DISPOSE_WITHIN] = disposeScope;
 }
 export {
+  withParentScope,
   useContext,
   upsertChildItem,
   upsertChild,

package/dist/runtime/standalone.js

@@ -1755,6 +1755,15 @@ var _parentScopeId = null;
 function setParentScopeId(id) {
   _parentScopeId = id;
 }
+function withParentScope(id, fn) {
+  const prev = _parentScopeId;
+  _parentScopeId = id;
+  try {
+    return fn();
+  } finally {
+    _parentScopeId = prev;
+  }
+}
 var _rowMountPoint = null;
 function setRowMountPoint(p) {
   const prev = _rowMountPoint;
@@ -1821,12 +1830,14 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt, keyAttr
   const derivedScopeId = slot?.parent && slot.mount ? `${slot.parent}_${slot.mount}` : null;
   const scopeId = isCommentWrapper && !isFragmentRoot ? null : derivedScopeId ?? `${def?.name ?? name}_${generateId()}`;
   const prevParentScopeId = _parentScopeId;
+  let wrapperScopeId = null;
   if (scopeId) {
     _parentScopeId = scopeId;
   } else if (slot?.parent) {
     _parentScopeId = slot.parent;
   } else if (!_parentScopeId) {
-    _parentScopeId = `${def?.name ?? name}_${generateId()}`;
+    wrapperScopeId = `${def?.name ?? name}_${generateId()}`;
+    _parentScopeId = wrapperScopeId;
   }
   let html;
   try {
@@ -1856,12 +1867,13 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt, keyAttr
   if (key !== undefined) {
     element.setAttribute(keyAttrName2, String(key));
   }
-  const fragmentComments = isFragmentRoot && scopeId ? {
-    start: document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${scopeId}`),
-    end: document.createComment(`${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}`)
+  const commentScopeId = isFragmentRoot ? scopeId : isCommentWrapper ? wrapperScopeId : null;
+  const fragmentComments = commentScopeId ? {
+    start: document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${commentScopeId}`),
+    end: document.createComment(`${BF_SCOPE_COMMENT_END_PREFIX}${commentScopeId}`)
   } : null;
   if (fragmentComments) {
-    commentScopeRegistry.set(element, { commentNode: fragmentComments.start, scopeId });
+    commentScopeRegistry.set(element, { commentNode: fragmentComments.start, scopeId: commentScopeId });
   }
   const rootIsDeferredPlaceholder = element.hasAttribute(BF_PLACEHOLDER);
   let bareFragment = null;
@@ -1924,16 +1936,18 @@ function spliceAttrsAfterFirstTag(html, attrs) {
   const insertPos = firstElMatch.index;
   return html.slice(0, insertPos) + html.slice(insertPos).replace(TAG_HEAD_PATTERN, `$1${attrs}`);
 }
-function renderChild(name, props, key, slotSuffix) {
+function renderChild(name, props, key, slotSuffix, loopItemRoot) {
   const templateFn = getTemplate(name);
-  const suffix = slotSuffix ? `_${slotSuffix}` : "";
   const def = getRegisteredDef(name);
   const displayName = def?.name ?? name;
   const isFragmentRoot = def?.fragmentRoot === true;
-  const scopePrefix = _parentScopeId && slotSuffix ? _parentScopeId : `${displayName}_${generateId()}`;
+  const hasSlot = !!(_parentScopeId && slotSuffix);
+  const derivesFromParent = hasSlot && !loopItemRoot;
+  const suffix = slotSuffix && !loopItemRoot ? `_${slotSuffix}` : "";
+  const scopePrefix = derivesFromParent ? _parentScopeId : `${displayName}_${generateId()}`;
   const scopeId = `${scopePrefix}${suffix}`;
   const keyAttr = key !== undefined ? ` ${BF_KEY}="${key}"` : "";
-  const slotAttrs = _parentScopeId && slotSuffix ? ` ${BF_HOST}="${_parentScopeId}" ${BF_AT}="${slotSuffix}"` : "";
+  const slotAttrs = hasSlot ? ` ${BF_HOST}="${_parentScopeId}" ${BF_AT}="${slotSuffix}"` : "";
   const bfsAttr = `${BF_SCOPE}="${scopeId}"`;
   if (!templateFn) {
     return isFragmentRoot ? `<!--${BF_SCOPE_COMMENT_PREFIX}${scopeId}--><div></div><!--${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}-->` : `<div ${bfsAttr}${slotAttrs}${keyAttr}></div>`;
@@ -1948,7 +1962,7 @@ function renderChild(name, props, key, slotSuffix) {
   }
   let html = raw.trim().replace(PLACEHOLDER_ATTR_PATTERN, _parentScopeId ? ` bf-s="${_parentScopeId}"` : "");
   if (isFragmentRoot) {
-    const hostSuffix = _parentScopeId && slotSuffix ? `|h=${_parentScopeId}|m=${slotSuffix}` : "";
+    const hostSuffix = hasSlot ? `|h=${_parentScopeId}|m=${slotSuffix}` : "";
     const keyedHtml = keyAttr ? spliceAttrsAfterFirstTag(html, keyAttr) : html;
     return `<!--${BF_SCOPE_COMMENT_PREFIX}${scopeId}${hostSuffix}-->${keyedHtml}<!--${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}-->`;
   }
@@ -3781,6 +3795,7 @@ function setupStreaming() {
   w[BF_SEAM_DISPOSE_WITHIN] = disposeScope;
 }
 export {
+  withParentScope,
   useContext,
   upsertChildItem,
   upsertChild,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.33.4",
+  "version": "0.34.0",
   "description": "BarefootJS client package: reactive primitives (SSR-safe) plus browser runtime under the `/runtime` subpath (compiler target)",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,7 +55,7 @@
     "directory": "packages/client"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.33.4"
+    "@barefootjs/shared": "0.34.0"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"

package/src/runtime/component.ts

@@ -35,6 +35,25 @@ export function setParentScopeId(id: string | null): void {
   _parentScopeId = id
 }
 
+/**
+ * Run `fn` with `_parentScopeId` temporarily set to `id`, restoring the
+ * previous value afterward (even if `fn` throws). A static loop's
+ * materialize `forEach` (#2833) runs during `init`, not template
+ * evaluation, so `_parentScopeId` is null there — this lets it evaluate the
+ * row's template as if it were still inside the parent's own template, so
+ * `renderChild` stamps `bf-h` with the same `__scopeId` the static init's
+ * `qsaChildScopes` selector interpolates.
+ */
+export function withParentScope<T>(id: string | null, fn: () => T): T {
+  const prev = _parentScopeId
+  _parentScopeId = id
+  try {
+    return fn()
+  } finally {
+    _parentScopeId = prev
+  }
+}
+
 /**
  * Where `mapArray` wants a fresh loop row connected before its `init` runs.
  *
@@ -148,9 +167,13 @@ export interface CreateComponentSlotInfo {
 }
 
 /**
- * The `HTMLElement | DocumentFragment` return covers exactly one shape: a
+ * The `HTMLElement | DocumentFragment` return covers exactly two shapes: a
  * BARE call (no `mountAt`, no ambient row-mount point) for a genuine
- * fragment-root component (#2722). Every other combination — a normal
+ * fragment-root component (#2722), or for a root-is-a-child-call comment
+ * wrapper mounted at the top level (#2728 — same rule: no single element
+ * can carry the `<!--bf-scope:-->` boundary comments to an unknown
+ * destination, so the caller gets the whole bundle back as a fragment).
+ * Every other combination — a normal
  * component, or a fragment-root one with `mountAt`/row-mount already
  * telling this function where to connect — still returns the real,
  * single `HTMLElement`, unchanged (that element stays the caller-visible
@@ -351,13 +374,18 @@ function materializeComponent(
   // wrapper materialized while an OUTER template eval is in flight keeps
   // inheriting that caller's ambient scope rather than being renamed under a
   // fresh random id. Only the genuinely-rootless mount is affected.
+  // #2728: also capture this derived id as `wrapperScopeId`, not just in
+  // `_parentScopeId` — step 7a needs it AFTER the template-eval `finally`
+  // block below restores `_parentScopeId` to its previous value.
   const prevParentScopeId = _parentScopeId
+  let wrapperScopeId: string | null = null
   if (scopeId) {
     _parentScopeId = scopeId
   } else if (slot?.parent) {
     _parentScopeId = slot.parent
   } else if (!_parentScopeId) {
-    _parentScopeId = `${def?.name ?? name}_${generateId()}`
+    wrapperScopeId = `${def?.name ?? name}_${generateId()}`
+    _parentScopeId = wrapperScopeId
   }
   let html: string
   try {
@@ -447,14 +475,19 @@ function materializeComponent(
   // are built now and threaded through to wherever `element` ends up
   // connected below, exactly mirroring the SSR/hydrate shape:
   //   <!--bf-scope:ID-->` + element + `<!--bf-/scope:ID-->`
-  const fragmentComments = isFragmentRoot && scopeId
+  //
+  // A root-is-a-child-call wrapper (#2728) gets the same treatment under
+  // its own `wrapperScopeId`, captured separately since `_parentScopeId`
+  // is already restored by the `finally` block above by the time this runs.
+  const commentScopeId = isFragmentRoot ? scopeId : (isCommentWrapper ? wrapperScopeId : null)
+  const fragmentComments = commentScopeId
     ? {
-        start: document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${scopeId}`),
-        end: document.createComment(`${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}`),
+        start: document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${commentScopeId}`),
+        end: document.createComment(`${BF_SCOPE_COMMENT_END_PREFIX}${commentScopeId}`),
       }
     : null
   if (fragmentComments) {
-    commentScopeRegistry.set(element, { commentNode: fragmentComments.start, scopeId: scopeId! })
+    commentScopeRegistry.set(element, { commentNode: fragmentComments.start, scopeId: commentScopeId! })
   }
 
   // 7b. Connect before init.
@@ -654,16 +687,24 @@ function spliceAttrsAfterFirstTag(html: string, attrs: string): string {
  * @param name - Component name (e.g., 'Spinner')
  * @param props - Props to pass to the template
  * @param key - Optional key for list reconciliation
+ * @param slotSuffix - Slot id in the parent (e.g. 's0') this child was rendered into
+ * @param loopItemRoot - True when this child IS a keyed loop's row root
+ *   (`IRComponent.loopItemRoot`, #2833): it still gets slot identity
+ *   (`bf-h`/`bf-m`, so a pure-CSR mount's static `qsaChildScopes` init can
+ *   find it the same way it finds a slotted non-root child) but derives its
+ *   OWN scope id rather than the parent's — matching Hono, which stamps
+ *   `__bfParent`/`__bfMount` on a loop item root while still letting an
+ *   interactive child's own `__scopeId` win over `__bfScope`.
  * @returns HTML string with scope marker
  */
 export function renderChild(
   name: string,
   props: Record<string, unknown>,
   key?: string | number,
-  slotSuffix?: string
+  slotSuffix?: string,
+  loopItemRoot?: boolean
 ): string {
   const templateFn = getTemplate(name)
-  const suffix = slotSuffix ? `_${slotSuffix}` : ''
   // When inside an insert() branch template with a known parent scope,
   // use the parent scope ID so child scope IDs match the SSR convention
   // (e.g., ~ParentName_parentHash_s5 instead of ~Button_randomHash_s5).
@@ -687,14 +728,24 @@ export function renderChild(
   // `materializeComponent`'s equivalent fix) kept stamping `bf-s` onto an
   // element the SSR/hydrate reference never puts one on.
   const isFragmentRoot = def?.fragmentRoot === true
-  const scopePrefix = (_parentScopeId && slotSuffix)
+  // Slot identity (bf-h/bf-m) and scope id (bf-s) are separate questions
+  // (#2833): a loop item root has slot identity — `hasSlot` — but, unlike an
+  // ordinary slotted child, does not DERIVE its scope id from the parent, so
+  // it gets no `_<slotSuffix>` suffix either (Hono's row root is
+  // `Name_<random>`, not `Name_<random>_s0`).
+  const hasSlot = !!(_parentScopeId && slotSuffix)
+  const derivesFromParent = hasSlot && !loopItemRoot
+  const suffix = (slotSuffix && !loopItemRoot) ? `_${slotSuffix}` : ''
+  const scopePrefix = derivesFromParent
     ? _parentScopeId
     : `${displayName}_${generateId()}`
   const scopeId = `${scopePrefix}${suffix}`
   const keyAttr = key !== undefined ? ` ${BF_KEY}="${key}"` : ''
   // Slot-relationship markers — only emitted when both host and slot are
-  // known; top-level renders without parent context omit them.
-  const slotAttrs = (_parentScopeId && slotSuffix)
+  // known; top-level renders without parent context omit them. Stamped
+  // regardless of `loopItemRoot`: a loop item root keeps slot identity even
+  // though it doesn't derive its scope id from it (see `hasSlot` above).
+  const slotAttrs = hasSlot
     ? ` ${BF_HOST}="${_parentScopeId}" ${BF_AT}="${slotSuffix}"`
     : ''
   const bfsAttr = `${BF_SCOPE}="${scopeId}"`
@@ -744,7 +795,7 @@ export function renderChild(
   // `wrapWithScopeComment`'s CSR mirror, same as `materializeComponent`'s
   // fix for a top-level mount.
   if (isFragmentRoot) {
-    const hostSuffix = (_parentScopeId && slotSuffix) ? `|h=${_parentScopeId}|m=${slotSuffix}` : ''
+    const hostSuffix = hasSlot ? `|h=${_parentScopeId}|m=${slotSuffix}` : ''
     // #2732: `data-key` for a fragment-root loop row lands on the row's own
     // first element — the same "first element, not first node" convention
     // `IRElement.keyAttr` uses on the SSR side (jsx-to-ir.ts) — not on the

package/src/runtime/index.ts

@@ -101,6 +101,7 @@ export {
   createComponent,
   mountRowRoot,
   renderChild,
+  withParentScope,
   parseHTML,
   escapeAttr,
   escapeText,