@barefootjs/jinja 0.18.4 → 0.18.7

package/src/__tests__/jinja-adapter-unit.test.ts

@@ -383,8 +383,149 @@ export function C(props: { count: number }) {
   })
 })
 
+describe('JinjaAdapter - named-slot capture identifier safety (#2168 jsx-element-prop)', () => {
+  // A JSX-valued prop under a hyphenated name (`data-slot`, a valid JSX
+  // attribute name) must not leak into the `{% set %}` capture variable's
+  // identifier — Jinja variable names can't contain `-`. The capture
+  // identifier is purely counter-based (never derived from the prop name);
+  // the hash KEY passed to `render_child` still carries the real name,
+  // quoted via `jinjaHashKey`.
+  test('a hyphenated prop name does not appear in the capture variable', () => {
+    const { template } = compileAndGenerate(`
+function Card(props) { return null }
+export function Parent() {
+  return <Card data-slot={<strong>Title</strong>}>text</Card>
+}
+`)
+    expect(template).toContain('{% set bf_prop_0 %}')
+    expect(template).toContain("'data-slot': bf_prop_0")
+    expect(template).not.toContain('data-slot %}')
+    expect(template).not.toContain('data-slot_')
+  })
+})
+
 // #2038 nested-callback-predicate loudness is pinned at the shared
 // conformance layer (workstream C): `filter-nested-callback-predicate` /
 // `filter-nested-find-predicate` (BF101 via `expectedDiagnostics`) and
 // `filter-nested-callback-predicate-client` (the `/* @client */` suppression
 // twin, which must render clean).
