@barefootjs/jsx 0.10.1 → 0.12.0

package/src/ir-to-client-js/control-flow/plan/build-event-delegation.ts

@@ -16,11 +16,15 @@ import type {
   ItemLookup,
 } from './types.ts'
 
-export function buildDynamicLoopDelegationPlan(elem: TopLevelLoop): EventDelegationPlan {
+export function buildDynamicLoopDelegationPlan(
+  elem: TopLevelLoop,
+  profileComponentName?: string,
+): EventDelegationPlan {
   return {
     kind: 'event-delegation',
     containerVar: `_${varSlotId(elem.slotId)}`,
     events: elem.bindings.events,
+    profileComponentName,
     itemLookup: buildKeyedOrIndexLookup({
       // Chain `.filter()` / `.toSorted()` so the index-based lookup walks
       // the same array shape mapArray reconciled into the DOM (#1434).
@@ -35,11 +39,19 @@ export function buildDynamicLoopDelegationPlan(elem: TopLevelLoop): EventDelegat
   }
 }
 
-export function buildBranchLoopDelegationPlan(loop: BranchLoop, cv: string): EventDelegationPlan {
+// Branch-scoped delegation (a dynamic loop nested inside a conditional branch):
+// `profileComponentName` is threaded from `buildInsertPlan` → `buildBranchLoopPlan`
+// so its delegated handlers get turn markers like every other path (#1786).
+export function buildBranchLoopDelegationPlan(
+  loop: BranchLoop,
+  cv: string,
+  profileComponentName?: string,
+): EventDelegationPlan {
   return {
     kind: 'event-delegation',
     containerVar: `__loop_${cv}`,
     events: loop.bindings.events,
+    profileComponentName,
     itemLookup: buildKeyedOrIndexLookup({
       // See note on `buildDynamicLoopDelegationPlan` above (#1434).
       array: buildChainedArrayExpr(loop),
@@ -56,11 +68,15 @@ export function buildBranchLoopDelegationPlan(loop: BranchLoop, cv: string): Eve
  * no `data-key` markers, so the lookup walks up to the container's direct
  * child and uses `indexOf` (with optional sibling offset).
  */
-export function buildStaticArrayDelegationPlan(elem: TopLevelLoop): EventDelegationPlan {
+export function buildStaticArrayDelegationPlan(
+  elem: TopLevelLoop,
+  profileComponentName?: string,
+): EventDelegationPlan {
   return {
     kind: 'event-delegation',
     containerVar: `_${varSlotId(elem.slotId)}`,
     events: elem.bindings.events,
+    profileComponentName,
     itemLookup: {
       kind: 'static-index',
       // Static arrays render through the same `.filter()`/`.toSorted()`

package/src/ir-to-client-js/control-flow/plan/build-inner-loop.ts

@@ -131,6 +131,8 @@ export function buildInnerLoopsPlan(args: BuildInnerLoopsArgs): InnerLoopsPlan {
     plan.push({
       uidSuffix,
       markerId: inner.markerId,
+      // The loop node shares its container element's slot (#1795 Phase 3).
+      slotId: inner.containerSlotId ?? '?',
       containerExpr,
       arrayExpr,
       arraySrc: inner.array,

package/src/ir-to-client-js/control-flow/plan/build-insert.ts

@@ -24,6 +24,8 @@ import type {
 export interface BuildInsertOptions {
   scope: ScopeRef
   eventNameMode: 'dom' | 'raw'
+  /** Owning component name in profile mode (#1690, SR3) — else undefined. */
+  profileComponentName?: string
 }
 
 export function buildInsertPlan(
@@ -36,6 +38,7 @@ export function buildInsertPlan(
     slotId: elem.slotId,
     condition: elem.condition,
     eventNameMode: options.eventNameMode,
+    profileComponentName: options.profileComponentName,
     arms: [
       buildArm(elem.whenTrueHtml, elem.slotId, elem.whenTrue, options),
       buildArm(elem.whenFalseHtml, elem.slotId, elem.whenFalse, options),
@@ -56,11 +59,15 @@ function buildArm(
 }
 
 function buildArmBody(branch: BranchSummary, options: BuildInsertOptions): ArmBody {
+  const pc = options.profileComponentName
   return {
     events: branch.events.map(e => ({
       slotId: e.slotId,
       eventName: e.eventName,
       handler: e.handler,
+      // Profile mode (#1690, SR3): turn id so the arm listener is wrapped with
+      // beginTurn/endTurn, matching the top-level/delegation paths.
+      turnId: pc ? `${pc}#handler:${e.slotId}:${e.eventName}` : undefined,
     })),
     refs: branch.refs.map(r => ({
       slotId: r.slotId,
@@ -81,13 +88,13 @@ function buildArmBody(branch: BranchSummary, options: BuildInsertOptions): ArmBo
       expression: t.expression,
     })),
     // Branch-scoped loops, fully Plan-built (Item 2 final migration).
-    loops: branch.loops.map(buildBranchLoopPlan),
+    loops: branch.loops.map(l => buildBranchLoopPlan(l, pc)),
     // Nested conditionals are themselves InsertPlans — built recursively so
     // the same stringifier handles arbitrary depth. Their scope is always
     // `__branchScope` (the parent arm's bindEvents argument), regardless of
     // the outer scope; only the eventNameMode is inherited.
     conditionals: branch.conditionals.map(c =>
-      buildInsertPlan(c, { scope: { kind: 'branchScope' }, eventNameMode: options.eventNameMode }),
+      buildInsertPlan(c, { scope: { kind: 'branchScope' }, eventNameMode: options.eventNameMode, profileComponentName: pc }),
     ),
   }
 }

package/src/ir-to-client-js/control-flow/plan/build-loop-child-arm.ts

@@ -76,6 +76,8 @@ export interface BuildBranchEventBindingsArgs {
   events: readonly ConditionalBranchEvent[] | undefined
   /** Loop-param wrap closure. Identity (`x => x`) when no loop param applies. */
   wrap: (expr: string) => string
+  /** Owning component name in profile mode (#1690, SR3) — else undefined. */
+  profileComponentName?: string
 }
 
 /**
@@ -87,7 +89,7 @@ export interface BuildBranchEventBindingsArgs {
 export function buildBranchEventBindingsPlan(
   args: BuildBranchEventBindingsArgs,
 ): BranchEventBindingsPlan {
-  const { events, wrap } = args
+  const { events, wrap, profileComponentName: pc } = args
   if (!events || events.length === 0) return []
 
   const eventsBySlot = new Map<string, BranchEventListener[]>()
@@ -100,6 +102,9 @@ export function buildBranchEventBindingsPlan(
     bucket.push({
       eventName: ev.eventName,
       wrappedHandler: wrap(ev.handler),
+      // Profile mode (#1690, SR3): turn id so the arm listener is wrapped with
+      // beginTurn/endTurn, matching every other handler path.
+      turnId: pc ? `${pc}#handler:${ev.slotId}:${ev.eventName}` : undefined,
     })
   }
 
@@ -273,6 +278,9 @@ export function buildBranchInnerLoopsPlan(
     plan.push({
       uidSuffix: `br_${i}`,
       markerId: inner.markerId,
+      // The loop node shares its container element's slot, so `containerSlotId`
+      // is the IR slot the analyzer's `loop` domBinding uses (#1795 Phase 3).
+      slotId: csl ?? '?',
       containerExpr,
       arrayExpr: wrapOuter(inner.array),
       keyFn: loopKeyFn(inner),

package/src/ir-to-client-js/control-flow/plan/build-loop.ts

@@ -50,6 +50,8 @@ import type {
 export interface BuildLoopPlanOptions {
   /** Local names whose CSR-time substitution forces the static-array self-heal path (#1247). */
   unsafeLocalNames: Set<string>
+  /** Owning component name when compiling in profile mode (#1690) — else undefined. */
+  profileComponentName?: string
 }
 
 /**
@@ -64,24 +66,24 @@ export function buildLoopPlan(elem: TopLevelLoop, opts: BuildLoopPlanOptions): L
   // array's per-item conditional still toggles reactively instead of freezing
   // in the SSR-time `forEach` (which has no conditional handling at all).
   if (elem.bodyIsItemConditional) {
-    return buildPlainLoopPlan(elem)
+    return buildPlainLoopPlan(elem, opts.profileComponentName)
   }
   if (elem.isStaticArray) {
-    return buildStaticLoopPlan(elem, opts.unsafeLocalNames)
+    return buildStaticLoopPlan(elem, opts.unsafeLocalNames, opts.profileComponentName)
   }
   const hasInnerStructure = (elem.nestedComponents?.length ?? 0) > 0
     || (elem.innerLoops?.length ?? 0) > 0
   if (elem.useElementReconciliation && hasInnerStructure) {
-    return buildTopLevelCompositePlan(elem)
+    return buildTopLevelCompositePlan(elem, opts.profileComponentName)
   }
   if (elem.childComponent) {
-    return buildComponentLoopPlan(elem)
+    return buildComponentLoopPlan(elem, opts.profileComponentName)
   }
-  return buildPlainLoopPlan(elem)
+  return buildPlainLoopPlan(elem, opts.profileComponentName)
 }
 
 /** @internal — prefer `buildLoopPlan`. Exported for the branch-loop wrapper only. */
-export function buildPlainLoopPlan(elem: TopLevelLoop): PlainLoopPlan {
+export function buildPlainLoopPlan(elem: TopLevelLoop, profileComponentName?: string): PlainLoopPlan {
   const wrap = (expr: string) => wrapLoopParamAsAccessor(expr, elem.param, elem.paramBindings)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings)
   const hasReactive = elem.bindings.reactiveAttrs.length > 0
@@ -92,6 +94,7 @@ export function buildPlainLoopPlan(elem: TopLevelLoop): PlainLoopPlan {
     kind: 'plain',
     containerVar: `_${varSlotId(elem.slotId)}`,
     markerId: elem.markerId,
+    profileLoopId: profileComponentName ? `${profileComponentName}#binding:${elem.slotId}` : undefined,
     arrayExpr: buildChainedArrayExpr(elem),
     keyFn: loopKeyFn(elem),
     paramHead,
@@ -99,7 +102,7 @@ export function buildPlainLoopPlan(elem: TopLevelLoop): PlainLoopPlan {
     indexParam: elem.index || '__idx',
     mapPreambleWrapped: elem.mapPreamble ? wrap(elem.mapPreamble) : '',
     template: elem.template,
-    reactiveEffects: hasReactive ? buildLoopReactiveEffectsPlan(elem) : null,
+    reactiveEffects: hasReactive ? buildLoopReactiveEffectsPlan(elem, profileComponentName) : null,
     childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,
     anchored: elem.bodyIsItemConditional ?? false,
@@ -114,7 +117,7 @@ export function buildPlainLoopPlan(elem: TopLevelLoop): PlainLoopPlan {
 }
 
 /** @internal — prefer `buildLoopPlan`. */
-export function buildStaticLoopPlan(elem: TopLevelLoop, unsafeLocalNames: Set<string>): StaticLoopPlan {
+export function buildStaticLoopPlan(elem: TopLevelLoop, unsafeLocalNames: Set<string>, profileComponentName?: string): StaticLoopPlan {
   // Group reactive attrs by their child slot id, preserving the legacy
   // declaration-order Map-iteration semantics.
   const attrsBySlotMap = new Map<string, LoopChildReactiveAttr[]>()
@@ -139,6 +142,7 @@ export function buildStaticLoopPlan(elem: TopLevelLoop, unsafeLocalNames: Set<st
     param: elem.param,
     indexParam,
     childIndexExpr,
+    profileComponentName,
     attrsBySlot: [...attrsBySlotMap].map(([slotId, attrs]) => [slotId, attrs] as const),
     texts: elem.bindings.reactiveTexts,
     // Static path: forEach binds `param` as the raw value. Passing through

package/src/ir-to-client-js/control-flow/plan/build-reactive-effects.ts

@@ -50,13 +50,15 @@ export interface BuildReactiveEffectsArgs {
   conditionals: readonly LoopChildConditional[] | undefined
   loopParam: string
   loopParamBindings?: readonly LoopParamBinding[]
+  /** Owning component name in profile mode (#1690, SR3) — else undefined. */
+  profileComponentName?: string
 }
 
 /** Build a fully-resolved `ReactiveEffectsPlan` from the IR slice. */
 export function buildReactiveEffectsPlan(
   args: BuildReactiveEffectsArgs,
 ): ReactiveEffectsPlan {
-  const { attrs, texts, conditionals, loopParam, loopParamBindings } = args
+  const { attrs, texts, conditionals, loopParam, loopParamBindings, profileComponentName } = args
   const wrap = (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings)
 
   // 1. Group attrs by slot, preserving declaration order (Map insertion order
@@ -131,8 +133,8 @@ export function buildReactiveEffectsPlan(
         wrappedCondition: wrap(cond.condition),
         whenTrueTemplateHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
         whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
-        whenTrueArm: buildOuterArm(cond.whenTrue, trueTexts, wrap, loopParam, loopParamBindings),
-        whenFalseArm: buildOuterArm(cond.whenFalse, falseTexts, wrap, loopParam, loopParamBindings),
+        whenTrueArm: buildOuterArm(cond.whenTrue, trueTexts, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, falseTexts, wrap, loopParam, loopParamBindings, profileComponentName),
       })
     }
   }
@@ -141,6 +143,7 @@ export function buildReactiveEffectsPlan(
     attrSlots,
     outerTexts,
     conditionals: conditionalPlans,
+    profileComponentName,
   }
 }
 
@@ -150,11 +153,13 @@ function buildOuterArm(
   wrap: (expr: string) => string,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  profileComponentName?: string,
 ): LoopChildArmPlan {
   return {
     events: buildBranchEventBindingsPlan({
       events: branch.events,
       wrap,
+      profileComponentName,
     }),
     childComponents: buildBranchChildComponentInitsPlan({
       components: branch.childComponents,
@@ -182,12 +187,13 @@ function buildOuterArm(
  * Convenience: build a ReactiveEffectsPlan directly from a `TopLevelLoop`,
  * pulling the same IR slice the legacy emitter consumed.
  */
-export function buildLoopReactiveEffectsPlan(elem: TopLevelLoop): ReactiveEffectsPlan {
+export function buildLoopReactiveEffectsPlan(elem: TopLevelLoop, profileComponentName?: string): ReactiveEffectsPlan {
   return buildReactiveEffectsPlan({
     attrs: elem.bindings.reactiveAttrs,
     texts: elem.bindings.reactiveTexts,
     conditionals: elem.bindings.conditionals,
     loopParam: elem.param,
     loopParamBindings: elem.paramBindings,
+    profileComponentName,
   })
 }

package/src/ir-to-client-js/control-flow/plan/event-delegation.ts

@@ -26,6 +26,13 @@ export interface EventDelegationPlan {
   containerVar: string
   events: LoopChildEvent[]
   itemLookup: ItemLookup
+  /**
+   * Profile mode (#1690, SR3): the owning component name. When set, the
+   * stringifier brackets each delegated handler call with `beginTurn`/`endTurn`
+   * (id `<Component>#handler:<childSlotId>:<eventName>`). Undefined when
+   * profiling is off, so the emitted dispatcher is unchanged (SR8).
+   */
+  profileComponentName?: string
 }
 
 /**

package/src/ir-to-client-js/control-flow/plan/inner-loop.ts

@@ -83,6 +83,13 @@ export interface InnerLoopPlan {
   uidSuffix: string
   /** Loop marker id — passed to mapArray so sibling loops disambiguate (#1087). */
   markerId: string
+  /**
+   * IR slot id for this inner loop (#1690, #1795 Phase 3). The loop node shares
+   * its container element's slot, so this is `containerSlotId`. Used to emit the
+   * `<Component>#binding:<slotId>` profile id on the inner `mapArray`; resolves
+   * via the `loop` `domBinding`. `'?'` when the IR carried no slot.
+   */
+  slotId: string
   /** Container resolution expression — already includes scope / selectors. */
   containerExpr: string
   /** Array expression as wrapped (reactive) or as written in source (static). */

package/src/ir-to-client-js/control-flow/plan/insert.ts

@@ -29,6 +29,12 @@ export interface InsertPlan {
    * keeps the original event name (used by `@client` conditionals).
    */
   eventNameMode: 'dom' | 'raw'
+  /**
+   * Owning component name in profile mode (#1690, SR4). When set, the
+   * conditional's `insert()` effect and its branch binding effects carry a
+   * `<Component>#binding:<slotId>` id so the profiler attributes them.
+   */
+  profileComponentName?: string
 }
 
 /** A single branch arm of an insert(). */
@@ -79,6 +85,8 @@ export interface ArmEventBind {
   eventName: string
   /** Handler source expression (already trimmed). The stringifier wraps it. */
   handler: string
+  /** Profile-mode turn id (#1690, SR3); when set the listener is turn-wrapped. */
+  turnId?: string
 }
 
 export interface ArmRefBind {

package/src/ir-to-client-js/control-flow/plan/loop-child-arm.ts

@@ -20,6 +20,8 @@ export interface BranchEventListener {
   eventName: string
   /** Already wrapped via wrapLoopParamAsAccessor at build time. */
   wrappedHandler: string
+  /** Profile-mode turn id (#1690, SR3); when set the listener is turn-wrapped. */
+  turnId?: string
 }
 
 /** Listeners grouped by slot (one qsa() lookup per slot). */
@@ -90,6 +92,12 @@ export interface BranchInnerLoop {
   uidSuffix: string
   /** Loop marker id — passed to mapArray so sibling loops disambiguate (#1087). */
   markerId: string
+  /**
+   * IR slot id for the inner loop (#1690, #1795 Phase 3). Used to emit the
+   * `<Component>#binding:<slotId>` profile id on the inner `mapArray`; resolves
+   * via the `loop` `domBinding`. `'?'` when the IR carried no slot.
+   */
+  slotId: string
   /** Container resolution expression — already includes scope and selectors. */
   containerExpr: string
   /** Wrapped array expression (`wrapOuter(inner.array)`). */

package/src/ir-to-client-js/control-flow/plan/loop.ts

@@ -50,6 +50,13 @@ interface LoopPlanCommon {
 interface DynamicLoopCommon extends LoopPlanCommon {
   /** Loop marker id — passed to mapArray so sibling loops disambiguate (#1087). */
   markerId: string
+  /**
+   * Profile mode (#1690, SR4): the loop's binding id
+   * (`<Component>#binding:<slotId>`), passed to `mapArray` as the `bfId` so its
+   * internal reconcile effect — typically the costliest subscriber in a list —
+   * is attributed to source. Undefined when profiling is off.
+   */
+  profileLoopId?: string
   /** Key function source — `null` when the loop has no explicit key. */
   keyFn: string
   /** renderItem param identifier (after destructure unwrap rename). */
@@ -134,6 +141,11 @@ interface ComponentLoopVariant extends DynamicLoopCommon {
   nestedComps: NestedComponentInit[]
   /** Reactive-effects plan for `childConditionals` inside the loop body. */
   childConditionalEffects: ReactiveEffectsPlan | null
+  /**
+   * Profile-mode loop id (#1690, #1795 Phase 3) for the component loop's
+   * `mapArray`. Undefined off → byte-identical (SR8).
+   */
+  profileLoopId?: string
 }
 
 /**
@@ -177,6 +189,16 @@ interface CompositeLoopVariant extends DynamicLoopCommon {
    * `qsa(__el, ...)` → `qsaItem(__el, ...)` for reactive lookups (#1212).
    */
   bodyIsMultiRoot: boolean
+  /**
+   * Profile-mode loop id (#1690, #1795 Phase 3): `<Component>#binding:<slotId>`
+   * for the composite `mapArray`. Undefined off → byte-identical (SR8).
+   */
+  profileLoopId?: string
+  /**
+   * Owning component name in profile mode — threaded to `stringifyInnerLoops`
+   * so per-item inner-loop / text / attribute effects carry binding ids.
+   */
+  profileComponentName?: string
 }
 
 /**
@@ -201,6 +223,12 @@ interface StaticLoopVariant extends LoopPlanCommon {
    * Null for the SSR-then-hydrate-only common case.
    */
   csrMaterialize: StaticLoopMaterializePlan | null
+  /**
+   * Owning component name in profile mode (#1690, #1795 Phase 3). When set,
+   * each static-loop child attribute / text `createEffect` carries a
+   * `<Component>#binding:<slotId>` id. Undefined off → byte-identical (SR8).
+   */
+  profileComponentName?: string
 }
 
 /**

package/src/ir-to-client-js/control-flow/plan/reactive-effects.ts

@@ -62,4 +62,11 @@ export interface ReactiveEffectsPlan {
   /** Text effects scoped to the outer renderItem (not inside any conditional). */
   outerTexts: readonly ReactiveTextEffect[]
   conditionals: readonly NestedConditionalPlan[]
+  /**
+   * Owning component name in profile mode (#1690, SR4, #1795 Phase 2). When
+   * set, each loop-child attribute / outer-text `createEffect` carries a
+   * `<Component>#binding:<slotId>` id so the profiler attributes its per-item
+   * re-runs to source. Undefined off → byte-identical (SR8).
+   */
+  profileComponentName?: string
 }

package/src/ir-to-client-js/control-flow/stringify/branch-loop.ts

@@ -57,8 +57,10 @@ function emitPlain(lines: string[], plan: BranchPlainLoopPlan): void {
     eventDelegation,
     childRefs,
     bodyIsMultiRoot,
+    profileLoopId,
   } = plan
 
+  const loopBfId = profileLoopId ? `, ${JSON.stringify(profileLoopId)}` : ''
   const unwrapInline = paramUnwrap ? `${paramUnwrap} ` : ''
 
   // Wrap the mapArray() in a disposable effect so the inner createEffect
@@ -73,9 +75,9 @@ function emitPlain(lines: string[], plan: BranchPlainLoopPlan): void {
     // Simple case: single-line renderItem (single root, no reactive effects).
     const cloneExpr = emitTemplateCloneInline(template)
     if (mapPreambleWrapped) {
-      lines.push(`        if (${containerVar}) mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => { ${unwrapInline}if (__existing) return __existing; ${mapPreambleWrapped}; ${cloneExpr} }, '${markerId}')`)
+      lines.push(`        if (${containerVar}) mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => { ${unwrapInline}if (__existing) return __existing; ${mapPreambleWrapped}; ${cloneExpr} }, '${markerId}'${loopBfId})`)
     } else {
-      lines.push(`        if (${containerVar}) mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => { ${unwrapInline}if (__existing) return __existing; ${cloneExpr} }, '${markerId}')`)
+      lines.push(`        if (${containerVar}) mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => { ${unwrapInline}if (__existing) return __existing; ${cloneExpr} }, '${markerId}'${loopBfId})`)
     }
   } else {
     // Multi-line renderItem (reactive effects and/or multi-root and/or refs).
@@ -97,7 +99,7 @@ function emitPlain(lines: string[], plan: BranchPlainLoopPlan): void {
     }
     emitLoopChildRefs(lines, childRefs, { indent: '          ', elVar: '__el', bodyIsMultiRoot })
     lines.push(`          return __el`)
-    lines.push(`        }, '${markerId}')`)
+    lines.push(`        }, '${markerId}'${loopBfId})`)
   }
   lines.push(`      }))`)
 

package/src/ir-to-client-js/control-flow/stringify/component-loop.ts

@@ -48,8 +48,10 @@ export function stringifyComponentLoop(lines: string[], plan: ComponentLoopPlan)
     keyExpr,
     nestedComps,
     childConditionalEffects,
+    profileLoopId,
   } = plan
 
+  const loopBfId = profileLoopId ? `, ${JSON.stringify(profileLoopId)}` : ''
   lines.push(`  mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => {`)
   if (paramUnwrap) lines.push(`    ${paramUnwrap}`)
 
@@ -58,7 +60,7 @@ export function stringifyComponentLoop(lines: string[], plan: ComponentLoopPlan)
   if (nestedComps.length === 0) {
     lines.push(`    if (__existing) { initChild('${scopedComp}', __existing, ${componentPropsExpr}); return __existing }`)
     lines.push(`    return createComponent('${scopedComp}', ${componentPropsExpr}, ${keyExpr})`)
-    lines.push(`  }, '${markerId}')`)
+    lines.push(`  }, '${markerId}'${loopBfId})`)
     return
   }
 
@@ -79,7 +81,7 @@ export function stringifyComponentLoop(lines: string[], plan: ComponentLoopPlan)
     stringifyReactiveEffects(lines, childConditionalEffects, { indent: '    ', elVar: '__csrEl' })
   }
   lines.push(`    return __csrEl`)
-  lines.push(`  }, '${markerId}')`)
+  lines.push(`  }, '${markerId}'${loopBfId})`)
 }
 
 function emitNestedInit(lines: string[], indent: string, parentVar: string, nc: NestedComponentInit): void {

package/src/ir-to-client-js/control-flow/stringify/composite-loop.ts

@@ -59,6 +59,8 @@ export function stringifyCompositeLoop(lines: string[], plan: CompositeLoopPlan)
     topIndent,
     bodyIndent: rawBodyIndent,
     bodyIsMultiRoot,
+    profileComponentName: pc,
+    profileLoopId,
   } = plan
 
   // When wrapping the mapArray in createDisposableEffect (branch case), the
@@ -120,7 +122,7 @@ export function stringifyCompositeLoop(lines: string[], plan: CompositeLoopPlan)
   })
   emitComponentAndEventSetup(lines, bodyIndent, '__el', compsArr, eventsArr, loopParam, loopParamBindings, bodyIsMultiRoot)
   if (innerLoops.length > 0) {
-    stringifyInnerLoops(lines, innerLoops, bodyIndent)
+    stringifyInnerLoops(lines, innerLoops, bodyIndent, pc)
   }
 
   if (reactiveEffects) {
@@ -130,11 +132,12 @@ export function stringifyCompositeLoop(lines: string[], plan: CompositeLoopPlan)
   emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot })
 
   lines.push(`${bodyIndent}return __el`)
+  const loopBfId = profileLoopId ? `, ${JSON.stringify(profileLoopId)}` : ''
   if (branchClearChildren) {
     // Close inner mapArray + createDisposableEffect wrapper.
-    lines.push(`${mapArrayIndent}}, '${markerId}')`)
+    lines.push(`${mapArrayIndent}}, '${markerId}'${loopBfId})`)
     lines.push(`${topIndent}}))`)
   } else {
-    lines.push(`${topIndent}}, '${markerId}')`)
+    lines.push(`${topIndent}}, '${markerId}'${loopBfId})`)
   }
 }

package/src/ir-to-client-js/control-flow/stringify/event-delegation.ts

@@ -48,8 +48,20 @@ const NON_BUBBLING_EVENTS = new Set([
   'pointerenter', 'pointerleave',
 ])
 
+/**
+ * Profile mode (#1690, SR3): bracket a delegated handler call with turn
+ * markers so a profiling run attributes the reactive work it triggers to one
+ * turn. `call` is the inline invocation (e.g. `(handler)(__bfEvt)`); the
+ * wrapper keeps it a single statement so it drops into every lookup shape.
+ */
+function withTurn(call: string, componentName: string | undefined, childSlotId: string, eventName: string): string {
+  if (!componentName) return call
+  const id = JSON.stringify(`${componentName}#handler:${childSlotId}:${eventName}`)
+  return `beginTurn(${id}); try { ${call} } finally { endTurn() }`
+}
+
 export function stringifyEventDelegation(lines: string[], plan: EventDelegationPlan): void {
-  const { containerVar, events, itemLookup } = plan
+  const { containerVar, events, itemLookup, profileComponentName } = plan
   const eventsByName = new Map<string, LoopChildEvent[]>()
   for (const ev of events) {
     if (!eventsByName.has(ev.eventName)) eventsByName.set(ev.eventName, [])
@@ -70,7 +82,7 @@ export function stringifyEventDelegation(lines: string[], plan: EventDelegationP
       const childVar = varSlotId(ev.childSlotId)
       lines.push(`    const ${childVar}El = target.closest('[bf="${ev.childSlotId}"]')`)
       lines.push(`    if (${childVar}El) {`)
-      const handlerCall = `(${ev.handler.trim()})(__bfEvt)`
+      const handlerCall = withTurn(`(${ev.handler.trim()})(__bfEvt)`, profileComponentName, ev.childSlotId, ev.eventName)
       switch (itemLookup.kind) {
         case 'keyed':
           emitKeyedLookup(lines, ev, handlerCall, itemLookup)

package/src/ir-to-client-js/control-flow/stringify/event-listener.ts

@@ -13,7 +13,7 @@
  * by `@client` conditionals).
  */
 
-import { toDomEventName, wrapHandlerInBlock } from '../../utils.ts'
+import { toDomEventName, wrapHandlerInBlock, wrapHandlerForTurn } from '../../utils.ts'
 
 export type EventNameMode = 'dom' | 'raw'
 
@@ -31,8 +31,11 @@ export function emitListenerLine(
   eventName: string,
   handler: string,
   mode: EventNameMode = 'dom',
+  turnId?: string,
 ): void {
-  const wrapped = wrapHandlerInBlock(handler)
+  // Profile mode (#1690, SR3): when a turn id is supplied the handler is
+  // bracketed with beginTurn/endTurn instead of the plain block wrap.
+  const wrapped = turnId ? wrapHandlerForTurn(handler, turnId) : wrapHandlerInBlock(handler)
   const name = mode === 'dom' ? toDomEventName(eventName) : eventName
   lines.push(`${indent}if (${elementVar}) ${elementVar}.addEventListener('${name}', ${wrapped})`)
 }