@barefootjs/mojolicious 0.8.0 → 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present BarefootJS Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/adapter/index.js

@@ -8,7 +8,10 @@ import {
   identifierPath,
   emitParsedExpr,
   emitIRNode,
-  emitAttrValue
+  emitAttrValue,
+  augmentInheritedPropAccesses,
+  parseRecordIndexAccess,
+  evalStringArrayJoin
 } from "@barefootjs/jsx";
 
 // src/adapter/boolean-result.ts
@@ -95,7 +98,10 @@ function parsePureStringLiteral(source) {
   if (ts.isStringLiteral(init) || ts.isNoSubstitutionTemplateLiteral(init)) {
     return init.text;
   }
-  return null;
+  return evalStringArrayJoin(source);
+}
+function perlHashKey(name) {
+  return /^[A-Za-z_][A-Za-z0-9_]*$/.test(name) ? name : `'${name.replace(/'/g, "\\'")}'`;
 }
 
 class MojoAdapter extends BaseAdapter {
@@ -112,6 +118,7 @@ class MojoAdapter extends BaseAdapter {
   propsParams = [];
   stringValueNames = new Set;
   moduleStringConsts = new Map;
+  localConstants = [];
   loopBoundNames = new Map;
   nullableOptionalProps = new Set;
   constructor(options = {}) {
@@ -124,6 +131,7 @@ class MojoAdapter extends BaseAdapter {
   generate(ir, options) {
     this.componentName = ir.metadata.componentName;
     this.propsObjectName = ir.metadata.propsObjectName ?? null;
+    augmentInheritedPropAccesses(ir);
     this.propsParams = ir.metadata.propsParams.map((p) => ({ name: p.name }));
     this.nullableOptionalProps = new Set(ir.metadata.propsParams.filter((p) => p.defaultValue === undefined && !p.isRest && p.type?.kind !== "primitive").map((p) => p.name));
     this.stringValueNames = new Set;
@@ -137,6 +145,7 @@ class MojoAdapter extends BaseAdapter {
         this.stringValueNames.add(p.name);
     }
     this.moduleStringConsts = this.collectModuleStringConsts(ir.metadata.localConstants);
+    this.localConstants = ir.metadata.localConstants ?? [];
     this.loopBoundNames.clear();
     this.errors = [];
     this.childrenCaptureCounter = 0;
@@ -499,20 +508,20 @@ ${renderedChildren}` : renderedChildren;
 `);
   }
   componentPropEmitter = {
-    emitLiteral: (value, name) => `${name} => '${value.value}'`,
+    emitLiteral: (value, name) => `${perlHashKey(name)} => '${value.value}'`,
     emitExpression: (value, name) => {
       if (value.parts) {
-        return `${name} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`;
+        return `${perlHashKey(name)} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`;
       }
-      return `${name} => ${this.convertExpressionToPerl(value.expr)}`;
+      return `${perlHashKey(name)} => ${this.convertExpressionToPerl(value.expr)}`;
     },
     emitSpread: (value) => {
       const perlExpr = this.convertExpressionToPerl(value.expr);
       return perlExpr.startsWith("%") ? perlExpr : `%{${perlExpr}}`;
     },
-    emitTemplate: (value, name) => `${name} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`,
-    emitBooleanAttr: (_value, name) => `${name} => 1`,
-    emitBooleanShorthand: (_value, name) => `${name} => 1`,
+    emitTemplate: (value, name) => `${perlHashKey(name)} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`,
+    emitBooleanAttr: (_value, name) => `${perlHashKey(name)} => 1`,
+    emitBooleanShorthand: (_value, name) => `${perlHashKey(name)} => 1`,
     emitJsxChildren: () => ""
   };
   renderComponent(comp) {
@@ -585,7 +594,8 @@ ${children}`;
         return "";
       }
       const bareId = value.expr.trim();
-      if (!isBooleanAttr(name) && !value.presenceOrUndefined && this.nullableOptionalProps.has(bareId)) {
+      const normalizedBareId = this.propsObjectName && bareId.startsWith(`${this.propsObjectName}.`) ? bareId.slice(this.propsObjectName.length + 1) : bareId;
+      if (!isBooleanAttr(name) && !value.presenceOrUndefined && /^[A-Za-z_$][\w$]*$/.test(normalizedBareId) && this.nullableOptionalProps.has(normalizedBareId)) {
         const perl2 = this.convertExpressionToPerl(value.expr);
         const body = isBooleanResultExpr(value.expr) || isAriaBooleanAttr(name) ? `${name}="<%= bf->bool_str(${perl2}) %>"` : `${name}="<%= ${perl2} %>"`;
         return `<% if (defined ${perl2}) { %>${body}<% } %>`;
@@ -614,6 +624,18 @@ ${children}`;
       if (ternaryHashref !== null) {
         return `<%== bf->spread_attrs(${ternaryHashref}) %>`;
       }
+      if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
+        const localConst = this.localConstants.find((c) => c.name === trimmed && !c.isModule);
+        if (localConst?.value !== undefined) {
+          const initTrimmed = localConst.value.trim();
+          if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(initTrimmed)) {
+            const resolved = this.conditionalSpreadToPerl(initTrimmed);
+            if (resolved !== null) {
+              return `<%== bf->spread_attrs(${resolved}) %>`;
+            }
+          }
+        }
+      }
       const perlExpr = this.convertExpressionToPerl(value.expr);
       return `<%== bf->spread_attrs(${perlExpr}) %>`;
     },
@@ -821,11 +843,28 @@ ${reason}` : "";
       } else {
         return null;
       }
-      const valPerl = this.convertExpressionToPerl(prop.initializer.getText(sf));
+      const initNode = (() => {
+        let n = prop.initializer;
+        while (ts.isParenthesizedExpression(n))
+          n = n.expression;
+        return n;
+      })();
+      const indexed = this.recordIndexAccessToPerl(initNode);
+      const valPerl = indexed !== null ? indexed : this.convertExpressionToPerl(prop.initializer.getText(sf));
       entries.push(`'${key.replace(/'/g, "\\'")}' => ${valPerl}`);
     }
     return entries.length === 0 ? "{}" : `{ ${entries.join(", ")} }`;
   }
