@barefootjs/jsx 0.1.3 → 1.0.0

package/src/debug.ts

@@ -12,10 +12,14 @@ import type {
   IRConditional,
   IRElement,
   IRLoop,
+  IRComponent,
+  IRText,
+  IRMetadata,
   AttrValue,
   SignalInfo,
   MemoInfo,
   EffectInfo,
+  SourceLocation,
 } from './types'
 import { analyzeComponent, listComponentFunctions } from './analyzer'
 import { jsxToIR } from './jsx-to-ir'
@@ -93,6 +97,8 @@ export interface DomBinding {
    * bindings; omitted for event handlers (not subject to the wrap gate).
    */
   wrapReason?: WrapReason
+  loc?: SourceLocation
+  jsxPreview?: string
 }
 
 export interface ComponentGraph {
@@ -118,6 +124,64 @@ export interface UpdatePathEntry {
   children: UpdatePathEntry[]
 }
 
+// -- Event analysis types -----------------------------------------------------
+
+export interface EventBinding {
+  elementTag: string
+  elementContext: string
+  eventName: string
+  handler: string
+  setterCalls: SetterRef[]
+  loc: SourceLocation
+  isComponentProp: boolean
+}
+
+export interface SetterRef {
+  setter: string
+  signal: string | null
+  via?: string
+}
+
+export interface EventSummary {
+  componentName: string
+  sourceFile: string
+  events: EventBinding[]
+  graph: ComponentGraph
+}
+
+// -- Loop analysis types ------------------------------------------------------
+
+export interface LoopInfo {
+  array: string
+  param: string
+  index: string | null
+  key: string | null
+  method: 'map' | 'flatMap'
+  bindings: LoopChildBinding[]
+  loc: SourceLocation
+}
+
+export interface LoopChildBinding {
+  elementContext: string
+  kind: 'attribute' | 'text' | 'event'
+  name: string
+  deps: string[]
+  loc?: SourceLocation
+}
+
+export interface LoopSummary {
+  componentName: string
+  sourceFile: string
+  loops: LoopInfo[]
+}
+
+// -- Component analysis (shared IR + graph) -----------------------------------
+
+export interface ComponentAnalysis {
+  graph: ComponentGraph
+  ir: ComponentIR
+}
+
 // =============================================================================
 // Analysis: Build Component Graph
 // =============================================================================
@@ -262,6 +326,516 @@ export function buildGraphFromIR(ir: ComponentIR): ComponentGraph {
   }
 }
 
