@barefootjs/jsx 0.30.0 → 0.30.3

package/dist/index.js

@@ -4542,20 +4542,115 @@ function isSimplePropExpression(expr, propNames) {
 }
 
 // src/prop-rewrite.ts
+function collectBindingNames(name, out) {
+  if (ts5.isIdentifier(name)) {
+    out.add(name.text);
+    return;
+  }
+  for (const el of name.elements) {
+    if (ts5.isBindingElement(el))
+      collectBindingNames(el.name, out);
+  }
+}
+function scopeFrameOf(n) {
+  if (ts5.isFunctionLike(n)) {
+    const frame = new Set;
+    for (const p of n.parameters)
+      collectBindingNames(p.name, frame);
+    if ((ts5.isFunctionExpression(n) || ts5.isFunctionDeclaration(n)) && n.name)
+      frame.add(n.name.text);
+    return frame.size > 0 ? frame : null;
+  }
+  if (ts5.isBlock(n)) {
+    const frame = new Set;
+    for (const st of n.statements) {
+      if (ts5.isVariableStatement(st)) {
+        for (const d of st.declarationList.declarations)
+          collectBindingNames(d.name, frame);
+      } else if (ts5.isFunctionDeclaration(st) && st.name) {
+        frame.add(st.name.text);
+      }
+    }
+    return frame.size > 0 ? frame : null;
+  }
+  if (ts5.isCatchClause(n) && n.variableDeclaration) {
+    const frame = new Set;
+    collectBindingNames(n.variableDeclaration.name, frame);
+    return frame.size > 0 ? frame : null;
+  }
+  return null;
+}
+function walkWithScope(root, visit) {
+  const scopeStack = [];
+  const isShadowed = (name) => scopeStack.some((frame) => frame.has(name));
+  function rec(n, parent) {
+    const frame = scopeFrameOf(n);
+    if (frame)
+      scopeStack.push(frame);
+    if (ts5.isIdentifier(n))
+      visit(n, parent, isShadowed(n.text));
+    ts5.forEachChild(n, (child) => rec(child, n));
+    if (frame)
+      scopeStack.pop();
+  }
+  rec(root);
+}
+function isNonValuePosition(n, parent) {
+  if (!parent)
+    return false;
+  if (ts5.isPropertyAssignment(parent) && parent.name === n)
+    return true;
+  if (ts5.isPropertyAccessExpression(parent) && parent.name === n)
+    return true;
+  if (ts5.isQualifiedName(parent) && parent.right === n)
+    return true;
+  if ((ts5.isParameter(parent) || ts5.isVariableDeclaration(parent) || ts5.isBindingElement(parent)) && parent.name === n)
+    return true;
+  if (ts5.isTypeReferenceNode(parent))
+    return true;
+  return false;
+}
 function collectAstPropRefs(node, propNames, out) {
-  function visit(n, parent) {
-    if (ts5.isIdentifier(n) && propNames.has(n.text)) {
-      if (parent && ts5.isPropertyAssignment(parent) && parent.name === n)
-        return;
-      if (parent && ts5.isShorthandPropertyAssignment(parent) && parent.name === n)
-        return;
-      if (parent && ts5.isPropertyAccessExpression(parent) && parent.name === n)
-        return;
-      out.add(n.text);
+  walkWithScope(node, (n, parent, shadowed) => {
+    if (shadowed || !propNames.has(n.text))
+      return;
+    if (parent && ts5.isShorthandPropertyAssignment(parent) && parent.name === n)
+      return;
+    if (isNonValuePosition(n, parent))
+      return;
+    out.add(n.text);
+  });
+}
+function applyScopedPropRefRewrite(text, propRefs) {
+  const prefix = "(";
+  const sf = ts5.createSourceFile("__bf_prop_rewrite.ts", `${prefix}${text}
+)`, ts5.ScriptTarget.Latest, true);
+  const parseDiagnostics = sf.parseDiagnostics;
+  if (parseDiagnostics && parseDiagnostics.length > 0)
+    return null;
+  const edits = [];
+  walkWithScope(sf, (n, parent, shadowed) => {
+    if (shadowed || !propRefs.has(n.text))
+      return;
+    if (isNonValuePosition(n, parent))
+      return;
+    const start = n.getStart(sf) - prefix.length;
+    const end = n.getEnd() - prefix.length;
+    if (start < 0 || end > text.length)
+      return;
+    if (parent && ts5.isShorthandPropertyAssignment(parent) && parent.name === n) {
+      edits.push({ start, end, replacement: `${n.text}: ${PROPS_PARAM}.${n.text}` });
+      return;
     }
-    ts5.forEachChild(n, (child) => visit(child, n));
+    edits.push({ start, end, replacement: `${PROPS_PARAM}.${n.text}` });
+  });
+  if (edits.length === 0)
+    return text;
+  let result = text;
+  for (const edit of edits.sort((a, b) => b.start - a.start)) {
+    result = result.slice(0, edit.start) + edit.replacement + result.slice(edit.end);
   }
-  visit(node);
+  return result;
 }
 function applyRegexPropRefRewrite(text, propRefs) {
   const { protect, restore } = createTemplateAwareStringProtector();
@@ -4585,7 +4680,7 @@ function rewriteBarePropRefs(text, node, propNames, extraPropRefs) {
   }
   if (foundPropRefs.size === 0)
     return;
-  return applyRegexPropRefRewrite(text, foundPropRefs);
+  return applyScopedPropRefRewrite(text, foundPropRefs) ?? applyRegexPropRefRewrite(text, foundPropRefs);
 }
 
 // src/instrumentation.ts
@@ -12663,20 +12758,20 @@ function attrValueText(value) {
   }
   return out.join(" ");
 }
-function collectBindingNames(name, out) {
+function collectBindingNames2(name, out) {
   if (ts11.isIdentifier(name)) {
     out.add(name.text);
     return;
   }
   for (const el of name.elements) {
     if (ts11.isBindingElement(el))
-      collectBindingNames(el.name, out);
+      collectBindingNames2(el.name, out);
   }
 }
 function collectPreambleDeclaredNames(stmt, out) {
   if (ts11.isVariableStatement(stmt)) {
     for (const decl of stmt.declarationList.declarations) {
-      collectBindingNames(decl.name, out);
+      collectBindingNames2(decl.name, out);
     }
   } else if (ts11.isFunctionDeclaration(stmt) && stmt.name) {
     out.add(stmt.name.text);
@@ -13069,6 +13164,8 @@ function parseTemplateLiteral(expr, ctx) {
 }
 function tryResolveTemplateSpanFromConst(expr, ctx) {
   if (ts11.isIdentifier(expr)) {
+    if (ctx.loopParams.has(expr.text))
+      return null;
     const constInfo = findLocalConst(expr.text, ctx.analyzer);
     if (!constInfo)
       return null;
@@ -13083,6 +13180,8 @@ function tryResolveTemplateSpanFromConst(expr, ctx) {
   if (ts11.isElementAccessExpression(expr)) {
     if (!ts11.isIdentifier(expr.expression))
       return null;
+    if (ctx.loopParams.has(expr.expression.text))
+      return null;
     const constInfo = findLocalConst(expr.expression.text, ctx.analyzer);
     if (!constInfo)
       return null;
@@ -18799,7 +18898,7 @@ function analyzeLazyPreamble(preamble, indexParam, primableNames) {
     if (!isConst)
       return NO2("map-callback preamble declares a mutable binding (let/var)");
     for (const decl of stmt.declarationList.declarations) {
-      collectBindingNames2(decl.name, declaredNames);
+      collectBindingNames3(decl.name, declaredNames);
       if (!decl.initializer) {
         return NO2("map-callback preamble has a declaration with no initializer");
       }
@@ -18823,7 +18922,7 @@ function analyzeLazyPreamble(preamble, indexParam, primableNames) {
     freeNames.delete(declared);
   return { lazySafe: true, facts: { declaredNames, freeNames } };
 }
-function collectBindingNames2(name, out) {
+function collectBindingNames3(name, out) {
   if (ts15.isIdentifier(name)) {
     out.add(name.text);
     return;
@@ -18831,7 +18930,7 @@ function collectBindingNames2(name, out) {
   for (const element of name.elements) {
     if (ts15.isOmittedExpression(element))
       continue;
-    collectBindingNames2(element.name, out);
+    collectBindingNames3(element.name, out);
   }
 }
 function findImpureNode(root, primableNames) {
@@ -22410,19 +22509,19 @@ function isJsxLike(expr) {
 function collectArrowParamNames(arrow) {
   const names = new Set;
   for (const p of arrow.parameters)
-    collectBindingNames3(p.name, names);
+    collectBindingNames4(p.name, names);
   return names;
 }
-function collectBindingNames3(name, out) {
+function collectBindingNames4(name, out) {
   const push = Array.isArray(out) ? (n) => out.push(n) : (n) => out.add(n);
   if (ts18.isIdentifier(name)) {
     push(name.text);
   } else if (ts18.isObjectBindingPattern(name)) {
-    name.elements.forEach((el) => collectBindingNames3(el.name, out));
+    name.elements.forEach((el) => collectBindingNames4(el.name, out));
   } else if (ts18.isArrayBindingPattern(name)) {
     name.elements.forEach((el) => {
       if (!ts18.isOmittedExpression(el))
-        collectBindingNames3(el.name, out);
+        collectBindingNames4(el.name, out);
     });
   }
 }
@@ -22431,12 +22530,12 @@ function collectFreeIdentifiers(arrow) {
   const bound = [];
   for (const p of arrow.parameters) {
     const names = [];
-    collectBindingNames3(p.name, names);
+    collectBindingNames4(p.name, names);
     bound.push(...names);
   }
   function pushBindings(name) {
     const names = [];
-    collectBindingNames3(name, names);
+    collectBindingNames4(name, names);
     bound.push(...names);
     return names;
   }
@@ -22563,7 +22662,7 @@ function collectModuleScopeNames(sourceFile) {
       names.add(stmt.name.text);
     else if (ts18.isVariableStatement(stmt)) {
       for (const decl of stmt.declarationList.declarations)
-        collectBindingNames3(decl.name, names);
+        collectBindingNames4(decl.name, names);
     } else if (ts18.isImportDeclaration(stmt) && stmt.importClause) {
       const ic = stmt.importClause;
       if (ic.name)

package/dist/prop-rewrite.d.ts

@@ -3,16 +3,29 @@
  *
  * Walks the TypeScript AST to identify destructured prop names used as
  * value references (not as object keys, property access targets, or
- * shorthand properties), then applies targeted regex replacement.
+ * shorthand properties), then splices `_p.` onto exactly those
+ * references in the emitted text via a second scope-aware walk over
+ * the text's own AST.
+ *
+ * Scope model: a name bound INSIDE the expression — a nested arrow /
+ * function parameter, a block-scoped declaration, a catch variable —
+ * refers to that binding, not the prop, for the whole binding's scope.
+ * Both the discovery walk and the rewrite walk carry the same binding
+ * stack, so `items.map((title) => title.a)` never turns into the
+ * syntactically invalid `.map((_p.title) => _p.title.a)` when `title`
+ * is also a prop. (Names bound by loop callbacks that ENCLOSE the
+ * expression are the caller's job — see the `ctx.loopParams` filter in
+ * `jsx-to-ir.ts`'s `rewriteBarePropRefs` wrapper, #2222.)
  */
 import ts from 'typescript';
 /**
  * Walk an AST node for destructured-prop value references and add
  * each found name to `out`. Same skip rules as the rewrite path —
- * object-literal keys, shorthand properties, and property-access
- * names are excluded so only true value references get picked up.
- * Exported for callers that need the raw discovery set (e.g. the
- * branch-local prop-dep cache from #1425).
+ * object-literal keys, shorthand properties, property-access names,
+ * and names shadowed by a binding inside `node` are excluded so only
+ * true value references get picked up. Exported for callers that need
+ * the raw discovery set (e.g. the branch-local prop-dep cache from
+ * #1425).
  */
 export declare function collectAstPropRefs(node: ts.Node, propNames: Set<string>, out: Set<string>): void;
 /**
@@ -20,6 +33,10 @@ export declare function collectAstPropRefs(node: ts.Node, propNames: Set<string>
  * type-stripped expression text. Idempotent under `_p.X` (negative
  * lookbehind on `_p\\.`) and skips object-literal keys via the
  * post-match `{,` + `:` shape check.
+ *
+ * Legacy fallback for text that doesn't parse as a standalone
+ * expression — it cannot see scopes, so `applyScopedPropRefRewrite`
+ * is always tried first.
  */
 export declare function applyRegexPropRefRewrite(text: string, propRefs: Iterable<string>): string;
 /**
@@ -32,8 +49,8 @@ export declare function applyRegexPropRefRewrite(text: string, propRefs: Iterabl
  * @param extraPropRefs - Optional prop names known to appear in
  *   `text` via substitution sources the AST walk can't see (e.g.
  *   `text` was produced by inlining a branch-local whose initializer
- *   references the prop). The post-match `_p\\.` lookbehind keeps
- *   the regex idempotent, so passing an over-broad set is safe.
+ *   references the prop). The rewrite only touches genuine value
+ *   references, so passing an over-broad set is safe.
  */
 export declare function rewriteBarePropRefs(text: string, node: ts.Node, propNames: Set<string>, extraPropRefs?: ReadonlySet<string>): string | undefined;
 //# sourceMappingURL=prop-rewrite.d.ts.map

package/dist/prop-rewrite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prop-rewrite.d.ts","sourceRoot":"","sources":["../src/prop-rewrite.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,EACtB,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GACf,IAAI,CAcN;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,GACzB,MAAM,CAkBR;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,EACtB,aAAa,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAClC,MAAM,GAAG,SAAS,CAWpB"}
+{"version":3,"file":"prop-rewrite.d.ts","sourceRoot":"","sources":["../src/prop-rewrite.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,MAAM,YAAY,CAAA;AAoF3B;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,EACtB,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GACf,IAAI,CAON;AA0CD;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,GACzB,MAAM,CAkBR;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,EACtB,aAAa,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAClC,MAAM,GAAG,SAAS,CAWpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/jsx",
-  "version": "0.30.0",
+  "version": "0.30.3",
   "description": "JSX compiler for BarefootJS - transforms JSX to server HTML + client JS",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,7 @@
     "directory": "packages/jsx"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.30.0"
+    "@barefootjs/shared": "0.30.3"
   },
   "peerDependencies": {
     "@barefootjs/client": ">=0.2.0",

package/src/__tests__/csr-template-scope-soundness.test.ts

@@ -94,3 +94,74 @@ export function Fire() {
     expect(clientJs).toMatch(/setFlag\s*\]\s*=\s*createSignal\(0\)/)
   })
 })
+
+/**
+ * Scope-aware prop rewrite (#2482 audit): `rewriteBarePropRefs` must
+ * not touch a name where a binding INSIDE the expression shadows the
+ * prop — a nested callback's parameter above all. The pre-fix global
+ * word-boundary regex rewrote the parameter declaration itself,
+ * emitting `.map((_p.title) => _p.title.a)`: a parse error that killed
+ * the whole client bundle.
+ */
+describe('scope-aware prop rewrite (nested callback param sharing a prop name)', () => {
+  test('memo computation keeps the callback param bare', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { createSignal, createMemo } from '@barefootjs/client'
+
+export function Titles({ title }: { title: string }) {
+  const [items, setItems] = createSignal([{ a: 'x' }])
+  const joined = createMemo(() => items().map((title) => title.a).join(','))
+  return <div><span>{joined()}</span><button onClick={() => setItems([])}>x</button></div>
+}
+`)
+    expect(clientJs).not.toMatch(/\(\s*_p\.title\s*\)\s*=>/)
+    expect(clientJs).not.toMatch(/_p\.title\.a/)
+  })
+
+  test('signal initializer keeps the callback param bare', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { createSignal } from '@barefootjs/client'
+
+export function Titles({ title }: { title: string }) {
+  const [joined, setJoined] = createSignal([{ a: 'x' }].map((title) => title.a).join(','))
+  return <div><span>{joined()}</span><button onClick={() => setJoined('')}>x</button></div>
+}
+`)
+    expect(clientJs).not.toMatch(/\(\s*_p\.title\s*\)\s*=>/)
+  })
+
+  test('mixed usage rewrites exactly the genuine outer reference', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { createSignal, createMemo } from '@barefootjs/client'
+
+export function Titles({ title }: { title: string }) {
+  const [items, setItems] = createSignal([{ a: 'x' }])
+  const label = createMemo(() => title + ':' + items().map((title) => title.a).join(','))
+  return <div><span>{label()}</span><button onClick={() => setItems([])}>x</button></div>
+}
+`)
+    const template = templateLambdaOf(clientJs, 'Titles')
+    // outer ref rewritten…
+    expect(template).toContain('_p.title +')
+    // …inner param and its references untouched
+    expect(template).toMatch(/\(\s*title\s*\)\s*=>\s*title\.a/)
+    expect(template).not.toMatch(/\(\s*_p\.title\s*\)\s*=>/)
+  })
+
+  test('a loop-shadowed record const is not folded into a template span', () => {
+    const clientJs = clientJsOf(`
+const tone = { a: 'outer-a', b: 'outer-b' }
+
+export function Tones({ items, k }: { items: { id: number; a: string; b: string }[]; k: string }) {
+  return <ul>{items.map((tone) => <li key={tone.id} data-t={\`t \${tone[k]}\`}>{tone.a}</li>)}</ul>
+}
+`)
+    const template = templateLambdaOf(clientJs, 'Tones')
+    // The span must read the row binding, not the outer record literal.
+    expect(template).toContain('tone[_p.k]')
+    expect(template).not.toContain('outer-a')
+  })
+})

package/src/jsx-to-ir.ts

@@ -6074,6 +6074,11 @@ function tryResolveTemplateSpanFromConst(
 ): IRTemplatePart[] | null {
   // ${IDENT}
   if (ts.isIdentifier(expr)) {
+    // #2222-family: inside a loop callback the name may be the loop's
+    // item/index binding shadowing a same-named const — resolving the
+    // const would bake the outer value into every row. Fall back to
+    // the bare-expression path, which sees the loop binding.
+    if (ctx.loopParams.has(expr.text)) return null
     const constInfo = findLocalConst(expr.text, ctx.analyzer)
     if (!constInfo) return null
     const ast = parseConstInitializer(constInfo)
@@ -6087,6 +6092,10 @@ function tryResolveTemplateSpanFromConst(
   // ${IDENT[KEY]}
   if (ts.isElementAccessExpression(expr)) {
     if (!ts.isIdentifier(expr.expression)) return null
+    // Same loop-shadowing guard as the ${IDENT} arm: `tone[k]` inside
+    // `items.map((tone) => …)` must read the row's `tone`, not a
+    // same-named module/component record const.
+    if (ctx.loopParams.has(expr.expression.text)) return null
     const constInfo = findLocalConst(expr.expression.text, ctx.analyzer)
     if (!constInfo) return null
     const ast = parseConstInitializer(constInfo)

package/src/prop-rewrite.ts

@@ -3,39 +3,165 @@
  *
  * Walks the TypeScript AST to identify destructured prop names used as
  * value references (not as object keys, property access targets, or
- * shorthand properties), then applies targeted regex replacement.
+ * shorthand properties), then splices `_p.` onto exactly those
+ * references in the emitted text via a second scope-aware walk over
+ * the text's own AST.
+ *
+ * Scope model: a name bound INSIDE the expression — a nested arrow /
+ * function parameter, a block-scoped declaration, a catch variable —
+ * refers to that binding, not the prop, for the whole binding's scope.
+ * Both the discovery walk and the rewrite walk carry the same binding
+ * stack, so `items.map((title) => title.a)` never turns into the
+ * syntactically invalid `.map((_p.title) => _p.title.a)` when `title`
+ * is also a prop. (Names bound by loop callbacks that ENCLOSE the
+ * expression are the caller's job — see the `ctx.loopParams` filter in
+ * `jsx-to-ir.ts`'s `rewriteBarePropRefs` wrapper, #2222.)
  */
 
 import ts from 'typescript'
 import { PROPS_PARAM } from './ir-to-client-js/utils.ts'
 import { createTemplateAwareStringProtector } from './ir-to-client-js/html-template.ts'
 
+/** Collect every name introduced by a binding name (identifier or pattern). */
+function collectBindingNames(name: ts.BindingName, out: Set<string>): void {
+  if (ts.isIdentifier(name)) {
+    out.add(name.text)
+    return
+  }
+  for (const el of name.elements) {
+    if (ts.isBindingElement(el)) collectBindingNames(el.name, out)
+  }
+}
+
+/**
+ * Names bound by `n` for its subtree, or null when `n` introduces no
+ * scope. Function-likes bind their parameters (and a function
+ * expression its own name); blocks bind their statement-level
+ * variable/function declarations; catch clauses bind their variable.
+ */
+function scopeFrameOf(n: ts.Node): Set<string> | null {
+  if (ts.isFunctionLike(n)) {
+    const frame = new Set<string>()
+    for (const p of n.parameters) collectBindingNames(p.name, frame)
+    if ((ts.isFunctionExpression(n) || ts.isFunctionDeclaration(n)) && n.name) frame.add(n.name.text)
+    return frame.size > 0 ? frame : null
+  }
+  if (ts.isBlock(n)) {
+    const frame = new Set<string>()
+    for (const st of n.statements) {
+      if (ts.isVariableStatement(st)) {
+        for (const d of st.declarationList.declarations) collectBindingNames(d.name, frame)
+      } else if (ts.isFunctionDeclaration(st) && st.name) {
+        frame.add(st.name.text)
+      }
+    }
+    return frame.size > 0 ? frame : null
+  }
+  if (ts.isCatchClause(n) && n.variableDeclaration) {
+    const frame = new Set<string>()
+    collectBindingNames(n.variableDeclaration.name, frame)
+    return frame.size > 0 ? frame : null
+  }
+  return null
+}
+
+/**
+ * Depth-first walk that maintains the binding stack described above and
+ * reports every identifier along with whether a binding within `root`
+ * currently shadows it.
+ */
+function walkWithScope(
+  root: ts.Node,
+  visit: (ident: ts.Identifier, parent: ts.Node | undefined, shadowed: boolean) => void,
+): void {
+  const scopeStack: Set<string>[] = []
+  const isShadowed = (name: string) => scopeStack.some(frame => frame.has(name))
+  function rec(n: ts.Node, parent?: ts.Node) {
+    const frame = scopeFrameOf(n)
+    if (frame) scopeStack.push(frame)
+    if (ts.isIdentifier(n)) visit(n, parent, isShadowed(n.text))
+    ts.forEachChild(n, child => rec(child, n))
+    if (frame) scopeStack.pop()
+  }
+  rec(root)
+}
+
+/**
+ * True when `n` sits in a non-value position where a prop rewrite must
+ * never apply: an object-literal key, a member-access name, a binding
+ * position (parameter / variable / binding-element name), or a type
+ * reference.
+ */
+function isNonValuePosition(n: ts.Identifier, parent: ts.Node | undefined): boolean {
+  if (!parent) return false
+  if (ts.isPropertyAssignment(parent) && parent.name === n) return true
+  if (ts.isPropertyAccessExpression(parent) && parent.name === n) return true
+  if (ts.isQualifiedName(parent) && parent.right === n) return true
+  if ((ts.isParameter(parent) || ts.isVariableDeclaration(parent) || ts.isBindingElement(parent)) && parent.name === n) return true
+  if (ts.isTypeReferenceNode(parent)) return true
+  return false
+}
+
 /**
  * Walk an AST node for destructured-prop value references and add
  * each found name to `out`. Same skip rules as the rewrite path —
- * object-literal keys, shorthand properties, and property-access
- * names are excluded so only true value references get picked up.
- * Exported for callers that need the raw discovery set (e.g. the
- * branch-local prop-dep cache from #1425).
+ * object-literal keys, shorthand properties, property-access names,
+ * and names shadowed by a binding inside `node` are excluded so only
+ * true value references get picked up. Exported for callers that need
+ * the raw discovery set (e.g. the branch-local prop-dep cache from
+ * #1425).
  */
 export function collectAstPropRefs(
   node: ts.Node,
   propNames: Set<string>,
   out: Set<string>,
 ): void {
-  function visit(n: ts.Node, parent?: ts.Node) {
-    if (ts.isIdentifier(n) && propNames.has(n.text)) {
-      // Skip: object literal key  { org: ... }
-      if (parent && ts.isPropertyAssignment(parent) && parent.name === n) return
-      // Skip: shorthand property  { org }
-      if (parent && ts.isShorthandPropertyAssignment(parent) && parent.name === n) return
-      // Skip: property access name  foo.org
-      if (parent && ts.isPropertyAccessExpression(parent) && parent.name === n) return
-      out.add(n.text)
+  walkWithScope(node, (n, parent, shadowed) => {
+    if (shadowed || !propNames.has(n.text)) return
+    if (parent && ts.isShorthandPropertyAssignment(parent) && parent.name === n) return
+    if (isNonValuePosition(n, parent)) return
+    out.add(n.text)
+  })
+}
+
+/**
+ * Scope-aware rewrite: parse `text` as an expression, walk it with the
+ * binding stack, and splice `${PROPS_PARAM}.` onto exactly the
+ * identifier references that are (a) in `propRefs` and (b) not
+ * shadowed by a binding inside the text. Shorthand properties expand
+ * (`{ org }` → `{ org: _p.org }`) so the result stays syntactically
+ * valid.
+ *
+ * Returns null when `text` does not parse cleanly as an expression —
+ * the caller falls back to the legacy regex rewrite.
+ */
+function applyScopedPropRefRewrite(text: string, propRefs: Set<string>): string | null {
+  // Wrap in parens so object literals and arrows parse as expressions.
+  const prefix = '('
+  const sf = ts.createSourceFile('__bf_prop_rewrite.ts', `${prefix}${text}\n)`, ts.ScriptTarget.Latest, true)
+  const parseDiagnostics = (sf as unknown as { parseDiagnostics?: unknown[] }).parseDiagnostics
+  if (parseDiagnostics && parseDiagnostics.length > 0) return null
+
+  const edits: Array<{ start: number; end: number; replacement: string }> = []
+  walkWithScope(sf, (n, parent, shadowed) => {
+    if (shadowed || !propRefs.has(n.text)) return
+    if (isNonValuePosition(n, parent)) return
+    const start = n.getStart(sf) - prefix.length
+    const end = n.getEnd() - prefix.length
+    if (start < 0 || end > text.length) return
+    if (parent && ts.isShorthandPropertyAssignment(parent) && parent.name === n) {
+      edits.push({ start, end, replacement: `${n.text}: ${PROPS_PARAM}.${n.text}` })
+      return
     }
-    ts.forEachChild(n, child => visit(child, n))
+    edits.push({ start, end, replacement: `${PROPS_PARAM}.${n.text}` })
+  })
+
+  if (edits.length === 0) return text
+  let result = text
+  for (const edit of edits.sort((a, b) => b.start - a.start)) {
+    result = result.slice(0, edit.start) + edit.replacement + result.slice(edit.end)
   }
-  visit(node)
+  return result
 }
 
 /**
@@ -43,6 +169,10 @@ export function collectAstPropRefs(
  * type-stripped expression text. Idempotent under `_p.X` (negative
  * lookbehind on `_p\\.`) and skips object-literal keys via the
  * post-match `{,` + `:` shape check.
+ *
+ * Legacy fallback for text that doesn't parse as a standalone
+ * expression — it cannot see scopes, so `applyScopedPropRefRewrite`
+ * is always tried first.
  */
 export function applyRegexPropRefRewrite(
   text: string,
@@ -77,8 +207,8 @@ export function applyRegexPropRefRewrite(
  * @param extraPropRefs - Optional prop names known to appear in
  *   `text` via substitution sources the AST walk can't see (e.g.
  *   `text` was produced by inlining a branch-local whose initializer
- *   references the prop). The post-match `_p\\.` lookbehind keeps
- *   the regex idempotent, so passing an over-broad set is safe.
+ *   references the prop). The rewrite only touches genuine value
+ *   references, so passing an over-broad set is safe.
  */
 export function rewriteBarePropRefs(
   text: string,
@@ -95,5 +225,5 @@ export function rewriteBarePropRefs(
     }
   }
   if (foundPropRefs.size === 0) return undefined
-  return applyRegexPropRefRewrite(text, foundPropRefs)
+  return applyScopedPropRefRewrite(text, foundPropRefs) ?? applyRegexPropRefRewrite(text, foundPropRefs)
 }