+  recordIndexAccessToPerl(val) {
+    const parsed = parseRecordIndexAccess(val, this.localConstants, this.propsParams);
+    if (!parsed)
+      return null;
+    const entries = parsed.entries.map((e) => {
+      const mapVal = e.value.kind === "number" ? e.value.text : `'${e.value.text.replace(/'/g, "\\'")}'`;
+      return `'${e.key.replace(/'/g, "\\'")}' => ${mapVal}`;
+    });
+    return `{ ${entries.join(", ")} }->{$${parsed.indexPropName}}`;
+  }
   convertExpressionToPerl(expr) {
     const trimmed = expr.trim();
     if (trimmed === "")

package/dist/adapter/mojo-adapter.d.ts

@@ -69,6 +69,14 @@ export declare class MojoAdapter extends BaseAdapter implements IRNodeEmitter<Mo
      * module-scope pure string literals qualify (see `collectModuleStringConsts`).
      */
     private moduleStringConsts;
+    /**
+     * Full local-constant metadata from the entry IR, kept so spread
+     * lowering can resolve a bare-identifier spread (`{...sizeAttrs}`) to
+     * its initializer text and a `Record[propKey]` spread value to the
+     * module-const object literal it indexes (#checkbox / icon). Populated
+     * at `generate()` entry alongside `moduleStringConsts`.
+     */
+    private localConstants;
     /**
      * Names currently bound by an enclosing loop body — the `my $<param>` and
      * `my $<index>` bindings `renderLoop` introduces — ref-counted so nested
@@ -245,6 +253,21 @@ export declare class MojoAdapter extends BaseAdapter implements IRNodeEmitter<Mo
      * computed/spread/dynamic key. Empty object → `{}`.
      */
     private objectLiteralToPerlHashref;
+    /**
+     * Lower a spread-object VALUE of the form `IDENT[KEY]` where:
+     *   - `IDENT` resolves via `localConstants` to a MODULE-scope object
+     *     literal whose property values are all scalar (number/string)
+     *     literals under static (string-literal or identifier) keys
+     *     (a `Record<staticKeys, scalar>` map like `sizeMap`), AND
+     *   - `KEY` is a bare identifier that is a prop.
+     * Emits an inline indexed Perl hashref:
+     *   `{ 'sm' => 16, 'md' => 20, ... }->{$size}`
+     *
+     * Returns the Perl string when convertible, else `null` so the caller
+     * falls back to its normal value lowering (which records BF101 for an
+     * unsupported shape). Mirror of the Go adapter's `recordIndexAccessToGoMap`.
+     */
+    private recordIndexAccessToPerl;
     private convertExpressionToPerl;
     /**
      * Render a full ParsedExpr tree to Perl for top-level (non-filter)

package/dist/adapter/mojo-adapter.d.ts.map

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

package/dist/build.js

@@ -8,7 +8,10 @@ import {
   identifierPath,
   emitParsedExpr,
   emitIRNode,
-  emitAttrValue
+  emitAttrValue,
+  augmentInheritedPropAccesses,
+  parseRecordIndexAccess,
+  evalStringArrayJoin
 } from "@barefootjs/jsx";
 
 // src/adapter/boolean-result.ts
@@ -95,7 +98,10 @@ function parsePureStringLiteral(source) {
   if (ts.isStringLiteral(init) || ts.isNoSubstitutionTemplateLiteral(init)) {
     return init.text;
   }
-  return null;
+  return evalStringArrayJoin(source);
+}
+function perlHashKey(name) {
+  return /^[A-Za-z_][A-Za-z0-9_]*$/.test(name) ? name : `'${name.replace(/'/g, "\\'")}'`;
 }
 
 class MojoAdapter extends BaseAdapter {
@@ -112,6 +118,7 @@ class MojoAdapter extends BaseAdapter {
   propsParams = [];
   stringValueNames = new Set;
   moduleStringConsts = new Map;
+  localConstants = [];
   loopBoundNames = new Map;
   nullableOptionalProps = new Set;
   constructor(options = {}) {
@@ -124,6 +131,7 @@ class MojoAdapter extends BaseAdapter {
   generate(ir, options) {
     this.componentName = ir.metadata.componentName;
     this.propsObjectName = ir.metadata.propsObjectName ?? null;
+    augmentInheritedPropAccesses(ir);
     this.propsParams = ir.metadata.propsParams.map((p) => ({ name: p.name }));
     this.nullableOptionalProps = new Set(ir.metadata.propsParams.filter((p) => p.defaultValue === undefined && !p.isRest && p.type?.kind !== "primitive").map((p) => p.name));
     this.stringValueNames = new Set;
@@ -137,6 +145,7 @@ class MojoAdapter extends BaseAdapter {
         this.stringValueNames.add(p.name);
     }
     this.moduleStringConsts = this.collectModuleStringConsts(ir.metadata.localConstants);
+    this.localConstants = ir.metadata.localConstants ?? [];
     this.loopBoundNames.clear();
     this.errors = [];
     this.childrenCaptureCounter = 0;
@@ -499,20 +508,20 @@ ${renderedChildren}` : renderedChildren;
 `);
   }
   componentPropEmitter = {
-    emitLiteral: (value, name) => `${name} => '${value.value}'`,
+    emitLiteral: (value, name) => `${perlHashKey(name)} => '${value.value}'`,
     emitExpression: (value, name) => {
       if (value.parts) {
-        return `${name} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`;
+        return `${perlHashKey(name)} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`;
       }
-      return `${name} => ${this.convertExpressionToPerl(value.expr)}`;
+      return `${perlHashKey(name)} => ${this.convertExpressionToPerl(value.expr)}`;
     },
     emitSpread: (value) => {
       const perlExpr = this.convertExpressionToPerl(value.expr);
       return perlExpr.startsWith("%") ? perlExpr : `%{${perlExpr}}`;
     },
-    emitTemplate: (value, name) => `${name} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`,
-    emitBooleanAttr: (_value, name) => `${name} => 1`,
-    emitBooleanShorthand: (_value, name) => `${name} => 1`,
+    emitTemplate: (value, name) => `${perlHashKey(name)} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`,
+    emitBooleanAttr: (_value, name) => `${perlHashKey(name)} => 1`,
+    emitBooleanShorthand: (_value, name) => `${perlHashKey(name)} => 1`,
     emitJsxChildren: () => ""
   };
   renderComponent(comp) {
@@ -585,7 +594,8 @@ ${children}`;
         return "";
       }
       const bareId = value.expr.trim();
-      if (!isBooleanAttr(name) && !value.presenceOrUndefined && this.nullableOptionalProps.has(bareId)) {
+      const normalizedBareId = this.propsObjectName && bareId.startsWith(`${this.propsObjectName}.`) ? bareId.slice(this.propsObjectName.length + 1) : bareId;
+      if (!isBooleanAttr(name) && !value.presenceOrUndefined && /^[A-Za-z_$][\w$]*$/.test(normalizedBareId) && this.nullableOptionalProps.has(normalizedBareId)) {
         const perl2 = this.convertExpressionToPerl(value.expr);
         const body = isBooleanResultExpr(value.expr) || isAriaBooleanAttr(name) ? `${name}="<%= bf->bool_str(${perl2}) %>"` : `${name}="<%= ${perl2} %>"`;
         return `<% if (defined ${perl2}) { %>${body}<% } %>`;
@@ -614,6 +624,18 @@ ${children}`;
       if (ternaryHashref !== null) {
         return `<%== bf->spread_attrs(${ternaryHashref}) %>`;
       }
+      if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
+        const localConst = this.localConstants.find((c) => c.name === trimmed && !c.isModule);
+        if (localConst?.value !== undefined) {
+          const initTrimmed = localConst.value.trim();
+          if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(initTrimmed)) {
+            const resolved = this.conditionalSpreadToPerl(initTrimmed);
+            if (resolved !== null) {
+              return `<%== bf->spread_attrs(${resolved}) %>`;
+            }
+          }
+        }
+      }
       const perlExpr = this.convertExpressionToPerl(value.expr);
       return `<%== bf->spread_attrs(${perlExpr}) %>`;
     },
@@ -821,11 +843,28 @@ ${reason}` : "";
       } else {
         return null;
       }
-      const valPerl = this.convertExpressionToPerl(prop.initializer.getText(sf));
+      const initNode = (() => {
+        let n = prop.initializer;
+        while (ts.isParenthesizedExpression(n))
+          n = n.expression;
+        return n;
+      })();
+      const indexed = this.recordIndexAccessToPerl(initNode);
+      const valPerl = indexed !== null ? indexed : this.convertExpressionToPerl(prop.initializer.getText(sf));
       entries.push(`'${key.replace(/'/g, "\\'")}' => ${valPerl}`);
     }
     return entries.length === 0 ? "{}" : `{ ${entries.join(", ")} }`;
   }
+  recordIndexAccessToPerl(val) {
+    const parsed = parseRecordIndexAccess(val, this.localConstants, this.propsParams);
+    if (!parsed)
+      return null;
+    const entries = parsed.entries.map((e) => {
+      const mapVal = e.value.kind === "number" ? e.value.text : `'${e.value.text.replace(/'/g, "\\'")}'`;
+      return `'${e.key.replace(/'/g, "\\'")}' => ${mapVal}`;
+    });
+    return `{ ${entries.join(", ")} }->{$${parsed.indexPropName}}`;
+  }
   convertExpressionToPerl(expr) {
     const trimmed = expr.trim();
     if (trimmed === "")

package/dist/index.js

@@ -8,7 +8,10 @@ import {
   identifierPath,
   emitParsedExpr,
   emitIRNode,
-  emitAttrValue
+  emitAttrValue,
+  augmentInheritedPropAccesses,
+  parseRecordIndexAccess,
+  evalStringArrayJoin
 } from "@barefootjs/jsx";
 
 // src/adapter/boolean-result.ts
@@ -95,7 +98,10 @@ function parsePureStringLiteral(source) {
   if (ts.isStringLiteral(init) || ts.isNoSubstitutionTemplateLiteral(init)) {
     return init.text;
   }
-  return null;
+  return evalStringArrayJoin(source);
+}
+function perlHashKey(name) {
+  return /^[A-Za-z_][A-Za-z0-9_]*$/.test(name) ? name : `'${name.replace(/'/g, "\\'")}'`;
 }
 
 class MojoAdapter extends BaseAdapter {
@@ -112,6 +118,7 @@ class MojoAdapter extends BaseAdapter {
   propsParams = [];
   stringValueNames = new Set;
   moduleStringConsts = new Map;
+  localConstants = [];
   loopBoundNames = new Map;
   nullableOptionalProps = new Set;
   constructor(options = {}) {
@@ -124,6 +131,7 @@ class MojoAdapter extends BaseAdapter {
   generate(ir, options) {
     this.componentName = ir.metadata.componentName;
     this.propsObjectName = ir.metadata.propsObjectName ?? null;
+    augmentInheritedPropAccesses(ir);
     this.propsParams = ir.metadata.propsParams.map((p) => ({ name: p.name }));
     this.nullableOptionalProps = new Set(ir.metadata.propsParams.filter((p) => p.defaultValue === undefined && !p.isRest && p.type?.kind !== "primitive").map((p) => p.name));
     this.stringValueNames = new Set;
@@ -137,6 +145,7 @@ class MojoAdapter extends BaseAdapter {
         this.stringValueNames.add(p.name);
     }
     this.moduleStringConsts = this.collectModuleStringConsts(ir.metadata.localConstants);
+    this.localConstants = ir.metadata.localConstants ?? [];
     this.loopBoundNames.clear();
     this.errors = [];
     this.childrenCaptureCounter = 0;
@@ -499,20 +508,20 @@ ${renderedChildren}` : renderedChildren;
 `);
   }
   componentPropEmitter = {
-    emitLiteral: (value, name) => `${name} => '${value.value}'`,
+    emitLiteral: (value, name) => `${perlHashKey(name)} => '${value.value}'`,
     emitExpression: (value, name) => {
       if (value.parts) {
-        return `${name} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`;
+        return `${perlHashKey(name)} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`;
       }
-      return `${name} => ${this.convertExpressionToPerl(value.expr)}`;
+      return `${perlHashKey(name)} => ${this.convertExpressionToPerl(value.expr)}`;
     },
     emitSpread: (value) => {
       const perlExpr = this.convertExpressionToPerl(value.expr);
       return perlExpr.startsWith("%") ? perlExpr : `%{${perlExpr}}`;
     },
-    emitTemplate: (value, name) => `${name} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`,
-    emitBooleanAttr: (_value, name) => `${name} => 1`,
-    emitBooleanShorthand: (_value, name) => `${name} => 1`,
+    emitTemplate: (value, name) => `${perlHashKey(name)} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`,
+    emitBooleanAttr: (_value, name) => `${perlHashKey(name)} => 1`,
+    emitBooleanShorthand: (_value, name) => `${perlHashKey(name)} => 1`,
     emitJsxChildren: () => ""
   };
   renderComponent(comp) {
@@ -585,7 +594,8 @@ ${children}`;
         return "";
       }
       const bareId = value.expr.trim();
-      if (!isBooleanAttr(name) && !value.presenceOrUndefined && this.nullableOptionalProps.has(bareId)) {
+      const normalizedBareId = this.propsObjectName && bareId.startsWith(`${this.propsObjectName}.`) ? bareId.slice(this.propsObjectName.length + 1) : bareId;
+      if (!isBooleanAttr(name) && !value.presenceOrUndefined && /^[A-Za-z_$][\w$]*$/.test(normalizedBareId) && this.nullableOptionalProps.has(normalizedBareId)) {
         const perl2 = this.convertExpressionToPerl(value.expr);
         const body = isBooleanResultExpr(value.expr) || isAriaBooleanAttr(name) ? `${name}="<%= bf->bool_str(${perl2}) %>"` : `${name}="<%= ${perl2} %>"`;
         return `<% if (defined ${perl2}) { %>${body}<% } %>`;
@@ -614,6 +624,18 @@ ${children}`;
       if (ternaryHashref !== null) {
         return `<%== bf->spread_attrs(${ternaryHashref}) %>`;
       }
+      if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
+        const localConst = this.localConstants.find((c) => c.name === trimmed && !c.isModule);
+        if (localConst?.value !== undefined) {
+          const initTrimmed = localConst.value.trim();
+          if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(initTrimmed)) {
+            const resolved = this.conditionalSpreadToPerl(initTrimmed);
+            if (resolved !== null) {
+              return `<%== bf->spread_attrs(${resolved}) %>`;
+            }
+          }
+        }
+      }
       const perlExpr = this.convertExpressionToPerl(value.expr);
       return `<%== bf->spread_attrs(${perlExpr}) %>`;
     },
@@ -821,11 +843,28 @@ ${reason}` : "";
       } else {
         return null;
       }
-      const valPerl = this.convertExpressionToPerl(prop.initializer.getText(sf));
+      const initNode = (() => {
+        let n = prop.initializer;
+        while (ts.isParenthesizedExpression(n))
+          n = n.expression;
+        return n;
+      })();
+      const indexed = this.recordIndexAccessToPerl(initNode);
+      const valPerl = indexed !== null ? indexed : this.convertExpressionToPerl(prop.initializer.getText(sf));
       entries.push(`'${key.replace(/'/g, "\\'")}' => ${valPerl}`);
     }
     return entries.length === 0 ? "{}" : `{ ${entries.join(", ")} }`;
   }
+  recordIndexAccessToPerl(val) {
+    const parsed = parseRecordIndexAccess(val, this.localConstants, this.propsParams);
+    if (!parsed)
+      return null;
+    const entries = parsed.entries.map((e) => {
+      const mapVal = e.value.kind === "number" ? e.value.text : `'${e.value.text.replace(/'/g, "\\'")}'`;
+      return `'${e.key.replace(/'/g, "\\'")}' => ${mapVal}`;
+    });
+    return `{ ${entries.join(", ")} }->{$${parsed.indexPropName}}`;
+  }
   convertExpressionToPerl(expr) {
     const trimmed = expr.trim();
     if (trimmed === "")

package/dist/test-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test-render.d.ts","sourceRoot":"","sources":["../src/test-render.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,qBAAa,qBAAsB,SAAQ,KAAK;IAC9C,YAAY,OAAO,EAAE,MAAM,EAG1B;CACF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAKxE;AAkCD,MAAM,WAAW,aAAa;IAC5B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,OAAO,EAAE,OAAO,iBAAiB,EAAE,eAAe,CAAA;IAClD,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACpC;AAED,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CA2MjF;AAsOD;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,OAAO,CAuBT"}
+{"version":3,"file":"test-render.d.ts","sourceRoot":"","sources":["../src/test-render.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,qBAAa,qBAAsB,SAAQ,KAAK;IAC9C,YAAY,OAAO,EAAE,MAAM,EAG1B;CACF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAKxE;AAkCD,MAAM,WAAW,aAAa;IAC5B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,OAAO,EAAE,OAAO,iBAAiB,EAAE,eAAe,CAAA;IAClD,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACpC;AAED,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CA2MjF;AA+RD;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,OAAO,CAuBT"}

package/lib/BarefootJS/Backend/Mojo.pm

@@ -1,5 +1,5 @@
 package BarefootJS::Backend::Mojo;
-our $VERSION = "0.01";
+our $VERSION = "0.8.0";
 use Mojo::Base -base, -signatures;
 
 use Mojo::ByteStream qw(b);

package/lib/Mojolicious/Plugin/BarefootJS/DevReload.pm

@@ -1,5 +1,5 @@
 package Mojolicious::Plugin::BarefootJS::DevReload;
-our $VERSION = "0.01";
+our $VERSION = "0.8.0";
 use Mojo::Base 'Mojolicious::Plugin', -signatures;
 
 =head1 NAME

package/lib/Mojolicious/Plugin/BarefootJS.pm

@@ -1,5 +1,5 @@
 package Mojolicious::Plugin::BarefootJS;
-our $VERSION = "0.01";
+our $VERSION = "0.8.0";
 use Mojo::Base 'Mojolicious::Plugin', -signatures;
 
 use Mojo::File qw(path);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/mojolicious",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Mojolicious EP template adapter for BarefootJS - generates .html.ep files from IR",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,8 +52,8 @@
     "directory": "packages/adapter-mojolicious"
   },
   "dependencies": {
-    "@barefootjs/perl": "0.8.0",
-    "@barefootjs/shared": "0.8.0"
+    "@barefootjs/perl": "0.9.0",
+    "@barefootjs/shared": "0.9.0"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0",
@@ -61,6 +61,6 @@
   },
   "devDependencies": {
     "@barefootjs/adapter-tests": "0.1.0",
-    "@barefootjs/jsx": "0.8.0"
+    "@barefootjs/jsx": "0.9.0"
   }
 }

package/src/__tests__/mojo-adapter.test.ts

@@ -17,76 +17,19 @@ runAdapterConformanceTests({
   name: 'mojo',
   factory: () => new MojoAdapter(),
   render: renderMojoComponent,
-  // Dynamic style objects (non-static values) require Perl template
-  // interpolation support for JS object literals, not yet implemented.
-  // Mojo currently emits invalid Perl silently for this shape — the
-  // Go adapter records BF101 via `convertExpressionToGo()` for the
-  // same fixture (now contracted via `expectedDiagnostics`), but the
-  // Mojo adapter's expression gate doesn't yet lift the same
-  // failure into a `CompilerError`, so the fixture stays on `skipJsx`
-  // until that gate is extended (#1266 follow-up).
-  // `logical-or-jsx`, `nullish-coalescing-jsx`, `branch-map` reference
-  // a prop directly inside a conditional branch (`$label`, `$banner`,
-  // `$active`). The Mojo adapter emits these as bare Perl variables
-  // (`% if ($label) { ... }`) without a corresponding
-  // `my $label = ...;` declaration, so Perl rejects the template with
-  // "Global symbol requires explicit package name". Same class of
-  // Perl-scoping divergence that motivates the existing skips —
-  // out of scope for the #971 refactor.
-  // Return-position variants of the same divergence —
-  // `return-logical-or` / `return-nullish-coalescing` reference
-  // `$label` / `$banner` directly; `return-map` iterates over `$items`
-  // without a `my` declaration.
-  //
-  // `static-array-children` / `static-array-from-props` /
-  // `static-array-from-props-with-component` are no longer here —
-  // they're covered by `expectedDiagnostics` below, asserting that
-  // the adapter emits `BF103` / `BF104` at build time instead of
-  // silently emitting invalid Perl / unresolved cross-template
-  // references (#1266).
   skipJsx: [
-    'style-object-dynamic',
-    'logical-or-jsx',
-    'nullish-coalescing-jsx',
-    'branch-map',
-    'return-logical-or',
-    'return-nullish-coalescing',
-    'return-map',
-    // #1297 fixed the harness-side IR emission gate. The remaining
-    // gap is adapter-side: the Mojo adapter has no SSR context-
-    // propagation mechanism, so `<Ctx.Provider value="dark">` doesn't
-    // make `useContext(Ctx)` resolve to `"dark"` at template-eval
-    // time — the template emits `<%= $theme %>` against a hash that
-    // never receives a `theme` key. Provider SSR coverage on Mojo
-    // waits on that adapter feature; see #1297 follow-up.
+    // SSR context propagation (`<Ctx.Provider value>` → `useContext`): the
+    // template reads a stash key that's never seeded. Implemented on Go; the
+    // Perl stash-seed path is a follow-up port, so Mojo stays skipped (#1297).
     'context-provider',
-    // Multi-component fixtures still diverge because Mojo's child
-    // template emitter pins the child's `bf-s` to the literal
-    // `test_<sN>` (`_scope_id("test_$sid")` in `test-render.ts`)
-    // instead of `<ChildName>_<id>_<sN>` like Hono / CSR. Same family
-    // of test-harness scope-id plumbing the `componentName` option
-    // fixed on the Hono side. Separate follow-up.
+    // Multi-component shared fixtures with per-item loop state. The child
+    // scope-id plumbing is now fixed (children derive `<parentScope>_<sN>`
+    // from `$bf->_scope_id` in `test-render.ts`, which unblocked
+    // `reactive-props`); these two still diverge on additional per-item
+    // loop-state seeding the Mojo harness doesn't yet replicate. (xslate
+    // skips the same pair.)
     'toggle-shared',
-    'reactive-props',
     'props-reactivity-comparison',
-    // #1467 Phase 2b: basic interactive `site/ui` primitives. Cross-adapter
-    // parity for the `site/ui` corpus is Phase 3, so these participate only
-    // in Hono SSR conformance + the fixture-hydrate runtime layer for now.
-    // (`label` and `kbd` are static helpers; `toggle` / `switch` /
-    // `checkbox` carry uncontrolled state; `input` is a pass-through
-    // native control.)
-    //
-    // `textarea` now participates: its conditional inline-object spread
-    // (`{...(describedBy ? {...} : {})}`) lowers via
-    // `conditionalSpreadToPerl`, and its optional `rows={rows}`
-    // attribute is omitted when `undef` via the `defined`-guard in
-    // `elementAttrEmitter.emitExpression`
-    // (`<% if (defined $rows) { %>rows="<%= $rows %>"<% } %>`), matching
-    // Hono's nullish-attribute omission.
-    'toggle',
-    'switch',
-    'checkbox',
-    'kbd',
   ],
   // Per-fixture build-time contracts for shapes the Mojo adapter
   // intentionally refuses to lower. Owned by this adapter test file
@@ -130,6 +73,11 @@ runAdapterConformanceTests({
     // surfaces BF101 with a wrap-in-`/* @client */` suggestion, matching
     // the Go adapter's behaviour.
     'style-3-signals': [{ code: 'BF101', severity: 'error' }],
+    // Dynamic JS object literal in `style={{ … }}` — same no-EP-form
+    // refusal as `style-3-signals`; `refuseUnsupportedAttrExpression`
+    // surfaces BF101 (mirrors the xslate + Go adapters). Was a stale
+    // `skipJsx` entry claiming the gate didn't lift to a CompilerError.
+    'style-object-dynamic': [{ code: 'BF101', severity: 'error' }],
     // #1244 stress catalog #12 (#1323): tagged-template-literal call
     // (`cn\`base \${tone()}\``) — same family as #1322 above and refused
     // via the same gate.