+/**
+ * Build both the ComponentIR and the reactive dependency graph in one pass.
+ * Callers that need the raw IR tree (events, loops, why-update) use this
+ * instead of `buildComponentGraph` to avoid a redundant analysis round.
+ */
+export function buildComponentAnalysis(source: string, filePath: string, componentName?: string): ComponentAnalysis {
+  const ctx = analyzeComponent(source, filePath, componentName)
+  const emptyIR: ComponentIR = {
+    version: '0.1',
+    metadata: buildMetadata(ctx),
+    root: { type: 'fragment', children: [], loc: { file: filePath, start: { line: 1, column: 0 }, end: { line: 1, column: 0 } } },
+    errors: [],
+  }
+
+  if (!ctx.jsxReturn) {
+    return { graph: buildGraphFromIR(emptyIR), ir: emptyIR }
+  }
+
+  const root = jsxToIR(ctx)
+  if (!root) {
+    return { graph: buildGraphFromIR(emptyIR), ir: emptyIR }
+  }
+
+  const ir: ComponentIR = { version: '0.1', metadata: buildMetadata(ctx), root, errors: [] }
+  return { graph: buildGraphFromIR(ir), ir }
+}
+
+// =============================================================================
+// Analysis: Event Bindings
+// =============================================================================
+
+/**
+ * Build a complete event summary for a component, including setter resolution
+ * and downstream update paths.
+ */
+export function buildEventSummary(source: string, filePath: string, componentName?: string): EventSummary {
+  const { graph, ir } = buildComponentAnalysis(source, filePath, componentName)
+  const setterToSignal = new Map<string, string>()
+  for (const s of ir.metadata.signals) {
+    if (s.setter) setterToSignal.set(s.setter, s.getter)
+  }
+
+  const fnSetters = buildLocalFunctionSetterMap(ir.metadata, setterToSignal)
+  const events = collectEventBindings(ir.root, setterToSignal, fnSetters)
+
+  return {
+    componentName: graph.componentName,
+    sourceFile: graph.sourceFile,
+    events,
+    graph,
+  }
+}
+
+function escapeForIdBoundary(name: string): string {
+  return name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function makeIdCallRegex(name: string): RegExp {
+  return new RegExp(`(?:^|[^\\w$])${escapeForIdBoundary(name)}\\s*\\(`)
+}
+
+function makeIdRefRegex(name: string): RegExp {
+  return new RegExp(`(?:^|[^\\w$])${escapeForIdBoundary(name)}(?:[^\\w$]|$)`)
+}
+
+function buildLocalFunctionSetterMap(
+  meta: IRMetadata,
+  setterToSignal: Map<string, string>,
+): Map<string, string[]> {
+  const setterPatterns = [...setterToSignal.keys()].map(s => ({ name: s, re: makeIdCallRegex(s) }))
+  const result = new Map<string, string[]>()
+  for (const fn of meta.localFunctions) {
+    const setters: string[] = []
+    for (const { name, re } of setterPatterns) {
+      if (re.test(fn.body)) setters.push(name)
+    }
+    if (setters.length > 0) result.set(fn.name, setters)
+  }
+  return result
+}
+
+function collectEventBindings(
+  node: IRNode,
+  setterToSignal: Map<string, string>,
+  fnSetters: Map<string, string[]>,
+): EventBinding[] {
+  const events: EventBinding[] = []
+  walkForEvents(node, events, setterToSignal, fnSetters)
+  return events
+}
+
+function walkForEvents(
+  node: IRNode,
+  events: EventBinding[],
+  setterToSignal: Map<string, string>,
+  fnSetters: Map<string, string[]>,
+): void {
+  switch (node.type) {
+    case 'element': {
+      for (const event of node.events) {
+        events.push({
+          elementTag: node.tag,
+          elementContext: describeElement(node),
+          eventName: event.originalAttr ?? `on${event.name[0].toUpperCase()}${event.name.slice(1)}`,
+          handler: event.handler,
+          setterCalls: resolveSetters(event.handler, setterToSignal, fnSetters),
+          loc: event.loc,
+          isComponentProp: false,
+        })
+      }
+      for (const child of node.children) {
+        walkForEvents(child, events, setterToSignal, fnSetters)
+      }
+      break
+    }
+    case 'component': {
+      for (const prop of node.props) {
+        if (!/^on[A-Z]/.test(prop.name)) continue
+        const handler = prop.value.kind === 'expression' ? prop.value.expr : null
+        if (!handler) continue
+        events.push({
+          elementTag: node.name,
+          elementContext: describeComponent(node),
+          eventName: prop.name,
+          handler,
+          setterCalls: resolveSetters(handler, setterToSignal, fnSetters),
+          loc: prop.loc,
+          isComponentProp: true,
+        })
+      }
+      for (const child of node.children) {
+        walkForEvents(child, events, setterToSignal, fnSetters)
+      }
+      break
+    }
+    case 'fragment':
+    case 'provider': {
+      for (const child of node.children) {
+        walkForEvents(child, events, setterToSignal, fnSetters)
+      }
+      break
+    }
+    case 'conditional': {
+      walkForEvents(node.whenTrue, events, setterToSignal, fnSetters)
+      walkForEvents(node.whenFalse, events, setterToSignal, fnSetters)
+      break
+    }
+    case 'loop': {
+      for (const child of node.children) {
+        walkForEvents(child, events, setterToSignal, fnSetters)
+      }
+      break
+    }
+    case 'if-statement': {
+      walkForEvents(node.consequent, events, setterToSignal, fnSetters)
+      if (node.alternate) walkForEvents(node.alternate, events, setterToSignal, fnSetters)
+      break
+    }
+    case 'async': {
+      walkForEvents(node.fallback, events, setterToSignal, fnSetters)
+      for (const child of node.children) {
+        walkForEvents(child, events, setterToSignal, fnSetters)
+      }
+      break
+    }
+  }
+}
+
+function resolveSetters(
+  handler: string,
+  setterToSignal: Map<string, string>,
+  fnSetters: Map<string, string[]>,
+): SetterRef[] {
+  const refs: SetterRef[] = []
+  const seen = new Set<string>()
+  const trimmed = handler.trim()
+
+  for (const [setter, signal] of setterToSignal) {
+    if (trimmed === setter || makeIdCallRegex(setter).test(handler)) {
+      if (!seen.has(setter)) {
+        refs.push({ setter, signal })
+        seen.add(setter)
+      }
+    }
+  }
+
+  for (const [fnName, setters] of fnSetters) {
+    if (trimmed === fnName || makeIdCallRegex(fnName).test(handler)) {
+      for (const setter of setters) {
+        if (!seen.has(setter)) {
+          refs.push({ setter, signal: setterToSignal.get(setter) ?? null, via: fnName })
+          seen.add(setter)
+        }
+      }
+    }
+  }
+
+  return refs
+}
+
+function describeElement(node: IRElement): string {
+  for (const attr of node.attrs) {
+    if (['type', 'name', 'placeholder', 'id'].includes(attr.name) && attr.value.kind === 'literal') {
+      return `${node.tag} ${attr.value.value}`
+    }
+  }
+  const textChild = node.children.find((c): c is IRText => c.type === 'text')
+  if (textChild && textChild.value.trim()) {
+    return `${textChild.value.trim()} ${node.tag}`
+  }
+  return node.tag
+}
+
+function describeComponent(node: IRComponent): string {
+  const textChild = node.children.find((c): c is IRText => c.type === 'text')
+  if (textChild && textChild.value.trim()) {
+    return `${textChild.value.trim()} ${node.name}`
+  }
+  return node.name
+}
+
+/**
+ * Format an event summary as a human-readable string for `bf debug events`.
+ * Uses the graph to trace downstream updates for each setter.
+ */
+export function formatEventSummary(summary: EventSummary, graph: ComponentGraph): string {
+  const lines: string[] = []
+  lines.push(`${summary.componentName} — ${summary.events.length} event handler(s)`)
+
+  if (summary.events.length === 0) return lines.join('\n')
+
+  for (const event of summary.events) {
+    lines.push('')
+    lines.push(`  ${event.elementContext}`)
+
+    const setterParts = event.setterCalls.map(s => {
+      const chain = s.via ? `${s.via} -> ${s.setter}` : s.setter
+      return chain
+    })
+
+    const setterStr = setterParts.length > 0 ? setterParts.join(', ') : event.handler
+    lines.push(`    ${event.eventName} -> ${setterStr}`)
+
+    const updatedSignals = new Set<string>()
+    for (const sc of event.setterCalls) {
+      if (sc.signal) updatedSignals.add(sc.signal)
+    }
+
+    if (updatedSignals.size > 0) {
+      const targets: string[] = []
+      for (const sig of updatedSignals) {
+        const path = traceUpdatePath(graph, sig)
+        if (path && path.dependents.length > 0) {
+          const downstream = flattenUpdateTargets(path.dependents)
+          targets.push(`${sig} -> ${downstream.join(', ')}`)
+        }
+      }
+      if (targets.length > 0) {
+        lines.push(`    updates: ${targets.join('; ')}`)
+      }
+    }
+
+    const loc = event.loc
+    if (loc.file) {
+      const locFile = loc.file.split('/').pop() ?? loc.file
+      lines.push(`    at ${locFile}:${loc.start.line}`)
+    }
+  }
+
+  return lines.join('\n')
+}
+
+function flattenUpdateTargets(entries: UpdatePathEntry[]): string[] {
+  const targets: string[] = []
+  for (const entry of entries) {
+    if (entry.kind === 'dom') {
+      targets.push(entry.label)
+    } else if (entry.kind === 'memo') {
+      targets.push(entry.name)
+      if (entry.children.length > 0) {
+        targets.push(...flattenUpdateTargets(entry.children))
+      }
+    } else if (entry.kind === 'effect') {
+      targets.push(`effect ${entry.name}`)
+    }
+  }
+  return targets
+}
+
+// =============================================================================
+// Analysis: Loop Bindings
+// =============================================================================
+
+interface PrecompiledLoopPatterns {
+  signalCallPatterns: Array<{ name: string; re: RegExp }>
+  memoCallPatterns: Array<{ name: string; re: RegExp }>
+  paramRefPatterns: Array<{ name: string; re: RegExp }>
+}
+
+export function buildLoopSummary(source: string, filePath: string, componentName?: string): LoopSummary {
+  const { graph, ir } = buildComponentAnalysis(source, filePath, componentName)
+  const signalGetters = new Set(ir.metadata.signals.map(s => s.getter))
+  const memoNames = new Set(ir.metadata.memos.map(m => m.name))
+  const loops: LoopInfo[] = []
+  collectLoops(ir.root, loops, signalGetters, memoNames)
+  return { componentName: graph.componentName, sourceFile: graph.sourceFile, loops }
+}
+
+function collectLoops(
+  node: IRNode,
+  loops: LoopInfo[],
+  signalGetters: Set<string>,
+  memoNames: Set<string>,
+): void {
+  switch (node.type) {
+    case 'loop': {
+      const bindings: LoopChildBinding[] = []
+      const paramNames = extractLoopParamNames(node.param, node)
+      if (node.index) paramNames.push(node.index)
+      const patterns: PrecompiledLoopPatterns = {
+        signalCallPatterns: [...signalGetters].map(g => ({ name: g, re: makeIdCallRegex(g) })),
+        memoCallPatterns: [...memoNames].map(m => ({ name: m, re: makeIdCallRegex(m) })),
+        paramRefPatterns: paramNames.map(n => ({ name: n, re: makeIdRefRegex(n) })),
+      }
+      collectLoopChildBindings(node.children, bindings, patterns)
+      loops.push({
+        array: node.array,
+        param: node.param,
+        index: node.index ?? null,
+        key: node.key ?? null,
+        method: node.method === 'flatMap' ? 'flatMap' : 'map',
+        bindings,
+        loc: node.loc,
+      })
+      for (const child of node.children) collectLoops(child, loops, signalGetters, memoNames)
+      break
+    }
+    case 'element': {
+      for (const child of node.children) collectLoops(child, loops, signalGetters, memoNames)
+      break
+    }
+    case 'component': {
+      for (const child of node.children) collectLoops(child, loops, signalGetters, memoNames)
+      break
+    }
+    case 'fragment':
+    case 'provider': {
+      for (const child of node.children) collectLoops(child, loops, signalGetters, memoNames)
+      break
+    }
+    case 'conditional': {
+      collectLoops(node.whenTrue, loops, signalGetters, memoNames)
+      collectLoops(node.whenFalse, loops, signalGetters, memoNames)
+      break
+    }
+    case 'if-statement': {
+      collectLoops(node.consequent, loops, signalGetters, memoNames)
+      if (node.alternate) collectLoops(node.alternate, loops, signalGetters, memoNames)
+      break
+    }
+    case 'async': {
+      collectLoops(node.fallback, loops, signalGetters, memoNames)
+      for (const child of node.children) collectLoops(child, loops, signalGetters, memoNames)
+      break
+    }
+  }
+}
+
+function collectLoopChildBindings(
+  children: IRNode[],
+  bindings: LoopChildBinding[],
+  patterns: PrecompiledLoopPatterns,
+  parentTag?: string,
+): void {
+  for (const child of children) {
+    switch (child.type) {
+      case 'element': {
+        const ctx = child.tag
+        for (const attr of child.attrs) {
+          if (attr.name === 'key' || attr.name === '...' || attr.name.startsWith('...')) continue
+          if (attr.value.kind !== 'expression' && attr.value.kind !== 'template' && attr.value.kind !== 'spread') continue
+          const expr = attrValueToString(attr.value)
+          if (!expr) continue
+          const deps = collectLoopDepsPrecompiled(expr, patterns)
+          if (deps.length > 0) {
+            bindings.push({ elementContext: ctx, kind: 'attribute', name: attr.name, deps, loc: attr.loc })
+          }
+        }
+        for (const event of child.events) {
+          const deps = collectLoopDepsPrecompiled(event.handler, patterns)
+          bindings.push({
+            elementContext: ctx,
+            kind: 'event',
+            name: event.originalAttr ?? `on${event.name[0].toUpperCase()}${event.name.slice(1)}`,
+            deps,
+            loc: event.loc,
+          })
+        }
+        collectLoopChildBindings(child.children, bindings, patterns, ctx)
+        break
+      }
+      case 'expression': {
+        if (child.slotId) {
+          const deps = collectLoopDepsPrecompiled(child.expr, patterns)
+          if (deps.length > 0) {
+            bindings.push({ elementContext: parentTag ?? 'text', kind: 'text', name: child.expr, deps, loc: child.loc })
+          }
+        }
+        break
+      }
+      case 'component': {
+        const ctx = child.name
+        for (const prop of child.props) {
+          if (prop.name === '...' || prop.name.startsWith('...')) continue
+          if (prop.value.kind !== 'expression' && prop.value.kind !== 'template' && prop.value.kind !== 'spread') continue
+          const propValue = attrValueToString(prop.value) ?? ''
+          if (!propValue) continue
+          const deps = collectLoopDepsPrecompiled(propValue, patterns)
+          if (deps.length > 0) {
+            const isEvent = /^on[A-Z]/.test(prop.name)
+            bindings.push({ elementContext: ctx, kind: isEvent ? 'event' : 'attribute', name: prop.name, deps, loc: prop.loc })
+          }
+        }
+        for (const c of child.children) {
+          collectLoopChildBindings([c], bindings, patterns, parentTag)
+        }
+        break
+      }
+      case 'conditional': {
+        collectLoopChildBindings([child.whenTrue], bindings, patterns, parentTag)
+        collectLoopChildBindings([child.whenFalse], bindings, patterns, parentTag)
+        break
+      }
+      case 'fragment':
+      case 'provider': {
+        collectLoopChildBindings(child.children, bindings, patterns, parentTag)
+        break
+      }
+      case 'loop': {
+        break
+      }
+      case 'if-statement': {
+        collectLoopChildBindings([child.consequent], bindings, patterns, parentTag)
+        if (child.alternate) collectLoopChildBindings([child.alternate], bindings, patterns, parentTag)
+        break
+      }
+      case 'async': {
+        collectLoopChildBindings([child.fallback], bindings, patterns, parentTag)
+        collectLoopChildBindings(child.children, bindings, patterns, parentTag)
+        break
+      }
+    }
+  }
+}
+
+function extractLoopParamNames(loopParam: string, node: IRLoop): string[] {
+  if (node.paramBindings && node.paramBindings.length > 0) {
+    return node.paramBindings.map(b => b.name)
+  }
+  if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(loopParam)) {
+    return [loopParam]
+  }
+  return []
+}
+
+function collectLoopDepsPrecompiled(
+  expr: string,
+  patterns: PrecompiledLoopPatterns,
+): string[] {
+  const deps: string[] = []
+  for (const { name, re } of patterns.signalCallPatterns) {
+    if (re.test(expr)) deps.push(name)
+  }
+  for (const { name, re } of patterns.memoCallPatterns) {
+    if (re.test(expr)) deps.push(name)
+  }
+  for (const { name, re } of patterns.paramRefPatterns) {
+    if (re.test(expr)) deps.push(name)
+  }
+  return deps
+}
+
+export function formatLoopSummary(summary: LoopSummary): string {
+  const lines: string[] = []
+  lines.push(`${summary.componentName} — ${summary.loops.length} loop(s)`)
+
+  for (const loop of summary.loops) {
+    lines.push('')
+    const params = loop.index ? `${loop.param}, ${loop.index}` : loop.param
+    lines.push(`  ${loop.array}.${loop.method}(${params})`)
+    if (loop.key) lines.push(`    key: ${loop.key}`)
+
+    for (const b of loop.bindings) {
+      const depStr = b.deps.length > 0 ? b.deps.join(', ') : '(no deps)'
+      if (b.kind === 'event') {
+        lines.push(`    ${b.elementContext} ${b.name} -> ${depStr}`)
+      } else if (b.kind === 'attribute') {
+        lines.push(`    ${b.elementContext} ${b.name} <- ${depStr}`)
+      } else {
+        lines.push(`    ${b.elementContext} <- ${depStr}`)
+      }
+    }
+
+    const locFile = loop.loc.file.split('/').pop() ?? loop.loc.file
+    lines.push(`    at ${locFile}:${loop.loc.start.line}`)
+  }
+
+  return lines.join('\n')
+}
+
 // =============================================================================
 // Analysis: Update Propagation Path (why-update)
 // =============================================================================