+
+// #2221: `_resolveLiteralConst` is a flat name lookup against
+// `ir.metadata.localConstants` with no notion of AST scope — it used to
+// substitute an outer const's literal value even at an occurrence that is
+// actually an enclosing loop callback's own (shadowing) parameter, so every
+// iteration rendered the same hard-coded literal. Guarded with the same
+// coarse `collectLoopBoundNames` exclusion as #2212: any name a loop binds
+// anywhere in the component never inlines, falling back to the bare
+// identifier. SSR-only tests for the same #2222 reason as the #2212
+// describe below.
+describe('JinjaAdapter - const inlining vs loop-param shadowing (#2221)', () => {
+  test('a loop param shadowing an outer literal const emits the identifier, not the const value', () => {
+    const { template } = compileAndGenerate(`
+function Widget() {
+  const label: string = 'x'
+  return <ul>{[2, 5].map((label) => <li key={label}>{1 + label}</li>)}</ul>
+}
+`)
+    // The loop body must reference the per-iteration loop var...
+    expect(template).toContain('1 + label')
+    // ...never the outer const's hard-coded value.
+    expect(template).not.toContain("1 + 'x'")
+  })
+
+  test('a numeric const shadowed by a loop param emits the identifier too', () => {
+    const { template } = compileAndGenerate(`
+function Widget() {
+  const count = 7
+  return <ul>{[2, 5].map((count) => <li key={count}>{1 + count}</li>)}</ul>
+}
+`)
+    expect(template).toContain('1 + count')
+    expect(template).not.toContain('1 + 7')
+  })
+
+  test('a literal const NOT shadowed by any loop still inlines (#1897 pin)', () => {
+    const { template } = compileAndGenerate(`
+function Widget({ values }: { values: number[] }) {
+  const totalPages = 5
+  return <div>
+    <p>Page 1 of {1 + totalPages}</p>
+    <ul>{values.map((v) => <li key={v}>{v}</li>)}</ul>
+  </div>
+}
+`)
+    expect(template).toContain('1 + 5')
+  })
+
+  // The accepted coarse-exclusion trade-off (same as #2212): a name that is
+  // loop-bound ANYWHERE in the component never inlines, even at a genuinely
+  // non-shadowed occurrence outside the loop — the bare identifier is
+  // emitted instead of the value.
+  test('a const referenced outside the loop whose name is loop-bound elsewhere falls back to the identifier (accepted trade-off)', () => {
+    const { template } = compileAndGenerate(`
+function Widget({ values }: { values: number[] }) {
+  const label: string = 'x'
+  return <div>
+    <p>{1 + label}</p>
+    <ul>{values.map((label) => <li key={label}>{2 + label}</li>)}</ul>
+  </div>
+}
+`)
+    expect(template).not.toContain("1 + 'x'")
+    expect(template).toContain('2 + label')
+  })
+})
+
+// #2237: `_resolveStaticRecordLiteral` (`IDENT.key` on a module-scope
+// object-literal const, e.g. `variantClasses.ghost` — #1896/#1897) is a
+// flat name lookup on `objectName` with no notion of AST scope, the
+// record-literal sibling of #2221's `_resolveLiteralConst` bug. It used to
+// substitute the outer const's member value even at an occurrence that is
+// actually an enclosing loop callback's own (shadowing) parameter, so every
+// iteration rendered the same hard-coded literal instead of the per-item
+// value. Guarded with the same coarse `staticLoopSourceBoundNames`
+// exclusion as #2221: any name a loop binds anywhere in the component
+// never inlines, falling back to the bare `cfg['x']` member expression.
+describe('JinjaAdapter - record-literal member lookup vs loop-param shadowing (#2237)', () => {
+  test('a loop param shadowing an outer module object const emits the member access, not the outer literal', () => {
+    const { template } = compileAndGenerate(`
+const cfg = { x: 'outer-lit' }
+function Widget({ rows }: { rows: { x: string }[] }) {
+  return <ul>{rows.map((cfg) => <li key={cfg.x}>{cfg.x}</li>)}</ul>
+}
+`)
+    // The loop body must reference the per-iteration member access...
+    expect(template).toContain("bf.string(cfg['x'])")
+    // ...never the outer const's hard-coded value.
+    expect(template).not.toContain("bf.string('outer-lit')")
+  })
+
+  test('a module object const NOT shadowed by any loop still inlines (variantClasses.ghost shape, #1896/#1897 pin)', () => {
+    const { template } = compileAndGenerate(`
+const variantClasses = { solid: 'bg-solid', ghost: 'bg-ghost' }
+function Widget({ variant }: { variant: 'solid' | 'ghost' }) {
+  return <div>{variantClasses.ghost}</div>
+}
+`)
+    expect(template).toContain("bf.string('bg-ghost')")
+  })
+
+  // The accepted coarse-exclusion trade-off (same as #2221/#2212): an
+  // object name that is loop-bound ANYWHERE in the component never
+  // inlines its member lookups, even at a genuinely non-shadowed
+  // occurrence outside the loop — the bare member expression is emitted
+  // instead of the value.
+  test('a record member referenced outside the loop whose object name is loop-bound elsewhere falls back to the member expression (accepted trade-off)', () => {
+    const { template } = compileAndGenerate(`
+const cfg = { x: 'outer-lit' }
+function Widget({ rows }: { rows: { x: string }[] }) {
+  return <div>
+    <p>{cfg.x}</p>
+    <ul>{rows.map((cfg) => <li key={cfg.x}>{cfg.x}</li>)}</ul>
+  </div>
+}
+`)
+    expect(template).not.toContain("bf.string('outer-lit')")
+    expect(template).toContain("bf.string(cfg['x'])")
+  })
+})

package/src/adapter/expr/array-method.ts

@@ -91,6 +91,15 @@ export function renderArrayMethod(
       const recv = emit(object)
       return `bf.trim(${recv})`
     }