@@ -287,6 +235,120 @@ function Box({ k, v }: { k?: string; v?: string }) {
   })
 })
 
+describe('MojoAdapter - local-const conditional-spread resolution (#checkbox icon)', () => {
+  // A FUNCTION-scope const holding a `cond ? {…} : {}` ternary, spread as
+  // a bare identifier (`{...attrs}`), resolves through the same Perl
+  // ternary-of-hashrefs lowering as the inline form. CheckIcon's
+  // `const sizeAttrs = size ? {…} : {}` is exactly this shape.
+  test('resolves a bare-identifier spread of a function-scope conditional const', () => {
+    const { template } = compileAndGenerate(`
+function Box({ flag }: { flag?: boolean }) {
+  const attrs = flag ? { 'data-on': 'yes' } : {}
+  return <div {...attrs} />
+}
+`)
+    expect(template).toContain(
+      "bf->spread_attrs($flag ? { 'data-on' => 'yes' } : {})",
+    )
+  })
+
+  // A const that aliases another bare identifier must NOT be forwarded
+  // (loop guard): the resolver bails, so the spread falls through to the
+  // standard `convertExpressionToPerl` path emitting the bare `$attrs`
+  // variable rather than recursively resolving the alias into a hashref.
+  test('does not forward a const that aliases another identifier (loop guard)', () => {
+    const { template } = compileAndGenerate(`
+function Box({ other }: { other?: object }) {
+  const attrs = other
+  return <div {...attrs} />
+}
+`)
+    expect(template).toContain('bf->spread_attrs($attrs)')
+  })
+})
+
+describe('MojoAdapter - Record<staticKeys,scalar>[propKey] spread value (#checkbox icon)', () => {
+  // `const sizeMap: Record<IconSize, number> = { sm: 16, ... }` indexed by
+  // a prop inside a conditional-spread object value lowers to an inline
+  // indexed Perl hashref `{ ... }->{$key}`. This is CheckIcon's
+  // `{ width: sizeMap[size], height: sizeMap[size] }` shape.
+  test('lowers an indexed module-const map to an inline hashref index', () => {
+    const { template } = compileAndGenerate(`
+const sizeMap: Record<string, number> = { sm: 16, md: 20, lg: 24, xl: 32 }
+function Box({ size }: { size?: string }) {
+  const attrs = size ? { width: sizeMap[size] } : {}
+  return <div {...attrs} />
+}
+`)
+    expect(template).toContain(
+      "{ 'sm' => 16, 'md' => 20, 'lg' => 24, 'xl' => 32 }->{$size}",
+    )
+  })
+
+  test('lowers string-valued record maps too', () => {
+    const { template } = compileAndGenerate(`
+const labelMap: Record<string, string> = { a: 'Alpha', b: 'Beta' }
+function Box({ k }: { k?: string }) {
+  const attrs = k ? { 'data-label': labelMap[k] } : {}
+  return <div {...attrs} />
+}
+`)
+    expect(template).toContain("{ 'a' => 'Alpha', 'b' => 'Beta' }->{$k}")
+  })
+
+  // A non-scalar record value (object) is out of shape: the spread object
+  // value can't lower, so the whole spread falls back to BF101.
+  test('refuses a non-scalar record value with BF101 (out-of-shape fallback)', () => {
+    const adapter = new MojoAdapter()
+    const ir = compileToIR(`
+const sizeMap: Record<string, object> = { sm: { w: 1 } }
+function Box({ size }: { size?: string }) {
+  const attrs = size ? { width: sizeMap[size] } : {}
+  return <div {...attrs} />
+}
+`, adapter)
+    adapter.generate(ir)
+    const errs = (adapter as unknown as { errors: { code: string }[] }).errors
+    expect(errs.some(e => e.code === 'BF101')).toBe(true)
+  })
+})
+
+describe('MojoAdapter - props-object inherited-attribute enumeration (#checkbox)', () => {
+  // A SolidJS props-object component reads inherited attributes (`props.id`)
+  // not enumerated in `propsParams`. The bare optional attribute must be
+  // guarded with Perl `defined` so it's omitted when unset (Hono parity),
+  // even though `id` isn't a declared param.
+  test('guards a props-object bare optional attr (props.id) with defined', () => {
+    const { template } = compileAndGenerate(`
+"use client"
+interface P { tone?: string }
+export function Widget(props: P) {
+  return <button id={props.id}>x</button>
+}
+`)
+    expect(template).toContain('<% if (defined $id) { %>id="<%= $id %>"<% } %>')
+  })
+})
+
+describe('MojoAdapter - hyphenated child attr hash key (#checkbox)', () => {
+  // A child component prop whose JSX name isn't a bare Perl identifier
+  // (`<CheckIcon data-slot="..."/>`) must be quoted in the `render_child`
+  // named-arg list — an unquoted `data-slot => ...` parses as `data - slot`.
+  test('quotes a hyphenated child attribute name in render_child', () => {
+    const { template } = compileAndGenerate(`
+"use client"
+import { Leaf } from './leaf'
+export function Host() {
+  return <div><Leaf data-slot="indicator" size="sm" /></div>
+}
+`)
+    expect(template).toContain("'data-slot' => 'indicator'")
+    // A bare-identifier name stays unquoted.
+    expect(template).toContain('size => ')
+    expect(template).not.toContain('data-slot => ')
+  })
+})
+
 describe('MojoAdapter - nullish optional-attribute omission (textarea rows)', () => {
   // A no-destructure-default, nillable-typed prop is `undef` when the
   // caller omits it; guard its bare-reference attribute with Perl

package/src/adapter/mojo-adapter.ts

@@ -47,6 +47,9 @@ import {
   emitParsedExpr,
   emitIRNode,
   emitAttrValue,
+  augmentInheritedPropAccesses,
+  parseRecordIndexAccess,
+  evalStringArrayJoin,
 } from '@barefootjs/jsx'
 import { isAriaBooleanAttr, isBooleanResultExpr } from './boolean-result'
 
@@ -142,7 +145,20 @@ function parsePureStringLiteral(source: string): string | null {
   if (ts.isStringLiteral(init) || ts.isNoSubstitutionTemplateLiteral(init)) {
     return init.text
   }
-  return null
+  // `[<literals>].join(' ')` module consts (e.g. Switch's `trackStateClasses`)
+  // → inline the flattened string byte-for-byte. See `evalStringArrayJoin`.
+  return evalStringArrayJoin(source)
+}
+
+/**
+ * (#checkbox) Quote a `render_child` named-arg / hashref key when it isn't a
+ * bare Perl identifier. A JSX attribute name like `data-slot` would otherwise
+ * emit `data-slot => '...'`, which Perl parses as the subtraction
+ * `data - slot`. Identifier-safe names (`className`, `size`, `_bf_slot`) pass
+ * through unquoted to keep the generated template readable.
+ */
+function perlHashKey(name: string): string {
+  return /^[A-Za-z_][A-Za-z0-9_]*$/.test(name) ? name : `'${name.replace(/'/g, "\\'")}'`
 }
 
 export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRenderCtx> {
@@ -198,6 +214,14 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
    * module-scope pure string literals qualify (see `collectModuleStringConsts`).
    */
   private moduleStringConsts: Map<string, string> = new Map()
+  /**
+   * Full local-constant metadata from the entry IR, kept so spread
+   * lowering can resolve a bare-identifier spread (`{...sizeAttrs}`) to
+   * its initializer text and a `Record[propKey]` spread value to the
+   * module-const object literal it indexes (#checkbox / icon). Populated
+   * at `generate()` entry alongside `moduleStringConsts`.
+   */
+  private localConstants: IRMetadata['localConstants'] = []
   /**
    * Names currently bound by an enclosing loop body — the `my $<param>` and
    * `my $<index>` bindings `renderLoop` introduces — ref-counted so nested
@@ -236,6 +260,14 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
   generate(ir: ComponentIR, options?: AdapterGenerateOptions): AdapterOutput {
     this.componentName = ir.metadata.componentName
     this.propsObjectName = ir.metadata.propsObjectName ?? null
+    // (#checkbox) Enumerate inherited-attribute accesses for the props-object
+    // pattern (`function Checkbox(props: CheckboxProps)`) before deriving
+    // `nullableOptionalProps`, so a bare optional attribute like
+    // `id={props.id}` gets the Perl `defined`-guard (Hono-style omission).
+    // Shared with the Go adapter (single source of truth in `@barefootjs/jsx`).
+    // The harness separately declares the matching stash vars (Pass-1 IR
+    // serialization happens before `generate`, so this mutation doesn't reach it).
+    augmentInheritedPropAccesses(ir)
     this.propsParams = ir.metadata.propsParams.map(p => ({ name: p.name }))
     // No-destructure-default props → `undef` when the caller omits them
     // → guard their bare-reference attribute emission with Perl `defined`
@@ -277,6 +309,7 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       if (isStringTypeInfo(p.type)) this.stringValueNames.add(p.name)
     }
     this.moduleStringConsts = this.collectModuleStringConsts(ir.metadata.localConstants)
+    this.localConstants = ir.metadata.localConstants ?? []
     this.loopBoundNames.clear()
     this.errors = []
     this.childrenCaptureCounter = 0
@@ -808,7 +841,7 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
    * `render_child` named-arg list.
    */
   private readonly componentPropEmitter: AttrValueEmitter = {
-    emitLiteral: (value, name) => `${name} => '${value.value}'`,
+    emitLiteral: (value, name) => `${perlHashKey(name)} => '${value.value}'`,
     emitExpression: (value, name) => {
       // The IR producer collapses component-prop `template` kinds
       // into `expression` for client-runtime reasons but preserves
@@ -817,9 +850,9 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       // `${MAP[KEY]}` shapes (the JS object literal leaks into the
       // Perl template).
       if (value.parts) {
-        return `${name} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`
+        return `${perlHashKey(name)} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`
       }
-      return `${name} => ${this.convertExpressionToPerl(value.expr)}`
+      return `${perlHashKey(name)} => ${this.convertExpressionToPerl(value.expr)}`
     },
     emitSpread: (value) => {
       // Perl has no JS-style spread — emit the source as a hash
@@ -832,9 +865,9 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       return perlExpr.startsWith('%') ? perlExpr : `%{${perlExpr}}`
     },
     emitTemplate: (value, name) =>
-      `${name} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`,
-    emitBooleanAttr: (_value, name) => `${name} => 1`,
-    emitBooleanShorthand: (_value, name) => `${name} => 1`,
+      `${perlHashKey(name)} => ${this.convertTemplateLiteralPartsToPerl(value.parts)}`,
+    emitBooleanAttr: (_value, name) => `${perlHashKey(name)} => 1`,
+    emitBooleanShorthand: (_value, name) => `${perlHashKey(name)} => 1`,
     // JSX children flow through Mojo's `begin %>…<% end` capture
     // below; they're not part of the named-arg list.
     emitJsxChildren: () => '',
@@ -991,10 +1024,19 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       // exprs, calls, concrete/defaulted props, and boolean attrs are
       // unaffected and still emit unconditionally.
       const bareId = value.expr.trim()
+      // Normalize a props-object access (`props.id`) to its bare prop name
+      // (`id`) so the nullable-optional set — keyed by bare name — matches the
+      // SolidJS props-object pattern, not just destructured params (#checkbox
+      // `id={props.id}`).
+      const normalizedBareId =
+        this.propsObjectName && bareId.startsWith(`${this.propsObjectName}.`)
+          ? bareId.slice(this.propsObjectName.length + 1)
+          : bareId
       if (
         !isBooleanAttr(name) &&
         !value.presenceOrUndefined &&
-        this.nullableOptionalProps.has(bareId)
+        /^[A-Za-z_$][\w$]*$/.test(normalizedBareId) &&
+        this.nullableOptionalProps.has(normalizedBareId)
       ) {
         const perl = this.convertExpressionToPerl(value.expr)
         const body =
@@ -1087,6 +1129,26 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       if (ternaryHashref !== null) {
         return `<%== bf->spread_attrs(${ternaryHashref}) %>`
       }
+      // Function-scope local const holding a conditional inline-object
+      //   `const sizeAttrs = size ? {…} : {}` then `{...sizeAttrs}`
+      // (#checkbox / icon). Resolve the bare identifier to its
+      // initializer text and route through the same conditional-spread
+      // lowering. Only function-scope (`!isModule`) consts whose value is
+      // NOT itself a bare identifier (loop guard) are considered.
+      if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
+        const localConst = this.localConstants.find(
+          c => c.name === trimmed && !c.isModule,
+        )
+        if (localConst?.value !== undefined) {
+          const initTrimmed = localConst.value.trim()
+          if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(initTrimmed)) {
+            const resolved = this.conditionalSpreadToPerl(initTrimmed)
+            if (resolved !== null) {
+              return `<%== bf->spread_attrs(${resolved}) %>`
+            }
+          }
+        }
+      }
       const perlExpr = this.convertExpressionToPerl(value.expr)
       return `<%== bf->spread_attrs(${perlExpr}) %>`
     },
@@ -1437,12 +1499,49 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       } else {
         return null
       }
-      const valPerl = this.convertExpressionToPerl(prop.initializer.getText(sf))
+      const initNode = (() => {
+        let n: ts.Expression = prop.initializer
+        while (ts.isParenthesizedExpression(n)) n = n.expression
+        return n
+      })()
+      const indexed = this.recordIndexAccessToPerl(initNode)
+      const valPerl =
+        indexed !== null
+          ? indexed
+          : this.convertExpressionToPerl(prop.initializer.getText(sf))
       entries.push(`'${key.replace(/'/g, "\\'")}' => ${valPerl}`)
     }
     return entries.length === 0 ? '{}' : `{ ${entries.join(', ')} }`
   }
 