@@ -365,6 +939,7 @@ export function formatComponentGraph(graph: ComponentGraph): string {
       // For attribute bindings use the attr name; for others use slotId
       const id = d.type === 'attribute' ? `"${d.label}"` : `"${d.slotId}"`
       const marker = d.classification === 'fallback' ? '~ ' : '  '
+      const locSuffix = formatBindingLoc(d)
       // No tracked deps ⇒ drop the arrow entirely instead of emitting
       // a dangling `<- ` (trailing space). Fallback-wrapped attribute
       // handlers like `<Button onClick={() => setCount(0)}>` legitimately
@@ -372,12 +947,24 @@ export function formatComponentGraph(graph: ComponentGraph): string {
       // it explicitly so the reader doesn't wonder if the analyzer
       // dropped data.
       if (d.deps.length === 0) {
-        lines.push(`    ${marker}${d.type} ${id} (no tracked deps)`)
+        if (d.jsxPreview) {
+          lines.push(`    ${marker}${d.jsxPreview} (no tracked deps)${locSuffix}`)
+        } else {
+          lines.push(`    ${marker}${d.type} ${id} (no tracked deps)${locSuffix}`)
+        }
         continue
       }
-      const arrow = d.type === 'event' ? ' ->' : ' <-'
       const depStr = d.deps.join(', ')
-      lines.push(`    ${marker}${d.type} ${id}${arrow} ${depStr}`)
+      if (d.jsxPreview) {
+        if (d.type === 'event') {
+          lines.push(`    ${marker}${d.jsxPreview} -> ${depStr}${locSuffix}`)
+        } else {
+          lines.push(`    ${marker}${depStr} -> ${d.jsxPreview}${locSuffix}`)
+        }
+      } else {
+        const arrow = d.type === 'event' ? ' ->' : ' <-'
+        lines.push(`    ${marker}${d.type} ${id}${arrow} ${depStr}${locSuffix}`)
+      }
     }
   }
 