+    case 'trimStart':
+    case 'trimEnd': {
+      // `.trimStart()` / `.trimEnd()` — the one-sided siblings of
+      // `.trim()` (#2183 follow-up). Dedicated `bf.trim_start` /
+      // `bf.trim_end` helpers, not `bf.trim` with a flag.
+      const fn = method === 'trimStart' ? 'trim_start' : 'trim_end'
+      const recv = emit(object)
+      return `bf.${fn}(${recv})`
+    }
     case 'toFixed': {
       // `.toFixed(digits?)` — `bf.to_fixed` mirrors JS rounding +
       // zero-padding (default 0 digits). #1897.
@@ -126,6 +135,16 @@ export function renderArrayMethod(
       const newS = emit(args[1])
       return `bf.replace(${recv}, ${oldS}, ${newS})`
     }
+    case 'replaceAll': {
+      // `.replaceAll(old, new)` — string-pattern form, EVERY occurrence,
+      // via the dedicated `bf.replace_all` helper (not `bf.replace` with
+      // a flag) — the regex-pattern form is refused upstream at the
+      // parser, same as `.replace`. See #2182.
+      const recv = emit(object)
+      const oldS = emit(args[0])
+      const newS = emit(args[1])
+      return `bf.replace_all(${recv}, ${oldS}, ${newS})`
+    }
     case 'repeat': {
       const recv = emit(object)
       const count = args.length === 0 ? '0' : emit(args[0])

package/src/adapter/expr/emitters.ts

@@ -141,7 +141,7 @@ export class JinjaFilterEmitter implements ParsedExprEmitter {
     return String(value)
   }
 
-  member(object: ParsedExpr, property: string, _computed: boolean, emit: (e: ParsedExpr) => string): string {
+  member(object: ParsedExpr, property: string, _computed: boolean, _optional: boolean, emit: (e: ParsedExpr) => string): string {
     // `.length` — route through `bf.length` (handles both array element
     // count and string char count, JS-compatibly). Jinja's builtin
     // `|length` filter also faults trying to match JS semantics for every
@@ -149,8 +149,16 @@ export class JinjaFilterEmitter implements ParsedExprEmitter {
     if (property === 'length') {
       return `bf.length(${emit(object)})`
     }
-    // Attribute / dict-key access — Jinja `.` resolves both transparently.
-    return `${emit(object)}.${property}`
+    // Bracket/item access, NOT `.` attribute access: Jinja's default
+    // `getattr` semantics try a Python ATTRIBUTE first, falling back to a
+    // dict key only if no such attribute exists — so `group.items` (a
+    // dict key from the JS object) instead resolves to the built-in bound
+    // method `dict.items`, raising "not iterable" downstream instead of
+    // returning the key's value. `[...]` compiles through Jinja's
+    // `getitem`, which tries the KEY first, sidestepping any built-in
+    // dict method name (items/keys/values/get/pop/update/...) that would
+    // otherwise shadow a same-named JS object field.
+    return `${emit(object)}['${escapeJinjaSingleQuoted(property)}']`
   }
 
   indexAccess(object: ParsedExpr, index: ParsedExpr, emit: (e: ParsedExpr) => string): string {
@@ -313,7 +321,7 @@ export class JinjaTopLevelEmitter implements ParsedExprEmitter {
     return String(value)
   }
 
-  member(object: ParsedExpr, property: string, _computed: boolean, emit: (e: ParsedExpr) => string): string {
+  member(object: ParsedExpr, property: string, _computed: boolean, _optional: boolean, emit: (e: ParsedExpr) => string): string {
     // `props.x` flattens to the bare context var the SSR caller binds each
     // prop to (props arrive as individual top-level context entries, not a
     // nested `props` dict).
@@ -331,8 +339,13 @@ export class JinjaTopLevelEmitter implements ParsedExprEmitter {
     const obj = emit(object)
     // `.length` → `bf.length` (array count or string char count, JS-compat).
     if (property === 'length') return `bf.length(${obj})`
-    // Jinja `.` access works for both dicts and objects.
-    return `${obj}.${property}`
+    // Bracket/item access, NOT `.` attribute access — see the sibling
+    // `JinjaFilterEmitter.member()` for why: Jinja's `.` tries a Python
+    // ATTRIBUTE first, so a dict key that happens to share a name with a
+    // built-in dict method (`items`, `keys`, `values`, `get`, ...) resolves
+    // to the bound method instead of the value. `[...]` (Jinja `getitem`)
+    // tries the key first.
+    return `${obj}['${escapeJinjaSingleQuoted(property)}']`
   }
 
   indexAccess(object: ParsedExpr, index: ParsedExpr, emit: (e: ParsedExpr) => string): string {

package/src/adapter/jinja-adapter.ts

@@ -140,10 +140,16 @@ import {
   queryHrefArgs,
   isValidHelperId,
   sortComparatorFromArrow,
+  isDangerousInnerHtmlAttr,
+  resolveDangerousInnerHtml,
+  dangerousInnerHtmlMetacharViolation,
+  dangerousInnerHtmlDiagnostic,
+  resolveStaticLoopSource,
+  collectLoopBoundNames,
 } from '@barefootjs/jsx'
 import { isAriaBooleanAttr, isBooleanResultExpr, isExplicitStringCall } from './boolean-result.ts'
 import type { ParsedExpr, LoweringMatcher } from '@barefootjs/jsx'
-import { BF_SLOT, BF_COND, BF_REGION } from '@barefootjs/shared'
+import { BF_SLOT, BF_COND, BF_REGION, escapeHtml } from '@barefootjs/shared'
 
 import type { JinjaRenderCtx } from './lib/types.ts'
 import { JINJA_PRIMITIVE_EMIT_MAP } from './lib/constants.ts'
@@ -158,6 +164,7 @@ import {
   collectRootScopeNodes,
 } from './lib/ir-scope.ts'
 import { renderSortMethod, renderSortEval } from './expr/array-method.ts'
+import { staticValueToJinja } from './lib/static-value.ts'
 import { JinjaFilterEmitter, JinjaTopLevelEmitter, truthyTest } from './expr/emitters.ts'
 import type { JinjaEmitContext, JinjaSpreadContext, JinjaMemoContext } from './emit-context.ts'
 import {
@@ -206,6 +213,14 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
   private options: Required<JinjaAdapterOptions>
   private errors: CompilerError[] = []
   private inLoop: boolean = false
+  /**
+   * `IRLoop.depth` of the loop currently being rendered (save/restore
+   * around `renderChildren(loop.children)`, mirroring `inLoop` above).
+   * `renderAttributes` reads this to derive the `key` → `data-key`/
+   * `data-key-N` suffix — the depth is IR-computed (jsx-to-ir.ts), not
+   * re-derived here (#2168 nested-loop-outer-binding).
+   */
+  private currentLoopKeyDepth = 0
   /**
    * SolidJS-style props identifier (`function(props: P)`) and the
    * analyzer-extracted prop names. Stashed at `generate()` entry so the
@@ -258,6 +273,17 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
    */
   private localConstants: IRMetadata['localConstants'] = []
 
+  /**
+   * Every name a `.map()`/`.filter()` loop callback binds as its item/index
+   * parameter anywhere in the component (#2208 fable review). A static
+   * loop-SOURCE name (e.g. a function-scope `const items = [...]`) must
+   * never resolve through `resolveStaticLoopSource` at a use site where a
+   * DIFFERENT, enclosing loop's own callback param shadows it — same
+   * shadowing hazard, and same coarse-but-safe mitigation, as #2212's
+   * `collectLoopBoundNames` use in `collectStringValueNames`.
+   */
+  private staticLoopSourceBoundNames: Set<string> = new Set()
+
   /**
    * Optional, no-default props that are `None` when the caller omits them.
    * Their bare-reference attribute emission is guarded with a Jinja
@@ -290,6 +316,7 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     // ("True"/"False") (#1897, pagination's data-active).
     this.booleanTypedProps = collectBooleanTypedProps(ir)
     this.localConstants = ir.metadata.localConstants ?? []
+    this.staticLoopSourceBoundNames = collectLoopBoundNames(ir)
     this.nullableOptionalProps = collectNullableOptionalProps(ir)
     this.stringValueNames = collectStringValueNames(ir)
     this.moduleStringConsts = collectModuleStringConsts(ir.metadata.localConstants)
@@ -401,7 +428,9 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
   }
 
   emitText(node: IRText): string {
-    return node.value
+    // IRText carries the entity-DECODED value (Phase 1 decodes JSX
+    // character references); re-escape for direct HTML emission.
+    return escapeHtml(node.value)
   }
 
   emitExpression(node: IRExpression): string {
@@ -510,7 +539,8 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
   renderElement(element: IRElement): string {
     const tag = element.tag
     const attrs = this.renderAttributes(element)
-    const children = this.renderChildren(element.children)
+    const dangerousHtml = this.renderDangerousInnerHtml(element)
+    const children = dangerousHtml !== null ? dangerousHtml : this.renderChildren(element.children)
 
     let hydrationAttrs = ''
     if (element.needsScope) {
@@ -545,6 +575,28 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     return `<${tag}${attrs}${hydrationAttrs}>${children}</${tag}>`
   }
 
+  /**
+   * `dangerouslySetInnerHTML={{ __html: '...' }}` (#2207) — see the Blade
+   * adapter's identical helper for the full rationale. `null` means the
+   * attribute is absent (caller falls through to normal `renderChildren`);
+   * a non-`null` string (possibly `''`) replaces the children outright.
+   */
+  private renderDangerousInnerHtml(element: IRElement): string | null {
+    const resolution = resolveDangerousInnerHtml(element)
+    if (!resolution) return null
+    if (resolution.kind === 'dynamic') {
+      this.errors.push(dangerousInnerHtmlDiagnostic(resolution.expr, resolution.loc))
+      return ''
+    }
+    const violation = dangerousInnerHtmlMetacharViolation(resolution.html, this.name)
+    if (violation) {
+      const attr = element.attrs.find(isDangerousInnerHtmlAttr)!
+      this.errors.push(dangerousInnerHtmlDiagnostic(`{ __html: ${JSON.stringify(resolution.html)} }`, attr.loc, violation))
+      return ''
+    }
+    return resolution.html
+  }
+
   // ===========================================================================
   // Expression Rendering
   // ===========================================================================
@@ -558,8 +610,12 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     }
 
     // Text-position interpolation of a possibly-non-string value — see the
-    // file header, divergence 2.
-    const jinjaExpr = `bf.string(${this.convertExpressionToJinja(expr.expr)})`
+    // file header, divergence 2. Thread the IR-carried `.parsed` tree
+    // through (mirrors go-template's `convertExpressionToGo(expr.expr,
+    // classify, expr.parsed)`) so a resolved bare-identifier
+    // `.map`/`.filter`/… callback (`resolveCallbackMethodFunctionReferences`,
+    // #2206) isn't lost to a fresh, unresolved re-parse of the raw string.
+    const jinjaExpr = `bf.string(${this.convertExpressionToJinja(expr.expr, expr.parsed)})`
 
     if (expr.slotId) {
       return `{{ bf.text_start("${expr.slotId}") | safe }}{{ ${jinjaExpr} }}{{ bf.text_end() | safe }}`
@@ -706,8 +762,27 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     // test corpus only because the widened destructure gate (#2087 Phase
     // A/B) no longer refuses this fixture's `([emoji, users]) => ...`
     // param first.
+    // #2208: a loop source that is a fully-static array literal — either
+    // inline (`[{ label: 'Alpha' }, ...].map(...)`) or a bare identifier
+    // bound to a FUNCTION-scope local const whose initializer has no
+    // prop/signal/function-call dependency — inlines as a native Jinja
+    // list/dict literal below, the same way a module-scope const's value
+    // is already seeded. A runtime-computed local (#2069, e.g.
+    // `Object.entries(props.tags).filter(...)`) still refuses below.
+    // `isNameShadowed` guards a DIFFERENT, enclosing loop's own callback
+    // param shadowing this identifier (fable review) — never resolve the
+    // static const in that case. `rawArray` then falls through to the
+    // bare identifier expression below, same as before #2208 — which
+    // still trips the pre-existing BF101 gate for an unresolvable local
+    // const reference (a loud, conservative refusal, not a silent wrong
+    // value).
+    const staticItems = resolveStaticLoopSource(loop.arrayParsed, this.localConstants, {
+      isNameShadowed: name => this.staticLoopSourceBoundNames.has(name),
+    })
+    const staticArray = staticItems !== null ? staticValueToJinja(staticItems) : null
+
     const arrayName = loop.array.trim()
-    if (/^[A-Za-z_$][\w$]*$/.test(arrayName)) {
+    if (staticArray === null && /^[A-Za-z_$][\w$]*$/.test(arrayName)) {
       const arrayConst = (this.localConstants ?? []).find(c => c.name === arrayName)
       if (arrayConst && !arrayConst.isModule && this._resolveLiteralConst(arrayName) === null) {
         this.errors.push({
@@ -723,7 +798,7 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
       }
     }
 
-    const rawArray = this.convertExpressionToJinja(loop.array)
+    const rawArray = staticArray ?? this.convertExpressionToJinja(loop.array)
     // Apply sort if present: wrap the loop array in the shared `bf.sort`
     // helper, binding the sorted result to a per-iteration local so the
     // helper runs once.
@@ -777,7 +852,11 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     //     `{...rest}` → `bf.spread_attrs(rest)` emit path both see only the
     //     keys NOT already destructured.
     const indexLocalLines: string[] = []
-    if (loop.iterationShape === 'keys') {
+    if (loop.objectIteration) {
+      // `key`/`value` bind directly in the for-header (see `array` below)
+      // via Jinja's own dict iteration — no derived `loop.index0` local
+      // needed, unlike the array `iterationShape` cases.
+    } else if (loop.iterationShape === 'keys') {
       indexLocalLines.push(`{% set ${jinjaIdent(param)} = loop.index0 %}`)
     } else if (loop.index) {
       indexLocalLines.push(`{% set ${jinjaIdent(loop.index)} = loop.index0 %}`)
@@ -802,10 +881,13 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
 
     const prevInLoop = this.inLoop
     this.inLoop = true
+    const prevLoopKeyDepth = this.currentLoopKeyDepth
+    this.currentLoopKeyDepth = loop.depth
     // Re-render children now that inLoop is set (so nested components use the
     // loop-child naming convention). renderedChildren above was computed with
     // the previous flag; recompute under the loop flag.
     const childrenUnderLoop = this.renderChildren(loop.children)
+    this.currentLoopKeyDepth = prevLoopKeyDepth
     this.inLoop = prevInLoop
     void renderedChildren
 
@@ -822,7 +904,19 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     // Scoped per-call-site marker so sibling `.map()`s under the same parent
     // each get their own reconciliation range.
     lines.push(`{{ bf.comment("loop:${loop.markerId}") | safe }}`)
-    lines.push(`{% for ${jinjaIdent(loopVar)} in ${array} %}`)
+    // `objectIteration` (#2168 object-entries-map): Python `dict` preserves
+    // JS `Object.entries()`'s insertion-order semantics natively, so this
+    // lowers straight to Jinja's own dict-iteration forms — no runtime
+    // helper needed. `.items()` binds `index` (the KEY) alongside `param`;
+    // `.keys()`/`.values()` bind `param` alone.
+    const forHeader = loop.objectIteration === 'entries'
+      ? `{% for ${jinjaIdent(loop.index ?? param)}, ${jinjaIdent(param)} in ${array}.items() %}`
+      : loop.objectIteration === 'keys'
+        ? `{% for ${jinjaIdent(param)} in ${array}.keys() %}`
+        : loop.objectIteration === 'values'
+          ? `{% for ${jinjaIdent(param)} in ${array}.values() %}`
+          : `{% for ${jinjaIdent(loopVar)} in ${array} %}`
+    lines.push(forHeader)
     for (const il of indexLocalLines) lines.push(il)
 
     // Handle filter().map() pattern by wrapping children in if-condition
@@ -974,11 +1068,33 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     type Segment = { kind: 'entries'; parts: string[] } | { kind: 'spread'; expr: string }
     const segments: Segment[] = [{ kind: 'entries', parts: [] }]
     const currentEntries = () => this.componentPropSegmentEntries(segments)
+    // Named JSX-valued props OTHER than the reserved `children`
+    // (`header={<strong>Title</strong>}`, #2168 jsx-element-prop) each get
+    // their own `{% set %}` capture, prepended to the final returned
+    // string below — same mechanism as the reserved children capture,
+    // just keyed by the prop's own name instead of `children`.
+    const namedSlotSetBlocks: string[] = []
 
     for (const p of comp.props) {
       // Skip callback props (onXxx) and `ref` — both are client-only for
       // SSR (Hono renders neither; the client JS wires them at hydration).
       if ((p.name.match(/^on[A-Z]/) || p.name === 'ref') && p.value.kind === 'expression') continue
+      if (p.value.kind === 'jsx-children' && p.name !== 'children') {
+        const prevInLoop = this.inLoop
+        this.inLoop = false
+        const slotBody = this.renderChildren(p.value.children)
+        this.inLoop = prevInLoop
+        // Purely counter-based — NOT derived from `p.name` or `comp.slotId`.
+        // A JSX prop name can contain characters (`data-slot`) that aren't a
+        // valid Jinja `{% set %}` target, and `comp.slotId` alone would
+        // collide across two named-slot props on the same component
+        // invocation (unlike the reserved children slot, there's only ever
+        // one of those per invocation).
+        const captureName = `bf_prop_${this.childrenCaptureCounter++}`
+        namedSlotSetBlocks.push(`{% set ${captureName} %}${slotBody}{% endset %}`)
+        currentEntries().push(`${jinjaHashKey(p.name)}: ${captureName}`)
+        continue
+      }
       if (p.value.kind === 'spread') {
         const trimmed = p.value.expr.trim()
         // SolidJS-style props identifier (`function(props: P)`) has no
@@ -1042,12 +1158,12 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
       const captureName = `bf_children_${comp.slotId ?? 'c' + this.childrenCaptureCounter++}`
       currentEntries().push(`${jinjaHashKey('children')}: ${captureName}`)
       const dict = this.combineComponentPropSegments(segments)
-      return `{% set ${captureName} %}${childrenBody}{% endset %}{{ bf.render_child('${tplName}', ${dict}) | safe }}`
+      return `${namedSlotSetBlocks.join('')}{% set ${captureName} %}${childrenBody}{% endset %}{{ bf.render_child('${tplName}', ${dict}) | safe }}`
     }
 
     const isEmpty = segments.every(s => s.kind === 'entries' && s.parts.length === 0)
     const dictEntries = isEmpty ? '' : `, ${this.combineComponentPropSegments(segments)}`
-    return `{{ bf.render_child('${tplName}'${dictEntries}) | safe }}`
+    return `${namedSlotSetBlocks.join('')}{{ bf.render_child('${tplName}'${dictEntries}) | safe }}`
   }
 
   private childrenCaptureCounter = 0
@@ -1132,7 +1248,7 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
    * AttrValue lowering for intrinsic-element attributes (Jinja).
    */
   private readonly elementAttrEmitter: AttrValueEmitter = {
-    emitLiteral: (value, name) => `${name}="${value.value}"`,
+    emitLiteral: (value, name) => `${name}="${escapeHtml(value.value)}"`,
     emitExpression: (value, name) => {
       // `style={{ … }}` object literal → a CSS string with dynamic values
       // interpolated, instead of refusing the bare object with BF101 (#1322).
@@ -1334,10 +1450,19 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
       // the unsupported-expression lowering is never reached for a deferred
       // predicate (no BF101 / BF102). #1966
       if (attr.clientOnly) continue
+      // `dangerouslySetInnerHTML` never renders as an HTML attribute — it's
+      // handled by `renderDangerousInnerHtml` instead, which replaces the
+      // element's children. Skip it here so its `{ __html: ... }` object
+      // literal never reaches the generic object-literal BF101 refusal
+      // (which would double-report alongside the purpose-built one).
+      if (isDangerousInnerHtmlAttr(attr)) continue
       // Rewrite JSX special-prop names to their HTML-attribute counterparts.
       let attrName: string
       if (attr.name === 'className') attrName = 'class'
-      else if (attr.name === 'key') attrName = 'data-key'
+      else if (attr.name === 'key') {
+        const depth = this.currentLoopKeyDepth
+        attrName = depth > 0 ? `data-key-${depth}` : 'data-key'
+      }
       else attrName = attr.name
       const lowered = emitAttrValue(attr.value, this.elementAttrEmitter, attrName)
       if (lowered) parts.push(lowered)
@@ -1695,8 +1820,19 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
    * single-quoted string literal (`const totalPages = 5`, #1897
    * pagination) — function-scope consts never reach the per-render
    * context, so a bare reference would resolve to Undefined.
+   *
+   * The lookup is a flat name match with no notion of AST scope, so a
+   * name that any loop callback binds as its item/index param never
+   * inlines (#2221) — the occurrence may be the loop's own (shadowing)
+   * binding, and substituting the outer const's value there renders every
+   * iteration with the same hard-coded literal. Coarse (a genuinely
+   * non-shadowed same-named const elsewhere in the component also stops
+   * inlining, falling back to the bare identifier) but safe — the same
+   * trade-off as #2212's `collectLoopBoundNames` use in
+   * `collectStringValueNames`.
    */
   private _resolveLiteralConst(name: string): string | null {
+    if (this.staticLoopSourceBoundNames.has(name)) return null
     const c = (this.localConstants ?? []).find(lc => lc.name === name)
     if (c?.value === undefined) return null
     const v = c.value.trim()
@@ -1706,7 +1842,22 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     return null
   }
 
+  /**
+   * Resolve `IDENT.key` where `IDENT` is a module-scope object-literal const
+   * (`variantClasses.ghost`, #1896/#1897) to the looked-up scalar.
+   *
+   * The lookup is a flat name match on `objectName` with no notion of AST
+   * scope, so an enclosing loop callback's own param of the same name
+   * (`.map((cfg) => <li>{cfg.x}</li>)` shadowing a module `const cfg = {…}`)
+   * still resolved to the OUTER const's member value at every iteration
+   * (#2237) — the sibling hazard to #2221's `_resolveLiteralConst`. Same
+   * coarse-but-safe `staticLoopSourceBoundNames` guard: any name a loop
+   * binds anywhere in the component never inlines, falling back to the bare
+   * `cfg['x']` member expression (which a Jinja for-loop binds correctly
+   * at the shadowed occurrences).
+   */
   private _resolveStaticRecordLiteral(objectName: string, key: string): string | null {
+    if (this.staticLoopSourceBoundNames.has(objectName)) return null
     const hit = lookupStaticRecordLiteral(objectName, key, this.localConstants)
     if (!hit) return null
     return hit.kind === 'number'

package/src/adapter/lib/constants.ts

@@ -22,6 +22,9 @@ export const JINJA_TEMPLATE_PRIMITIVES: Record<string, PrimitiveSpec> = {
   'Math.floor':     { arity: 1, emit: (args) => `bf.floor(${args[0]})` },
   'Math.ceil':      { arity: 1, emit: (args) => `bf.ceil(${args[0]})` },
   'Math.round':     { arity: 1, emit: (args) => `bf.round(${args[0]})` },
+  'Math.min':       { arity: 2, emit: (args) => `bf.min(${args[0]}, ${args[1]})` },
+  'Math.max':       { arity: 2, emit: (args) => `bf.max(${args[0]}, ${args[1]})` },
+  'Math.abs':       { arity: 1, emit: (args) => `bf.abs(${args[0]})` },
 }
 
 /**

package/src/adapter/lib/static-value.ts

@@ -0,0 +1,41 @@
+/**
+ * Serialize a compile-time-evaluated JS value (`@barefootjs/jsx`'s
+ * `evaluateStaticLiteral`/`resolveStaticLoopSource`, #2208) into a native
+ * Jinja2 literal. Used to inline a fully-static loop source (an inline
+ * array literal, or a function-scope local const with a static
+ * initializer) directly in a `{% for %}` header, rather than requiring a
+ * bound template variable.
+ *
+ * Returns `null` for a value this adapter can't represent as a literal
+ * (e.g. `undefined` reads for a missing object key are still representable
+ * as `none`, but anything else falls back to the caller's existing BF101
+ * refusal instead of guessing).
+ */
+
+import { escapeJinjaSingleQuoted, jinjaHashKey } from './jinja-naming.ts'
+
+export function staticValueToJinja(value: unknown): string | null {
+  if (value === null || value === undefined) return 'none'
+  if (typeof value === 'boolean') return value ? 'true' : 'false'
+  if (typeof value === 'number') return String(value)
+  if (typeof value === 'string') return `'${escapeJinjaSingleQuoted(value)}'`
+  if (Array.isArray(value)) {
+    const items: string[] = []
+    for (const el of value) {
+      const serialized = staticValueToJinja(el)
+      if (serialized === null) return null
+      items.push(serialized)
+    }
+    return `[${items.join(', ')}]`
+  }
+  if (typeof value === 'object') {
+    const entries: string[] = []
+    for (const [key, val] of Object.entries(value as Record<string, unknown>)) {
+      const serialized = staticValueToJinja(val)
+      if (serialized === null) return null
+      entries.push(`${jinjaHashKey(key)}: ${serialized}`)
+    }
+    return `{${entries.join(', ')}}`
+  }
+  return null
+}