+  /**
+   * Lower a spread-object VALUE of the form `IDENT[KEY]` where:
+   *   - `IDENT` resolves via `localConstants` to a MODULE-scope object
+   *     literal whose property values are all scalar (number/string)
+   *     literals under static (string-literal or identifier) keys
+   *     (a `Record<staticKeys, scalar>` map like `sizeMap`), AND
+   *   - `KEY` is a bare identifier that is a prop.
+   * Emits an inline indexed Perl hashref:
+   *   `{ 'sm' => 16, 'md' => 20, ... }->{$size}`
+   *
+   * Returns the Perl string when convertible, else `null` so the caller
+   * falls back to its normal value lowering (which records BF101 for an
+   * unsupported shape). Mirror of the Go adapter's `recordIndexAccessToGoMap`.
+   */
+  private recordIndexAccessToPerl(val: ts.Expression): string | null {
+    // Shared structural parse (single source of truth in `@barefootjs/jsx`);
+    // this wrapper only does the Perl-specific emit (single-quote escaping)
+    // from the structured result.
+    const parsed = parseRecordIndexAccess(val, this.localConstants, this.propsParams)
+    if (!parsed) return null
+    const entries = parsed.entries.map(e => {
+      const mapVal =
+        e.value.kind === 'number' ? e.value.text : `'${e.value.text.replace(/'/g, "\\'")}'`
+      return `'${e.key.replace(/'/g, "\\'")}' => ${mapVal}`
+    })
+    return `{ ${entries.join(', ')} }->{$${parsed.indexPropName}}`
+  }
+
 
   private convertExpressionToPerl(expr: string): string {
     // Parse-first lowering — parity with the Go adapter's

package/src/test-render.ts

@@ -349,7 +349,12 @@ function buildChildRenderers(
     }
     lines.push(`    ${slotIdsPerl}`)
     lines.push(`    my $child_bf = BarefootJS->new($c, {});`)
-    lines.push(`    $child_bf->_scope_id("test_$sid");`)
+    // Child scope id derives from the PARENT's live scope id, not a literal
+    // `test_` prefix — so `<ReactiveProps_test>_s5` matches Hono / CSR (and
+    // survives an explicit `__instanceId`). Mirrors xslate's
+    // `rootChildScopePrefix` (`$bf->_scope_id`); `$bf` is the parent instance
+    // captured by this renderer closure.
+    lines.push(`    $child_bf->_scope_id($bf->_scope_id . "_$sid");`)
     lines.push(`    my $rendered = $child_mt->render($child_tmpl, { %$child_props, bf => $child_bf });`)
     lines.push(`    die $rendered->to_string if ref $rendered;`)
     lines.push(`    chomp $rendered;`)
@@ -433,6 +438,26 @@ function buildPerlProps(
     entries.push(`${param.name} => undef`)
   }
 
+  // (#checkbox) SolidJS props-object pattern: `function Checkbox(props:
+  // CheckboxProps)` only enumerates `CheckboxProps`'s own members in
+  // `propsParams`; inherited `ButtonHTMLAttributes` members the component
+  // reads as bare template vars (`$id`, `$disabled`, `$className`) are not.
+  // The generated template references them, so the stash must declare them or
+  // Perl strict mode aborts with `Global symbol "$id" requires explicit
+  // package name`. Scan the IR for `props.<name>` accesses and seed any not
+  // already declared (and not supplied by the caller below) as `undef`.
+  // Mirrors the Go adapter's `augmentInheritedPropAccesses`.
+  if (ir.metadata.propsObjectName) {
+    const propsObj = ir.metadata.propsObjectName
+    const declared = new Set(ir.metadata.propsParams.map(p => p.name))
+    for (const name of collectPropsObjectAccesses(ir, propsObj)) {
+      if (declared.has(name)) continue
+      if (props && name in props) continue // emitted by the user-props loop
+      entries.push(`${name} => undef`)
+      declared.add(name)
+    }
+  }
+
   // A `{...props}` rest spread means props that aren't declared named
   // params flow through the rest bag (`bf->spread_attrs($<restPropsName>)`),
   // not their own top-level template var. Route them into the bag hashref so
@@ -524,6 +549,38 @@ function buildPerlProps(
   return `{${entries.join(', ')}}`
 }
 
+/**
+ * (#checkbox) Collect `<propsObj>.<name>` accesses across a component's memos,
+ * signal initializers, init statements, and template attribute expressions —
+ * the inherited-attribute reads (`props.className`, `props.id`, `props.disabled`)
+ * a SolidJS props-object component makes but that aren't enumerated in
+ * `propsParams`. Used to declare matching stash variables.
+ */
+function collectPropsObjectAccesses(ir: ComponentIR, propsObj: string): Set<string> {
+  const out = new Set<string>()
+  const re = new RegExp(`(?:^|[^\\w$.])${propsObj}\\.([A-Za-z_$][\\w$]*)`, 'g')
+  const scan = (s: string | undefined): void => {
+    if (!s) return
+    for (const m of s.matchAll(re)) out.add(m[1])
+  }
+  for (const memo of ir.metadata.memos) scan(memo.computation)
+  for (const sig of ir.metadata.signals) scan(sig.initialValue)
+  for (const stmt of ir.metadata.initStatements ?? []) scan(stmt.body)
+  const walk = (node: unknown): void => {
+    if (!node || typeof node !== 'object') return
+    const el = node as { attrs?: Array<{ value?: { kind?: string; expr?: string } }>; children?: unknown[] }
+    for (const attr of el.attrs ?? []) {
+      if (attr.value?.kind === 'expression') scan(attr.value.expr)
+    }
+    for (const child of el.children ?? []) {
+      const c = child as { element?: unknown }
+      walk(c.element ?? child)
+    }
+  }
+  walk(ir.root)
+  return out
+}
+
 /**
  * Evaluate a signal initializer expression using provided props.
  * Handles patterns like: props.initial ?? 0, props.value, literal values.