@@ -412,6 +999,12 @@ export function formatUpdatePath(path: UpdatePath): string {
   return lines.join('\n')
 }
 
+function formatBindingLoc(d: DomBinding): string {
+  if (!d.loc) return ''
+  const file = d.loc.file.split('/').pop() ?? d.loc.file
+  return ` at ${file}:${d.loc.start.line}`
+}
+
 function formatEntry(entry: UpdatePathEntry, lines: string[], indent: string): void {
   const arrow = entry.kind === 'dom' ? '->' : '<-'
   lines.push(`${indent}${arrow} ${entry.label}`)
@@ -452,6 +1045,8 @@ export function graphToJSON(graph: ComponentGraph): object {
       type: d.type,
       classification: d.classification,
       ...(d.expression !== undefined && { expression: d.expression }),
+      ...(d.loc && { loc: { file: d.loc.file, line: d.loc.start.line } }),
+      ...(d.jsxPreview && { jsxPreview: d.jsxPreview }),
     })),
   }
 }
@@ -578,6 +1173,7 @@ function collectDomBindings(
   bindings: DomBinding[],
   signalGetters: Set<string>,
   memoNames: Set<string>,
+  parentTag?: string,
 ): void {
   switch (node.type) {
     case 'element': {
@@ -604,6 +1200,10 @@ function collectDomBindings(
             classification: isReactive ? 'reactive' : 'fallback',
             expression: expr,
             wrapReason,
+            loc: attr.loc,
+            jsxPreview: attr.value.kind === 'spread'
+              ? `<${node.tag} {...${truncateExpr(expr)}}>`
+              : `<${node.tag} ${attr.name}={${truncateExpr(expr)}}>`,
           })
         }
       }
@@ -617,11 +1217,13 @@ function collectDomBindings(
           deps: extractSetterRefs(event.handler, signalGetters),
           type: 'event',
           classification: 'reactive',
+          loc: event.loc,
+          jsxPreview: `<${node.tag} ${event.originalAttr ?? `on${event.name[0].toUpperCase()}${event.name.slice(1)}`}={...}>`,
         })
       }
-      // Recurse
+      // Recurse — pass element tag as parent context for text bindings
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames)
+        collectDomBindings(child, bindings, signalGetters, memoNames, node.tag)
       }
       break
     }
@@ -631,6 +1233,9 @@ function collectDomBindings(
       const decision = decideWrapFromAstFlags(node)
       if (decision.wrap && node.slotId) {
         const deps = extractReactiveDeps(node.expr, signalGetters, memoNames)
+        const preview = parentTag
+          ? `<${parentTag}>{${truncateExpr(node.expr)}}</${parentTag}>`
+          : `{${truncateExpr(node.expr)}}`
         bindings.push({
           kind: 'dom',
           label: `text "${node.slotId}"`,
@@ -640,6 +1245,8 @@ function collectDomBindings(
           classification: decision.reason === 'proven-reactive' ? 'reactive' : 'fallback',
           expression: node.expr,
           wrapReason: decision.reason,
+          loc: node.loc,
+          jsxPreview: preview,
         })
       }
       break
@@ -657,10 +1264,12 @@ function collectDomBindings(
           classification: decision.reason === 'proven-reactive' ? 'reactive' : 'fallback',
           expression: node.condition,
           wrapReason: decision.reason,
+          loc: node.loc,
+          jsxPreview: `{${truncateExpr(node.condition)} ? ... : ...}`,
         })
       }
-      collectDomBindings(node.whenTrue, bindings, signalGetters, memoNames)
-      collectDomBindings(node.whenFalse, bindings, signalGetters, memoNames)
+      collectDomBindings(node.whenTrue, bindings, signalGetters, memoNames, parentTag)
+      collectDomBindings(node.whenFalse, bindings, signalGetters, memoNames, parentTag)
       break
     }
     case 'loop': {
@@ -694,37 +1303,20 @@ function collectDomBindings(
             classification: isReactive ? 'reactive' : 'fallback',
             expression: node.array,
             wrapReason,
+            loc: node.loc,
+            jsxPreview: `{${truncateExpr(node.array)}.${node.method === 'flatMap' ? 'flatMap' : 'map'}(${node.param} => ...)}`,
           })
         }
       }
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag)
       }
       break
     }
     case 'component': {
       // Child-component prop bindings (#942 DRY-consolidated in #952).
-      // Emitter gate in collect-elements.ts:442 is
-      // `hasPropsRef || needsEffectWrapper(expandedValue) || prop.callsReactiveGetters || prop.hasFunctionCalls`.
-      // `deps.length > 0` + `prop.value.includes('props.')` together
-      // approximate the first two branches (statically-proven reactive);
-      // the AST flags cover the fallback case.
-      //
-      // Before #944 this case fell through silently, so fallback-wrapped
-      // child props like `<Card title={formatTitle(page)} />` — the exact
-      // motivating example for #942 — never reached `why-wrap`'s output.
-      // The switch now iterates props and recurses into children, mirroring
-      // the `case 'element'` structure.
-      //
-      // Label uses `"ComponentName.propName"` so output distinguishes
-      // native-element attributes from child-component props without
-      // introducing a new `DomBinding.type` variant (keeps the existing
-      // type union stable for consumers).
       for (const prop of node.props) {
         if (prop.name === '...' || prop.name.startsWith('...')) continue
-        // Only `expression` / `template` / `spread` carry a runtime expression
-        // worth probing for reactive deps. `jsx-children` is handled via child
-        // traversal below; literal / boolean produce no reactive bindings.
         if (prop.value.kind !== 'expression' && prop.value.kind !== 'template' && prop.value.kind !== 'spread') continue
         const propValue = attrValueToString(prop.value) ?? ''
         if (!propValue) continue
@@ -742,31 +1334,40 @@ function collectDomBindings(
             classification: isReactive ? 'reactive' : 'fallback',
             expression: propValue,
             wrapReason,
+            loc: prop.loc,
+            jsxPreview: prop.value.kind === 'spread'
+              ? `<${node.name} {...${truncateExpr(propValue)}}>`
+              : `<${node.name} ${prop.name}={${truncateExpr(propValue)}}>`,
           })
         }
       }
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag)
       }
       break
     }
     case 'fragment':
     case 'provider': {
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag)
       }
       break
     }
     case 'if-statement': {
-      collectDomBindings(node.consequent, bindings, signalGetters, memoNames)
+      collectDomBindings(node.consequent, bindings, signalGetters, memoNames, parentTag)
       if (node.alternate) {
-        collectDomBindings(node.alternate, bindings, signalGetters, memoNames)
+        collectDomBindings(node.alternate, bindings, signalGetters, memoNames, parentTag)
       }
       break
     }
   }
 }
 
+function truncateExpr(expr: string, max: number = 40): string {
+  const s = expr.replace(/\s+/g, ' ').trim()
+  return s.length > max ? s.slice(0, max - 1) + '…' : s
+}
+
 /** Convert an `AttrValue` to a flat string for reactive dep extraction. */
 function attrValueToString(value: AttrValue): string | null {
   switch (value.kind) {
@@ -778,7 +1379,11 @@ function attrValueToString(value: AttrValue): string | null {
       return value.expr
     case 'template':
       return value.parts
-        .map(p => p.type === 'ternary' ? `${p.condition} ${p.whenTrue} ${p.whenFalse}` : '')
+        .map(p => {
+          if (p.type === 'ternary') return `${p.condition} ${p.whenTrue} ${p.whenFalse}`
+          if (p.type === 'lookup') return p.key
+          return ''
+        })
         .join(' ')
     case 'boolean-attr':
     case 'boolean-shorthand':