From 8206c8c2719ed7ee9be058099d9cdb532a2bd3d6 Mon Sep 17 00:00:00 2001
From: Colby Mchenry <me@colbymchenry.com>
Date: Wed, 14 Oct 2026 23:22:28 +0000
Subject: [PATCH 1/5] fix(react): a JSX tag imported from the project renders
 what its module exports (#2563)

The JSX render pass matched a tag by name and used the file's imports only
to break ties, so an index that forwards another module's component
declared no candidate and the tag took a namesake elsewhere: outline's
Sidebar/index.ts is `import Sidebar from "./App"; export default Sidebar`,
and <Sidebar> rendered Aside.tsx's styled Sidebar, not the AppSidebar that
App.tsx exports as observer(AppSidebar).

A tag imported from a module of the project now renders what that module
exports under the imported name, read by exportedComponent, the reader
lazy routes use: through an index or barrel, past a wrapper call. Two rules
join that reader, for routes too: a const holding another binding is that
binding (`const Avatar = AvatarWithHoverCard; export { Avatar }`; a let may
be reassigned, so it stays), and a memo wrapper's bodyless component node is
the component it wraps (`const MemoizedBlurhash = memo(Blurhash)`). A module
whose export is no component node (`export default () => ...`) links nothing
rather than a namesake. Sync records every file a tag's import is read
through as a synthesis input, so rewiring only the index redraws the tag.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                                 |   1 +
 __tests__/jsx-child-disambiguation.test.ts   | 206 +++++++++++++++++++
 __tests__/react-router-lazy-barrel.test.ts   |  20 +-
 __tests__/sync-jsx-import-forwarding.test.ts | 176 ++++++++++++++++
 src/resolution/callback-synthesizer.ts       |  97 ++++++++-
 src/resolution/frameworks/react.ts           |  71 ++++++-
 6 files changed, 552 insertions(+), 19 deletions(-)
 create mode 100644 __tests__/sync-jsx-import-forwarding.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9d00b7b23b..49c38c124f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -151,6 +151,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - In React and Vue, a tag for a component the file imports from a package, like `<Button>` from antd, `<Typography>` from `@mui/material/Typography`, `<Link>` from react-router-dom or `<Card>` from ant-design-vue, no longer links to a component, function or class in your repository that only shares its name. Before, the tag linked to whatever the repository had by that name, so `codegraph_explore`, callers and impact followed renders that never happen: in SigNoz, antd's `<Button>` tags showed up as callers of a styled link on its 404 page, and in Material UI dashboards like mantis and berry, `<Typography>` and `<Button>` tags showed up as callers of the theme's style overrides. A package here is one that a `package.json` above the file lists and that no file in the repository answers to. A tag imported through a path alias like `components/Modal`, from a workspace package of the repository, or under a name no `package.json` lists still links as before. Re-index React and Vue projects after upgrading.
 - In React with TypeScript, a component that renders a generic component and passes it type arguments, like outline's `<PaginatedList<Document> items={…} />` or excalidraw's `<DropdownMenuItemContentRadio<"contain" | "overlap"> …>`, now links to the component it renders. Before, a tag followed by type arguments was skipped, so the generic component looked unused by the screens that render it, and `codegraph_explore`'s call paths, callers and impact stopped short of it. Re-index React projects after upgrading.
 - In React, a component that a file declares itself as a value is now what that file's JSX renders, whatever else in the repository shares its name. A lazily loaded page, like `const RegisterPage = Loadable(lazy(() => import('./pages/Register')))`, a `dynamic(() => import(…))` component or one loaded only in development (`IS_DEV ? lazy(…) : null`), links to the component its module exports, including the one its loader picks and one an `export default observer(Login)` wraps; a wrapped component like `const Settings = observer(function Settings() {…})`, `React.memo(Rows, areEqual)` or `forwardRef(ComboboxInner) as {…}` links to the function it wraps; and an alias like `const DialogPortal = DialogPrimitive.Portal` links to its own declaration. Before, `<RegisterPage />` was linked to any lone component of that name elsewhere, often in another app of the same repository, so `codegraph_explore`, callers and impact followed it into the wrong app while the page it really renders had no caller. React Router layouts declared this way follow the same rule, and a TSX type named like a value the file declares now stays in that file. Re-index React projects after upgrading.
+- In React, a JSX tag imported from one of your own modules now links to the component that module exports under that name, read the way a lazily loaded page's module already is. That includes going through an `index` file or barrel that passes the component on, like outline's `Sidebar/index.ts` with `import Sidebar from './App'; export default Sidebar` or its `Avatar/index.ts` with `const Avatar = AvatarWithHoverCard`, and past a wrapper such as `export default observer(AppSidebar)`, `React.memo(StaticCanvas, areEqual)` or mastodon's `const MemoizedBlurhash = memo(Blurhash)`. Before, a tag was matched by its name and the import only broke ties, so outline's `<Sidebar>` linked to an unrelated styled `Sidebar` in a sibling file, a default import under another name linked to whatever other component its module exported, and an import through a barrel could land on another app's component of the same name. A tag whose module exports an unnamed component, like `export default () => …`, now links to nothing instead of to a namesake elsewhere. A lazily loaded React Router page exported as such a value or wrapper links to the component it holds too, the one with the markup. `codegraph sync` and the file watcher redraw these links when only the file that passes the component on changes. Re-index React projects after upgrading.
 
 ## [1.6.2] - 2026-10-03
 
diff --git a/__tests__/jsx-child-disambiguation.test.ts b/__tests__/jsx-child-disambiguation.test.ts
index c4a633a4ba..3a718b9a16 100644
--- a/__tests__/jsx-child-disambiguation.test.ts
+++ b/__tests__/jsx-child-disambiguation.test.ts
@@ -796,3 +796,209 @@ export function ProfileForm({ user }: { user: User }) {
     expect(referenced).toEqual(['web/src/forms/profile-form.tsx']);
   });
 });
+
+/**
+ * A tag imported from a module of the project renders what that module exports
+ * under the imported name, read the way a lazy route's module is: through an
+ * `index` or a barrel that hands it on, and past a wrapper call around it. The
+ * name only broke ties among the candidates in the module the import resolves
+ * to, so an `index` that forwards its default export declared none of them,
+ * and the name picked among the rest: outline's `<Sidebar>` rendered
+ * `Aside.tsx`'s styled `Sidebar`, not the `AppSidebar` its index forwards.
+ */
+describe('JSX child: a tag imported from a module of the project', () => {
+  let dir: string;
+  let cg: any;
+
+  beforeEach(() => {
+    dir = fs.mkdtempSync(path.join(os.tmpdir(), 'jsx-project-import-'));
+    fs.writeFileSync(path.join(dir, 'package.json'), '{"dependencies":{"react":"^18.0.0","mobx-react":"^9.0.0"}}');
+  });
+
+  afterEach(() => {
+    cg?.close?.();
+    fs.rmSync(dir, { recursive: true, force: true });
+  });
+
+  const write = (rel: string, body: string) => {
+    const p = path.join(dir, rel);
+    fs.mkdirSync(path.dirname(p), { recursive: true });
+    fs.writeFileSync(p, body);
+  };
+
+  async function index(): Promise<void> {
+    cg = await CodeGraph.init(dir, { silent: true });
+    await cg.indexAll();
+  }
+
+  /** `name file:line` of each node a jsx-render edge out of `parent` points at. */
+  const renders = (parent: string): string[] =>
+    cg.db.db
+      .prepare(
+        `SELECT t.name || ' ' || t.file_path || ':' || t.start_line AS r FROM edges e
+           JOIN nodes s ON s.id = e.source
+           JOIN nodes t ON t.id = e.target
+          WHERE s.name = ? AND json_extract(e.metadata, '$.synthesizedBy') = 'jsx-render'
+          ORDER BY r`
+      )
+      .all(parent)
+      .map((row: any) => row.r);
+
+  it('follows an index that forwards another module’s default export', async () => {
+    // outline: `Sidebar/index.ts` is `import Sidebar from "./App"; export
+    // default Sidebar;`, and `App.tsx` exports `observer(AppSidebar)`.
+    write('app/components/Sidebar/Aside.tsx', 'export function Sidebar() {\n  return <aside />;\n}\n');
+    write(
+      'app/components/Sidebar/App.tsx',
+      "import { observer } from 'mobx-react';\n\nfunction AppSidebar() {\n  return <nav />;\n}\n\nexport default observer(AppSidebar);\n"
+    );
+    write('app/components/Sidebar/index.ts', "import Sidebar from './App';\n\nexport default Sidebar;\n");
+    write(
+      'app/components/AuthenticatedLayout.tsx',
+      "import Sidebar from './Sidebar';\n\nexport function AuthenticatedLayout() {\n  return <main><Sidebar /></main>;\n}\n"
+    );
+    await index();
+    expect(renders('AuthenticatedLayout')).toEqual(['AppSidebar app/components/Sidebar/App.tsx:3']);
+  });
+
+  it('follows an index that exports an import again, through `React.memo(X, areEqual)`', async () => {
+    // excalidraw: `canvases/index.tsx` is `import StaticCanvas from
+    // "./StaticCanvas"; export { StaticCanvas };`.
+    write('a-decoy/StaticCanvas.tsx', 'export function StaticCanvas() {\n  return <canvas id="decoy" />;\n}\n');
+    write(
+      'components/canvases/StaticCanvas.tsx',
+      "import React from 'react';\n\nconst StaticCanvas = () => {\n  return <canvas />;\n};\n\nconst areEqual = () => true;\n\nexport default React.memo(StaticCanvas, areEqual);\n"
+    );
+    write('components/canvases/index.tsx', "import StaticCanvas from './StaticCanvas';\n\nexport { StaticCanvas };\n");
+    write(
+      'components/App.tsx',
+      "import { StaticCanvas } from './canvases';\n\nexport function App() {\n  return <div><StaticCanvas /></div>;\n}\n"
+    );
+    await index();
+    expect(renders('App')).toEqual(['StaticCanvas components/canvases/StaticCanvas.tsx:3']);
+  });
+
+  it('renders a default export imported under another name, not the module’s other component', async () => {
+    // outline's `Button.tsx` exports a styled `Inner` beside `export default
+    // React.forwardRef<…>(Button)`.
+    write(
+      'components/Button.tsx',
+      `import React from 'react';
+
+export const Inner = React.forwardRef<HTMLSpanElement, object>((props, ref) => <span ref={ref} {...props} />);
+
+function Button(props: object, ref: React.Ref<HTMLButtonElement>) {
+  return <button ref={ref}><Inner /></button>;
+}
+
+export default React.forwardRef<HTMLButtonElement, object>(Button);
+`
+    );
+    write(
+      'components/Toolbar.tsx',
+      "import ToolbarButton from './Button';\n\nexport function Toolbar() {\n  return <div><ToolbarButton /></div>;\n}\n"
+    );
+    await index();
+    expect(renders('Toolbar')).toEqual(['Button components/Button.tsx:5']);
+  });
+
+  it('renders its own app’s component through a barrel when every app has one of that name', async () => {
+    // bulletproof-react: each app imports `Button` from its own
+    // `@/components/ui/button`, a barrel of `export * from './button'`.
+    for (const app of ['nextjs-app', 'react-vite']) {
+      write(`apps/${app}/tsconfig.json`, JSON.stringify({ compilerOptions: { baseUrl: '.', paths: { '@/*': ['./src/*'] } } }));
+      write(`apps/${app}/src/components/ui/button/button.tsx`, 'export function Button() {\n  return <button />;\n}\n');
+      write(`apps/${app}/src/components/ui/button/index.ts`, "export * from './button';\n");
+    }
+    write(
+      'apps/react-vite/src/features/auth/login-form.tsx',
+      "import { Button } from '@/components/ui/button';\n\nexport function LoginForm() {\n  return <form><Button /></form>;\n}\n"
+    );
+    await index();
+    expect(renders('LoginForm')).toEqual(['Button apps/react-vite/src/components/ui/button/button.tsx:1']);
+  });
+
+  it('renders the component a memoized export wraps, not the wrapper', async () => {
+    // mastodon's `blurhash.tsx`: `const MemoizedBlurhash = memo(Blurhash);
+    // export { MemoizedBlurhash as Blurhash };`. The wrapper's node has no body
+    // to render from; `Blurhash`'s has the markup.
+    write(
+      'app/javascript/mastodon/components/blurhash.tsx',
+      "import { memo } from 'react';\n\nfunction Blurhash({ hash }: { hash: string }) {\n  return <canvas data-hash={hash} />;\n}\n\nconst MemoizedBlurhash = memo(Blurhash);\n\nexport { MemoizedBlurhash as Blurhash };\n"
+    );
+    write(
+      'app/javascript/mastodon/components/media_item.tsx',
+      "import { Blurhash } from './blurhash';\n\nexport function MediaItem() {\n  return <div><Blurhash hash=\"x\" /></div>;\n}\n"
+    );
+    await index();
+    expect(renders('MediaItem')).toEqual(['Blurhash app/javascript/mastodon/components/blurhash.tsx:3']);
+  });
+
+  it('follows a value an index holds another module’s component in', async () => {
+    // outline's `Avatar/index.ts`: `const Avatar = AvatarWithHoverCard; export
+    // { Avatar }`. The value has no body; the hover card renders the avatar.
+    write(
+      'app/components/Avatar/Avatar.tsx',
+      "import { observer } from 'mobx-react';\n\nfunction Avatar() {\n  return <img />;\n}\n\nexport default observer(Avatar);\n"
+    );
+    write(
+      'app/components/Avatar/AvatarWithHoverCard.tsx',
+      "import { observer } from 'mobx-react';\nimport Avatar from './Avatar';\n\nfunction AvatarWithHoverCard() {\n  return <div><Avatar /></div>;\n}\n\nexport default observer(AvatarWithHoverCard);\n"
+    );
+    write(
+      'app/components/Avatar/index.ts',
+      "import AvatarWithHoverCard from './AvatarWithHoverCard';\n\nconst Avatar = AvatarWithHoverCard;\n\nexport { Avatar };\n"
+    );
+    write(
+      'app/components/CommentForm.tsx',
+      "import { Avatar } from '~/components/Avatar';\n\nexport function CommentForm() {\n  return <form><Avatar /></form>;\n}\n"
+    );
+    write('tsconfig.json', JSON.stringify({ compilerOptions: { baseUrl: '.', paths: { '~/*': ['./app/*'] } } }));
+    await index();
+    expect(renders('CommentForm')).toEqual(['AvatarWithHoverCard app/components/Avatar/AvatarWithHoverCard.tsx:4']);
+    expect(renders('AvatarWithHoverCard')).toEqual(['Avatar app/components/Avatar/Avatar.tsx:3']);
+  });
+
+  it('keeps a `let` the module exports, which may hold another component by then', async () => {
+    write('components/Primary.tsx', 'export function Primary() {\n  return <b />;\n}\n');
+    write('components/Secondary.tsx', 'export function Secondary() {\n  return <i />;\n}\n');
+    write(
+      'components/Button.ts',
+      "import { Primary } from './Primary';\nimport { Secondary } from './Secondary';\n\nlet Button = Primary;\nif (globalThis.compact) Button = Secondary;\n\nexport { Button };\n"
+    );
+    write(
+      'components/Toolbar.tsx',
+      "import { Button } from './Button';\n\nexport function Toolbar() {\n  return <div><Button /></div>;\n}\n"
+    );
+    await index();
+    expect(renders('Toolbar')).toEqual(['Button components/Button.ts:4']);
+  });
+
+  it('renders no namesake elsewhere for a module whose default export has no name', async () => {
+    // outline's email `Footer.tsx`: `export const Link = …` above `export
+    // default ({ … }) => …`. The default export is no node, and neither the
+    // module's `Link` nor the app's own `Footer` is it.
+    write('app/components/Footer.tsx', 'export function Footer() {\n  return <div className="app-footer" />;\n}\n');
+    write(
+      'emails/components/Footer.tsx',
+      "export const Link = ({ href }: { href: string }) => <a href={href} />;\n\nexport default ({ url }: { url: string }) => (\n  <footer><Link href={url} /></footer>\n);\n"
+    );
+    write(
+      'emails/Welcome.tsx',
+      "import Footer from './components/Footer';\n\nexport function Welcome() {\n  return <div><Footer url=\"/\" /></div>;\n}\n"
+    );
+    await index();
+    expect(renders('Welcome')).toEqual([]);
+  });
+
+  it('still renders the module’s own namesake when its export can’t be read (CommonJS)', async () => {
+    write('a-decoy/Card.jsx', 'export function Card() {\n  return <div id="decoy" />;\n}\n');
+    write('components/Card.js', "const React = require('react');\n\nfunction Card() {\n  return React.createElement('div');\n}\n\nmodule.exports = Card;\n");
+    write(
+      'components/Deck.jsx',
+      "import Card from './Card';\n\nexport function Deck() {\n  return <section><Card /></section>;\n}\n"
+    );
+    await index();
+    expect(renders('Deck')).toEqual(['Card components/Card.js:3']);
+  });
+});
diff --git a/__tests__/react-router-lazy-barrel.test.ts b/__tests__/react-router-lazy-barrel.test.ts
index 9bc5d57057..055276b1c4 100644
--- a/__tests__/react-router-lazy-barrel.test.ts
+++ b/__tests__/react-router-lazy-barrel.test.ts
@@ -36,6 +36,7 @@ export const router = createBrowserRouter([
   { path: '/fleet', lazy: () => import('@/fleet/home_page') },
   { path: '/login', lazy: () => import('@/auth/login_page') },
   { path: '/graph', lazy: () => import('@/chronicle/graph_view') },
+  { path: '/media', lazy: () => import('@/media/media_page') },
   { path: '/settings', element: <Settings /> },
   { path: '/redirect', lazy: () => import('@/core/redirection_loader') },
   { path: '/clash', lazy: () => import('@/clash') },
@@ -89,6 +90,17 @@ export const Component = BuilderListPage;
 }
 
 export { GraphView as Component };
+`,
+    // A memoized export, whose wrapper has no body of its own to render from.
+    'src/media/media_page.tsx': `import { memo } from 'react';
+
+function MediaPage() {
+  return null;
+}
+
+const MemoizedMediaPage = memo(MediaPage);
+
+export { MemoizedMediaPage as Component };
 `,
     // `React.lazy` reads the default export, through a barrel too.
     'src/settings/index.ts': `export { default } from './settings_page';
@@ -159,7 +171,8 @@ describe('a lazy route module that is a barrel', () => {
   });
 
   it('follows a barrel that forwards another barrel', () => {
-    expect(renders('/builders')).toEqual(['Component@src/builds/pages/builder_list_page/builder_list_page.tsx']);
+    // `export const Component = BuilderListPage` holds the page: the route renders it.
+    expect(renders('/builders')).toEqual(['BuilderListPage@src/builds/pages/builder_list_page/builder_list_page.tsx']);
   });
 
   it('renders inside the layout a barrel forwards', () => {
@@ -175,6 +188,11 @@ describe('a lazy route module that is a barrel', () => {
     expect(renders('/graph')).toEqual(['GraphView@src/chronicle/graph_view.tsx']);
   });
 
+  it('renders the component a memoized export wraps, not the wrapper', () => {
+    // mastodon's `blurhash.tsx` exports `memo(Blurhash)` this way.
+    expect(renders('/media')).toEqual(['MediaPage@src/media/media_page.tsx']);
+  });
+
   it('follows the barrel a React.lazy value loads', () => {
     expect(renders('/settings')).toEqual(['SettingsPage@src/settings/settings_page.tsx']);
   });
diff --git a/__tests__/sync-jsx-import-forwarding.test.ts b/__tests__/sync-jsx-import-forwarding.test.ts
new file mode 100644
index 0000000000..609a8ca382
--- /dev/null
+++ b/__tests__/sync-jsx-import-forwarding.test.ts
@@ -0,0 +1,176 @@
+/**
+ * A sync redraws a JSX tag when a module its import is read through changes.
+ *
+ * A tag imported from a module of the project renders what that module
+ * exports under the name, through an `index` that forwards it — outline's
+ * `Sidebar/index.ts` is `import Sidebar from './App'; export default
+ * Sidebar` — and past a wrapper around it (`export default
+ * observer(AppSidebar)`). So the tag's edge depends on files that hold no
+ * markup and no synthesized edge of their own: rewiring the index, or the
+ * default export behind it, must redraw the tag, as a fresh index would draw
+ * it, though the file that renders the tag is untouched.
+ *
+ * Every case compares the synced graph with a fresh index of the same files in
+ * a folder of its own: indexing again over an existing index skips its
+ * unchanged files, so it is no stand-in for one.
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import CodeGraph from '../src/index';
+
+type Files = Record<string, string | null>;
+
+const pkg = JSON.stringify({ name: 'app', dependencies: { react: '^18', 'mobx-react': '^9' } });
+
+/** Two pages that render `<Sidebar>` through the same forwarding index. */
+const BASE: Files = {
+  'package.json': pkg,
+  'src/components/Sidebar/Aside.tsx': 'export function Sidebar() {\n  return <aside />;\n}\n',
+  'src/components/Sidebar/App.tsx':
+    "import { observer } from 'mobx-react';\n\nfunction AppSidebar() {\n  return <nav />;\n}\n\nexport default observer(AppSidebar);\n",
+  'src/components/Sidebar/Shared.tsx':
+    "import { observer } from 'mobx-react';\n\nfunction SharedSidebar() {\n  return <nav />;\n}\n\nexport default observer(SharedSidebar);\n",
+  'src/components/Sidebar/index.ts': "import Sidebar from './App';\n\nexport default Sidebar;\n",
+  'src/scenes/Home.tsx': "import Sidebar from '../components/Sidebar';\n\nexport function Home() {\n  return <main><Sidebar /></main>;\n}\n",
+  'src/scenes/Settings.tsx':
+    "import Sidebar from '../components/Sidebar';\n\nexport function Settings() {\n  return <main><Sidebar /></main>;\n}\n",
+};
+
+let root: string | undefined;
+let cg: CodeGraph | undefined;
+
+afterEach(() => {
+  cg?.close();
+  cg = undefined;
+  if (root) fs.rmSync(root, { recursive: true, force: true });
+  root = undefined;
+});
+
+function write(dir: string, files: Files): void {
+  for (const [file, text] of Object.entries(files)) {
+    const full = path.join(dir, file);
+    if (text === null) {
+      fs.rmSync(full, { force: true });
+      continue;
+    }
+    fs.mkdirSync(path.dirname(full), { recursive: true });
+    fs.writeFileSync(full, text);
+  }
+}
+
+/** Every node and edge by natural key, edge metadata included, so two indexes of the same files compare directly. */
+function graphOf(graph: CodeGraph): string[] {
+  const keys = new Map(
+    graph.getFiles()
+      .flatMap((file) => graph.getNodesInFile(file.path))
+      .map((n) => [n.id, `${n.kind} ${n.filePath}:${n.qualifiedName}:${n.startLine}`] as const)
+  );
+  const edges = graph.getOutgoingEdgesFrom([...keys.keys()]).map((e) =>
+    `${keys.get(e.source)} -${e.kind}-> ${keys.get(e.target) ?? e.target} ${JSON.stringify(e.metadata ?? null)} @${e.line ?? ''}:${e.column ?? ''}`);
+  return [...[...keys.values()].map((k) => `node ${k}`), ...edges].sort();
+}
+
+/** `<parent> -> <child file>::<child>` for every JSX render edge. */
+function renders(graph: CodeGraph): string[] {
+  const out: string[] = [];
+  for (const file of graph.getFiles()) {
+    for (const node of graph.getNodesInFile(file.path)) {
+      for (const e of graph.getOutgoingEdges(node.id)) {
+        if (e.metadata?.synthesizedBy !== 'jsx-render') continue;
+        const child = graph.getNode(e.target);
+        out.push(`${node.name} -> ${child?.filePath}::${child?.name}`);
+      }
+    }
+  }
+  return out.sort();
+}
+
+/** The graph of a fresh index of `files`, in a folder of its own. */
+async function freshGraph(files: Files): Promise<string[]> {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'cg-jsx-forward-fresh-'));
+  try {
+    write(dir, Object.fromEntries(Object.entries(files).filter(([, text]) => text !== null)));
+    const fresh = await CodeGraph.init(dir, { index: true });
+    try {
+      return graphOf(fresh);
+    } finally {
+      fresh.close();
+    }
+  } finally {
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+/**
+ * Index `initial`, then write each step and sync after it — with `scoped`, a
+ * sync of only the step's files, as the file watcher runs it. Returns the
+ * final files.
+ */
+async function indexThenSync(opts: { scoped: boolean }, initial: Files, ...steps: Files[]): Promise<Files> {
+  root = fs.mkdtempSync(path.join(os.tmpdir(), 'cg-jsx-forward-'));
+  write(root, initial);
+  cg = await CodeGraph.init(root, { index: true });
+  const files = { ...initial };
+  for (const step of steps) {
+    write(root, step);
+    Object.assign(files, step);
+    await cg.sync(opts.scoped ? { paths: Object.keys(step) } : {});
+  }
+  return files;
+}
+
+describe('sync redraws a tag imported through a module that forwards it', () => {
+  it('renders the forwarded component on a fresh index', async () => {
+    await indexThenSync({ scoped: false }, BASE);
+    expect(renders(cg!)).toEqual([
+      'Home -> src/components/Sidebar/App.tsx::AppSidebar',
+      'Settings -> src/components/Sidebar/App.tsx::AppSidebar',
+    ]);
+  }, 60_000);
+
+  it.each([false, true])('when only the index changes which module it forwards (scoped=%s)', async (scoped) => {
+    const files = await indexThenSync(
+      { scoped },
+      BASE,
+      // Neither page changes, and the index has no markup of its own.
+      { 'src/components/Sidebar/index.ts': "import Sidebar from './Shared';\n\nexport default Sidebar;\n" }
+    );
+    expect(renders(cg!)).toEqual([
+      'Home -> src/components/Sidebar/Shared.tsx::SharedSidebar',
+      'Settings -> src/components/Sidebar/Shared.tsx::SharedSidebar',
+    ]);
+    expect(graphOf(cg!)).toEqual(await freshGraph(files));
+  }, 60_000);
+
+  it('when the index starts holding the other module’s component in a value', async () => {
+    const files = await indexThenSync(
+      { scoped: true },
+      BASE,
+      // outline's `Avatar/index.ts` shape: `const Avatar = AvatarWithHoverCard; export { Avatar }`.
+      { 'src/components/Sidebar/index.ts': "import Shared from './Shared';\n\nconst Sidebar = Shared;\n\nexport default Sidebar;\n" }
+    );
+    expect(renders(cg!)).toEqual([
+      'Home -> src/components/Sidebar/Shared.tsx::SharedSidebar',
+      'Settings -> src/components/Sidebar/Shared.tsx::SharedSidebar',
+    ]);
+    expect(graphOf(cg!)).toEqual(await freshGraph(files));
+  }, 60_000);
+
+  it('when the module behind the index wraps another component', async () => {
+    const files = await indexThenSync(
+      { scoped: false },
+      BASE,
+      {
+        'src/components/Sidebar/App.tsx':
+          "import { observer } from 'mobx-react';\n\nfunction AppSidebar() {\n  return <nav />;\n}\n\nfunction CompactSidebar() {\n  return <nav />;\n}\n\nexport default observer(CompactSidebar);\n",
+      }
+    );
+    expect(renders(cg!)).toEqual([
+      'Home -> src/components/Sidebar/App.tsx::CompactSidebar',
+      'Settings -> src/components/Sidebar/App.tsx::CompactSidebar',
+    ]);
+    expect(graphOf(cg!)).toEqual(await freshGraph(files));
+  }, 60_000);
+});
diff --git a/src/resolution/callback-synthesizer.ts b/src/resolution/callback-synthesizer.ts
index 0d46532f65..9f2818c7d2 100644
--- a/src/resolution/callback-synthesizer.ts
+++ b/src/resolution/callback-synthesizer.ts
@@ -40,7 +40,7 @@ import { crossTierEdges, hasCrossTierPattern, hasTestRequestPattern, testRequest
 import { enclosingFn, makeLineAt } from './synth-utils';
 import { resolveImportPath } from './import-resolver';
 import { crossesCodeBoundary, jsCodeBindsName } from './name-matcher';
-import { declaredComponent, lazyValueModules } from './frameworks/react';
+import { declaredComponent, exportedComponent, lazyValueModules } from './frameworks/react';
 
 const REGISTRAR_NAME = /^(on[A-Z]\w*|subscribe|addListener|addEventListener|register|watch|listen|addCallback)$/;
 const DISPATCHER_NAME = /(emit|trigger|notify|dispatch|fire|publish|flush)/i;
@@ -1707,6 +1707,9 @@ const JSX_CHILD_KINDS = new Set<NodeKind>(['component', 'function', 'class']);
  */
 const JSX_CHILD_LANGUAGES = [...JS_FAMILY, 'vue', 'svelte'];
 
+/** A file whose tags the JSX pass reads: a script, or a single-file component's. */
+const JSX_INPUT_FILE = /\.(?:[cm]?[jt]sx?|vue|svelte|astro)$/;
+
 /**
  * Whether a JSX tag can render `node` (`jsxChild`): a script's component,
  * function or class named with a tag's capital, or any component, which a
@@ -1753,6 +1756,49 @@ function importedFromPackage(ctx: ResolutionContext, name: string, file: string)
   return !!binding && ctx.isOutOfRepoImport?.(binding.source, file, language) === true;
 }
 
+/**
+ * The module of the project `file` imports `name` from, and the export the
+ * import names: `default` for a default import, else the imported name.
+ * Undefined when the file imports no such name from a module the index holds:
+ * a package's (`importedFromPackage`), or a path only the app's build resolves.
+ */
+function projectImport(ctx: ResolutionContext, name: string, file: string): { module: string; exported: string } | undefined {
+  const language = languageForJsxFile(file);
+  const binding = ctx.getImportMappings(file, language).find((m) => m.localName === name);
+  if (!binding || binding.isNamespace) return undefined;
+  const module = binding.resolvedPath ?? resolveImportPath(binding.source, file, language, ctx);
+  if (!module || !ctx.getNodesInFile(module).some((n) => n.kind === 'file')) return undefined;
+  return { module, exported: binding.isDefault || binding.exportedName === 'default' ? 'default' : binding.exportedName };
+}
+
+/**
+ * The files a JSX file's project-imported tags are read through: each tag's
+ * module, the index or barrel that hands its component on, and the module
+ * that declares it (`exportedComponent`'s reads). A sync that edits one of
+ * them — `index.ts` forwarding another module, a default export rewired —
+ * redraws the tag. `memo` holds each module and export's reads for one run.
+ */
+function importedTagModules(ctx: ResolutionContext, file: string, content: string, memo: Map<string, Set<string>>): Set<string> {
+  const out = new Set<string>();
+  JSX_TAG_RE.lastIndex = 0;
+  const names = new Set<string>();
+  for (let m = JSX_TAG_RE.exec(content); m; m = JSX_TAG_RE.exec(content)) names.add(m[1]!);
+  for (const name of names) {
+    const imported = projectImport(ctx, name, file);
+    if (!imported) continue;
+    const key = `${imported.module}\0${imported.exported}`;
+    let reads = memo.get(key);
+    if (!reads) {
+      reads = new Set<string>();
+      exportedComponent(imported.module, imported.exported, ctx, new Set(), reads);
+      memo.set(key, reads);
+    }
+    for (const read of reads) out.add(read);
+  }
+  out.delete(file);
+  return out;
+}
+
 /**
  * The component a JSX tag names, among every node that shares the name.
  *
@@ -1770,9 +1816,19 @@ function importedFromPackage(ctx: ResolutionContext, name: string, file: string)
  * shape, and the one an import can never disambiguate. Then a name the file
  * imports from a package: that package's component, which is no node here, so
  * nothing. On SigNoz, antd's `<Button>` rendered the one project `Button` there
- * was, a styled link in a 404 page's styles. Then the file the name is
- * imported from. Then the language, which only decides a tie: a `.tsx` tag
- * naming both a TS component and a same-named Swift class means the TS one.
+ * was, a styled link in a 404 page's styles. Then a name it imports from a
+ * module of the project: the component that module exports under it, read the
+ * way a lazy route's module is (`exportedComponent`), through an `index` or a
+ * barrel that hands it on and past a wrapper call. outline's
+ * `Sidebar/index.ts` is `import Sidebar from "./App"; export default
+ * Sidebar`, and `./App` exports `observer(AppSidebar)`; the index declares
+ * nothing, so `<Sidebar>` took the styled `Sidebar` of `Aside.tsx` by name.
+ * When the module exports nothing the graph holds as a component under the
+ * name — `export default () => …`, a type — no namesake elsewhere is it either,
+ * though one the module itself declares still is (a CommonJS `module.exports =
+ * Card`). Then the file the name is imported from. Then the language, which
+ * only decides a tie: a `.tsx` tag naming both a TS component and a
+ * same-named Swift class means the TS one.
  *
  * A value the file declares under the name comes first of all: `const Chart =
  * lazy(() => import('./Chart'))` renders the component that module exports,
@@ -1787,7 +1843,8 @@ function jsxChild(
   name: string,
   file: string,
   importsOf: () => Map<string, string>,
-  ownValueOf: (name: string) => ReturnType<typeof declaredComponent>
+  ownValueOf: (name: string) => ReturnType<typeof declaredComponent>,
+  exportOf: (module: string, exported: string) => Node | null
 ): Node | undefined {
   const own = ownValueOf(name);
   if (own) return own.component ?? own.declaration;
@@ -1795,6 +1852,14 @@ function jsxChild(
   const local = candidates.find((n) => n.filePath === file);
   if (local) return local;
   if (importedFromPackage(ctx, name, file)) return undefined;
+  const imported = projectImport(ctx, name, file);
+  if (imported) {
+    const exported = exportOf(imported.module, imported.exported);
+    if (exported) return exported;
+    const inModule = candidates.find((n) => n.filePath === imported.module);
+    if (inModule) return inModule;
+    if (candidates.length > 0) return undefined;
+  }
   if (candidates.length === 0) {
     // A name nothing declares is the file's DEFAULT import of a module's one
     // component under another name: segmented-control renders
@@ -1881,6 +1946,19 @@ async function reactJsxChildEdges(ctx: ResolutionContext, onYield: MaybeYield):
   const edges: Edge[] = [];
   const seen = new Set<string>();
   const PARENT_KINDS = new Set(['method', 'function', 'component']);
+  // Once per module and export for the whole pass: what a tag imported from
+  // the project renders. The lookup reads and comment-strips the module.
+  const exports = new Map<string, Node | null>();
+  const exportOf = (module: string, exported: string): Node | null => {
+    const key = `${module}\0${exported}`;
+    let node = exports.get(key);
+    if (node === undefined) {
+      const id = exportedComponent(module, exported, ctx);
+      node = id ? ctx.getNodeById?.(id) ?? null : null;
+      exports.set(key, node);
+    }
+    return node;
+  };
   let scanned = 0;
   for (const file of ctx.getAllFiles()) {
     if ((++scannedFiles & 15) === 0) await onYield();
@@ -1939,7 +2017,7 @@ async function reactJsxChildEdges(ctx: ResolutionContext, onYield: MaybeYield):
       for (const [name, line] of names.tags) {
         if (added >= MAX_JSX_CHILDREN) break;
         if (!line) continue;
-        let child = jsxChild(ctx, name, file, importsOf, ownValueOf);
+        let child = jsxChild(ctx, name, file, importsOf, ownValueOf, exportOf);
         // A name the parent binds itself by its first tag is that local.
         if (child && names.bare.has(name) && jsCodeBindsName(name, parent, file, line, ctx)) {
           child = declaredInside(ctx, name, parent, child);
@@ -4681,14 +4759,19 @@ export async function synthesizeCallbackEdges(
   // depends only on the files, so with a pool the main thread reads them while
   // the workers run the passes instead of after. A module a file's own lazy
   // value loads feeds the JSX that names the value, even with no markup of its
-  // own: a page given its default export, or a barrel rewired, redraws it.
+  // own: a page given its default export, or a barrel rewired, redraws it. So
+  // does every file a tag imported from the project is read through.
   const collectInputs = async (): Promise<string[]> => {
     const found = new Set<string>();
+    const tagModules = new Map<string, Set<string>>();
     for (const file of ctx.getAllFiles()) {
       const content = ctx.readFile(file);
       if (content !== null && hasSynthesisPattern(file, content)) {
         found.add(file);
         if (/\bimport\s*\(/.test(content)) for (const read of lazyValueModules(file, ctx)) found.add(read);
+        if (JSX_INPUT_FILE.test(file) && (content.includes('</') || content.includes('/>'))) {
+          for (const read of importedTagModules(ctx, file, content, tagModules)) found.add(read);
+        }
       }
       await yieldToLoop();
     }
diff --git a/src/resolution/frameworks/react.ts b/src/resolution/frameworks/react.ts
index a53f298af6..99983ec1b9 100644
--- a/src/resolution/frameworks/react.ts
+++ b/src/resolution/frameworks/react.ts
@@ -501,11 +501,14 @@ const MAX_REEXPORT_HOPS = 4;
  * `export { default } from './page'`, `export { Page as Component } from
  * './page'`, `export * from './page'`, which forwards every name but the
  * default, or an import it exports again, `import { Page } from './page';
- * export { Page }`. As in JavaScript, a name the file exports itself hides one an
- * `export *` would forward, and a name two `export *` modules both forward is
- * exported by neither. `reads` collects every file the lookup reads.
+ * export { Page }`, or in a value, outline's `const Avatar =
+ * AvatarWithHoverCard; export { Avatar }`. As in JavaScript, a name the file
+ * exports itself hides one an `export *` would forward, and a name two
+ * `export *` modules both forward is exported by neither. `reads` collects
+ * every file the lookup reads. A JSX tag imported from the project renders it
+ * too (`jsxChild`).
  */
-function exportedComponent(
+export function exportedComponent(
   file: string,
   name: string,
   context: ResolutionContext,
@@ -523,17 +526,40 @@ function exportedComponent(
   const code = stripCommentsForRegex(context.readFile(file) ?? '', 'typescript');
   const local = ownExport(code, name);
   if (local) {
-    const named = context.getNodesInFile(file).filter((n) => n.name === local && EXPORTED_COMPONENT_KINDS.has(n.kind));
-    const declared = named.find((n) => n.qualifiedName === local) ?? named[0];
+    const nodes = context.getNodesInFile(file);
+    const declaredAs = (binding: string): Node | undefined => {
+      const named = nodes.filter((n) => n.name === binding && EXPORTED_COMPONENT_KINDS.has(n.kind));
+      return named.find((n) => n.qualifiedName === binding) ?? named[0];
+    };
+    const exported = declaredAs(local);
+    // A constant that holds another binding is that binding: outline's
+    // `Avatar/index.ts` is `const Avatar = AvatarWithHoverCard; export { Avatar }`.
+    // (A `let` may be assigned another component before it is used.)
+    let binding = local;
+    let declared = exported;
+    for (let hop = 0; declared && hop < MAX_REEXPORT_HOPS; hop++) {
+      const held = declared.kind === 'constant' ? heldBinding(declared, context) : null;
+      if (!held) break;
+      binding = held;
+      declared = declaredAs(held);
+    }
     // A value is what it wraps: `export default Page` of `const Page = observer(function Page_() {…})`.
-    if (declared) return (declared.kind === 'constant' || declared.kind === 'variable' ? wrappedComponent(declared, context)?.id : undefined) ?? declared.id;
+    // So is a component node minted for a wrapper around another component
+    // (`const MemoizedBlurhash = memo(Blurhash)`), which has no body to render from.
+    if (declared) {
+      const wrapped = declared.kind === 'constant' || declared.kind === 'variable' ? wrappedComponent(declared, context)
+        : declared.kind === 'component' ? handedComponent(declared, context) : null;
+      return (wrapped ?? declared).id;
+    }
     // A name the module imports and exports again — `import { Page } from
     // './page'; export { Page }`, `import Page from './Page'; export default
     // Page` — is the page that import names. `export default withAuth(Page)`
     // hands over no binding of its own.
-    if (name === 'default' && !exportsBinding(code, local)) return null;
-    const imported = context.getImportMappings(file, language).find((m) => m.localName === local);
-    return imported && !imported.isNamespace ? forwarded(imported.source, imported.isDefault ? 'default' : imported.exportedName) : null;
+    if (binding === local && name === 'default' && !exportsBinding(code, local)) return null;
+    const imported = context.getImportMappings(file, language).find((m) => m.localName === binding);
+    const id = imported && !imported.isNamespace ? forwarded(imported.source, imported.isDefault ? 'default' : imported.exportedName) : null;
+    // A held binding that leads nowhere leaves the value itself the export.
+    return id ?? exported?.id ?? null;
   }
   const reExports = context.getReExports?.(file, language) ?? [];
   for (const re of reExports) {
@@ -801,10 +827,33 @@ function wrappedComponent(value: Node, context: ResolutionContext): Node | null
   const held = inner.find((n) => n.name === value.name) ??
     (inner.length === 1 && inner[0]!.endLine === value.endLine ? inner[0]! : null);
   if (held || inner.length > 0) return held;
+  return handedComponent(value, context, nodes);
+}
+
+/**
+ * The binding a value holds and nothing more — `AvatarWithHoverCard` of
+ * outline's `const Avatar = AvatarWithHoverCard`, past a type assertion (`=
+ * Page as FC`) — or null for any other initializer.
+ */
+function heldBinding(value: Node, context: ResolutionContext): string | null {
+  const code = stripCommentsForRegex(declarationText(value, context), 'typescript');
+  const init = initializerAt(code, value.name.length);
+  if (init < 0) return null;
+  const held = /^\s*([A-Za-z_$][\w$]*)\s*(?:$|(?:as|satisfies)\s)/.exec(code.slice(init, statementEnd(code, init)));
+  return held && held[1] !== value.name ? held[1]! : null;
+}
+
+/**
+ * The component of its own file a wrapper call around a declaration hands
+ * over: `const TableView = observer(TableViewInner)`, or mastodon's `const
+ * MemoizedBlurhash = memo(Blurhash)`, whose component node has no body of its
+ * own to render from.
+ */
+function handedComponent(value: Node, context: ResolutionContext, nodes = context.getNodesInFile(value.filePath)): Node | null {
   const code = stripCommentsForRegex(declarationText(value, context), 'typescript');
   const init = initializerAt(code, value.name.length);
   const handed = init < 0 ? null : wrappedName(code.slice(init, statementEnd(code, init)));
-  return handed && isPascalCase(handed)
+  return handed && isPascalCase(handed) && handed !== value.name
     ? nodes.find((n) => n.name === handed && n.qualifiedName === handed && COMPONENT_KINDS.has(n.kind)) ?? null
     : null;
 }

From 3f714bcc480e372d232f2d5e9b37b84256a205e1 Mon Sep 17 00:00:00 2001
From: Colby Mchenry <me@colbymchenry.com>
Date: Wed, 14 Oct 2026 23:23:21 +0000
Subject: [PATCH 2/5] fix(jsx): a .jsx component links to the file-scope values
 it reads, as in .js and .tsx (#2561)

Value-reference edges (a reader symbol -> the file-scope const/var it
reads, which impact follows) ran for typescript, tsx and javascript but
not jsx. A .jsx file is its own language, parsed with the JavaScript
grammar, so the same component had no edge to the lazy page it renders
(`<LoginPage />` under `const LoginPage = Loadable(lazy(...))`), the route
table or the config it maps over as .jsx, and all of them as .js or .tsx.
Every other JS-family gate in the extractor lists jsx, and nothing in the
history says this one was left out on purpose: the kernel mirrored the gap
with an explicit "NOT jsx" check for parity.

Add jsx to VALUE_REF_LANGS and drop the kernel's jsx exclusion.

On mantis, matx, berry, mastodon and bigbluebutton-html5 the index only
gains edges (35, 56, 15, 28 and 266): no node, ref or file changes and no
edge removed. Every added edge is a same-file read of a file-scope value
that is the only binding of its name in the file. A repo with no .jsx
files indexes byte-identically, and kernel-parity.mjs shows 0 diffs over
those repos with the same deferrals as before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  1 +
 __tests__/kernel-tsjs-parity.test.ts          | 24 +++++++++++++++++
 __tests__/value-reference-edges.test.ts       | 27 +++++++++++++++++++
 codegraph-kernel/src/tsjs/mod.rs              |  9 +------
 docs/design/value-reference-edges-playbook.md |  4 +--
 docs/design/value-reference-edges.md          | 15 +++++++++--
 src/extraction/tree-sitter.ts                 |  2 +-
 7 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49c38c124f..f3388d034c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -130,6 +130,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - In Go, a struct or defined type now counts as implementing an interface only when its methods take as many parameters and return as many results as the interface's. Before, matching method names was enough, so etcd's watch cache, whose `Get` takes a context, a key and options, was listed as a `peerGetter`, whose `Get` takes a peer ID, and a call through an interface could be shown reaching methods it can never reach. Look-alikes could also crowd out the real implementations, so `codegraph_explore` stopped at grpc-go's xDS `TransportBuilder` instead of reaching the transport it builds. A server still counts for the gRPC client interface of the service it serves, like etcd's `kvServer` for `KVClient`, so a client's call keeps leading to the handler that serves it. Re-index Go projects after upgrading.
 - In Angular templates, a property binding, an interpolation, a structural directive or a control-flow block that calls one of the component's own members, like `[name]="icon()"`, `{{ label() }}`, `*ngIf="isOpen()"` or `@if (loading()) {`, now links the component to that member, and so does reading a getter, like `[disabled]="!canSave"`, or handing a method to a child component, like `[displayWith]="displayFn"` or `trackBy: trackById`. Before, only event bindings such as `(click)="save()"` were read, so a signal, a `computed` value, a getter or a method used only from a template had no callers and looked unused. A pipe, a template variable, a call on another object such as `form.reset()`, and a plain field read like `[value]="title"` still link nothing. Re-index Angular projects after upgrading.
 - React Router routes kept in a table of their own are now indexed: the ASP.NET Core React template's `AppRoutes` array that `App.js` maps into `<Route {...rest}>`, a `routes` array imported into `useRoutes(routes)` or `createBrowserRouter(routes)` or returned by a function as in `useRoutes(routes(isLoggedIn))`, route objects kept one per file and listed in `createBrowserRouter([MainRoutes, LoginRoutes])`, and routes written in place in `useRoutes([…])`. Before, route objects were read only from a file that itself creates a data router, so these apps had no routes, and their `navigate('/login')` calls and `<Link to="/counter">` links led nowhere. Each route links to the page its `element` renders, past a guard like `<ProtectedRoute>` or `<AdminWrapper>`, and through `lazy(() => import(…))` to the page it loads rather than a same-named page elsewhere in the repository. An `index: true` route is the page at its parent's address, and a parent route around others counts as their layout. A `{ path, element }` list that nothing hands to the router, such as a menu, still makes no routes. Re-index React projects after upgrading.
+- In `.jsx` files, the components and functions that read a constant or variable declared at the top of the file, like a page loaded with `const LoginPage = Loadable(lazy(…))` and rendered as `<LoginPage />`, a route table, or a messages or style object, now show up in its impact, as they already did in `.js` and `.tsx` files. Before, `.jsx` files were left out, so `codegraph impact` and the impact trail in `codegraph_explore` and `codegraph_node` showed nothing depending on such a value. Re-index projects with `.jsx` files after upgrading.
 - In Go, a call or type written through an import whose path ends in a version, or in something other than the package's name, is now known to go through that import: `yaml.Unmarshal(…)` after `import "go.yaml.in/yaml/v3"` or `"gopkg.in/yaml.v3"`, `sqlite3.Error` after `import "github.com/mattn/go-sqlite3"`, `klog.V(2)` after `import "k8s.io/klog/v2"`. Before, only the last part of the path named such an import (`v3`, `yaml.v3`, `go-sqlite3`), so the name was matched on its own and could link to any project function, method or type that shared it: kubernetes' `klog.V(…)` calls were linked to a logging wrapper's `V` method, and etcd's `semver.Version` parameters to an unrelated `Version` function. A name from another module now links to nothing, and one through a package of your own project, like `kit.New()` after `import "example.com/kit/v2"`, links to that package's symbol. A comment in an import block is also no longer taken for the name of the import after it. Re-index Go projects after upgrading. Thanks @danusha2345 for the comment fix. (#2374)
 - In Go, a call is now matched to the package or variable it is actually made on. Before, a call through a package, like `klog.Infof("Log using Infof")` or `digest.Digest(dig)` inside `&distribution.Descriptor{Digest: …}`, could link to a project method of the same name when the name appeared again on the line, and in `klog.Error(err.Error())` the `err.Error()` call was taken for a call into `klog`. A parameter, receiver or local variable named like an import, like etcd's `jwt, err := newTokenProviderJWT(…)` or the `suite` receiver in a testify test suite, now counts as that variable, so calls on it link to the methods of the type it is declared as, and to nothing when that type comes from outside your project. Re-index Go projects after upgrading.
 - In Go, a call through a parameter or local variable named like a standard-library package, such as `context`, `log`, `trace`, `printer` or `token`, now links to the method it calls. Before, every call written `context.…` or `printer.…` was taken for a call into the standard library and linked to nothing: gin's `context.AbortWithError(…)` inside `func(context *Context)`, harbor's `context.IsAuthenticated()` after `context := NewSecurityContext(…)` and `log.Errorf(…)` after `log := log.G(ctx)`, etcd's `printer.DBHashKV(…)` and `trace.Step(…)`. The variable's declaration decides the method: the type it is declared as, or the package of the project function its value comes from. A variable holding a value from outside your project, like `scanner := bufio.NewScanner(r)` or `url, err := url.Parse(raw)`, still links to nothing, and one whose type can't be told links only to a method no other type in the project has, never to one picked because it matches the variable's name. Re-index Go projects after upgrading.
diff --git a/__tests__/kernel-tsjs-parity.test.ts b/__tests__/kernel-tsjs-parity.test.ts
index 9032f27ea2..38e4672855 100644
--- a/__tests__/kernel-tsjs-parity.test.ts
+++ b/__tests__/kernel-tsjs-parity.test.ts
@@ -341,6 +341,30 @@ const lowerCase = styled.div<Props>\`color: red;\`;
     for (const name of ['Mixin', 'Compared', 'lowerCase']) expect(kind(name), name).toEqual(['constant']);
   });
 
+  it.each([
+    ['tsx', 'tsx'], ['js', 'javascript'], ['jsx', 'jsx'],
+  ] as const)('edges the file-scope values a component reads or renders: %s', (ext, language) => {
+    // `.jsx` was left out of the value-reference languages on both paths, so
+    // this file had none of these edges as .jsx and all of them as .js or .tsx.
+    const result = assertParity(`routes.${ext}`, `
+import { lazy } from 'react';
+import Loadable from './Loadable';
+const LoginPage = Loadable(lazy(() => import('./pages/Login')));
+const ROUTE_TABLE = [{ path: '/login', label: 'Login' }];
+const THEME_TOKENS = { color: 'red', size: 12 };
+export function AuthRoutes() { return <LoginPage />; }
+export function Nav() {
+  return <ul style={{ color: THEME_TOKENS.color }}>{ROUTE_TABLE.map((r) => <li key={r.path}>{r.label}</li>)}</ul>;
+}
+export const Box = () => <div data-size={THEME_TOKENS.size} />;
+`, language);
+    const name = (id: string) => result.nodes.find((n) => n.id === id)?.name;
+    expect(result.edges
+      .filter((e) => e.kind === 'references' && e.metadata?.valueRef === true)
+      .map((e) => `${name(e.source)} -> ${name(e.target)}`)
+      .sort()).toEqual(['AuthRoutes -> LoginPage', 'Box -> THEME_TOKENS', 'Nav -> ROUTE_TABLE', 'Nav -> THEME_TOKENS']);
+  });
+
   it('torture fixture (tsx): components, stores, RTK, fn-refs, value-refs, decorators', () => {
     const file = path.join(FIXTURE_DIR, 'torture.tsx');
     assertParity('fixtures/torture.tsx', fs.readFileSync(file, 'utf8'), 'tsx');
diff --git a/__tests__/value-reference-edges.test.ts b/__tests__/value-reference-edges.test.ts
index 485a00bd9e..3751546eb7 100644
--- a/__tests__/value-reference-edges.test.ts
+++ b/__tests__/value-reference-edges.test.ts
@@ -124,6 +124,33 @@ describe('value-reference edges', () => {
     expect(valueRefReaders(cg, 'THEME_TOKENS')).toEqual(expect.arrayContaining(['Label', 'Box']));
   });
 
+  it('edges readers in a .jsx file, as it does the same code in .js or .tsx', async () => {
+    // `.jsx` is a language of its own, parsed with the JavaScript grammar. It
+    // used to be missing from the value-reference languages, so a component in
+    // a .jsx file had no edge to the lazy page it renders or the table it maps
+    // over, while the same code in a .js or .tsx file had both.
+    fs.writeFileSync(
+      path.join(dir, 'routes.jsx'),
+      [
+        "import { lazy } from 'react';",
+        "import Loadable from './Loadable';",
+        "const LoginPage = Loadable(lazy(() => import('./pages/Login')));",
+        "const NAV_ITEMS = [{ path: '/login', label: 'Login' }];",
+        'export function AuthRoutes() {',
+        '  return <LoginPage />;',
+        '}',
+        'export function Nav() {',
+        '  return <ul>{NAV_ITEMS.map((item) => <li key={item.path}>{item.label}</li>)}</ul>;',
+        '}',
+      ].join('\n'),
+    );
+    cg = index();
+    await cg.indexAll();
+
+    expect(valueRefReaders(cg, 'LoginPage')).toEqual(['AuthRoutes']);
+    expect(valueRefReaders(cg, 'NAV_ITEMS')).toEqual(['Nav']);
+  });
+
   it('edges same-file readers to a module-level const/static (Rust)', async () => {
     fs.writeFileSync(
       path.join(dir, 'lib.rs'),
diff --git a/codegraph-kernel/src/tsjs/mod.rs b/codegraph-kernel/src/tsjs/mod.rs
index 6b66c635bf..a19fb1fa93 100644
--- a/codegraph-kernel/src/tsjs/mod.rs
+++ b/codegraph-kernel/src/tsjs/mod.rs
@@ -46,10 +46,6 @@ impl Variant {
     fn is_ts(self) -> bool {
         matches!(self, Variant::Typescript | Variant::Tsx)
     }
-    /// VALUE_REF_LANGS includes typescript/tsx/javascript but NOT jsx.
-    fn value_refs(self) -> bool {
-        !matches!(self, Variant::Jsx)
-    }
 }
 
 /// typescriptExtractor.methodTypes / javascriptExtractor.methodTypes.
@@ -478,9 +474,6 @@ impl<'t> Walker<'t> {
     // --- value references (captureValueRefScope / flushValueRefs) --------------
 
     fn capture_value_ref_scope(&mut self, kind: &'static str, name: &str, row: u32, node: Node<'t>, value_target: bool) {
-        if !self.variant.value_refs() {
-            return;
-        }
         let target_kind_ok = kind == "constant" || kind == "variable";
         if value_target
             && target_kind_ok
@@ -506,7 +499,7 @@ impl<'t> Walker<'t> {
         let scopes = std::mem::take(&mut self.value_scopes);
         let mut targets = std::mem::take(&mut self.fs_values);
         let counts = std::mem::take(&mut self.fs_value_counts);
-        if !self.variant.value_refs() || std::env::var("CODEGRAPH_VALUE_REFS").as_deref() == Ok("0") {
+        if std::env::var("CODEGRAPH_VALUE_REFS").as_deref() == Ok("0") {
             return;
         }
         if targets.is_empty() || scopes.is_empty() || util::is_generated_file(self.file_path) {
diff --git a/docs/design/value-reference-edges-playbook.md b/docs/design/value-reference-edges-playbook.md
index 17bb78bb61..363d662045 100644
--- a/docs/design/value-reference-edges-playbook.md
+++ b/docs/design/value-reference-edges-playbook.md
@@ -45,7 +45,7 @@ agent read-reduction (see §4.3).
 
 | Symbol | Role |
 |---|---|
-| `VALUE_REF_LANGS` (static Set) | languages the feature runs for. Currently `typescript`, `javascript`, `tsx`, `go`, `python`, `rust`, `ruby`, `c`, `java`, `csharp`, `php`, `scala`, `kotlin`, `swift`, `dart`, `pascal`. **Add the new language here.** |
+| `VALUE_REF_LANGS` (static Set) | languages the feature runs for. Currently `typescript`, `javascript`, `tsx`, `jsx`, `arkts`, `go`, `python`, `rust`, `ruby`, `c`, `java`, `csharp`, `php`, `scala`, `kotlin`, `swift`, `dart`, `pascal`. **Add the new language here.** |
 | `valueRefsEnabled` | `process.env.CODEGRAPH_VALUE_REFS !== '0'` — default ON, env opts out. |
 | `MAX_VALUE_REF_NODES` (20_000) | per-scope traversal cap (and the shadow-scan cap). |
 | `captureValueRefScope(kind, name, id, node)` | called from `createNode` on every node. Records **targets** (file-scope `const`/`var`) and **reader scopes** (`function`/`method`/`const`/`var`). |
@@ -169,7 +169,7 @@ the bottom of this section).
 
 | Language | How |
 |---|---|
-| TypeScript, JavaScript, tsx | file-scope `const`/`var`; the original languages |
+| TypeScript, JavaScript, tsx, jsx | file-scope `const`/`var`; the original languages (`jsx` was left out until 2026-10 — see the design doc's tsx note) |
 | Python | module-level `NAME =` |
 | Go | package `const`/`var` |
 | Rust | module + impl `const`/`static` |
diff --git a/docs/design/value-reference-edges.md b/docs/design/value-reference-edges.md
index 8ef442362f..25484d44a2 100644
--- a/docs/design/value-reference-edges.md
+++ b/docs/design/value-reference-edges.md
@@ -1,6 +1,6 @@
 # Design + status: same-file value-reference edges
 
-**Status:** SHIPPED (default-on for TS/JS/tsx + Go + Python + Rust + Ruby + C + Java + C# + PHP + Scala + Kotlin + Swift + Dart + Pascal; `CODEGRAPH_VALUE_REFS=0` disables). The
+**Status:** SHIPPED (default-on for TS/JS/tsx/jsx + Go + Python + Rust + Ruby + C + Java + C# + PHP + Scala + Kotlin + Swift + Dart + Pascal; `CODEGRAPH_VALUE_REFS=0` disables). The
 emitter lives in `TreeSitterExtractor.flushValueRefs` (`src/extraction/tree-sitter.ts`).
 **Motivation:** close the impact-analysis hole for *value consumers*. Static
 extraction edges calls, imports, and inheritance, but never edges a constant to the
@@ -13,7 +13,7 @@ readers" class of change (the ReScript-PR false positive that motivated the work
 ## TL;DR for a new session
 
 We emit a `references` edge (`metadata: { valueRef: true }`) from a reader symbol to
-the **file/package-scope `const`/`var` it reads**, same-file only, for TS/JS/tsx + Go + Python + Rust + Ruby + C + Java + C# + PHP + Scala + Kotlin + Swift + Dart + Pascal. Those edges
+the **file/package-scope `const`/`var` it reads**, same-file only, for TS/JS/tsx/jsx + Go + Python + Rust + Ruby + C + Java + C# + PHP + Scala + Kotlin + Swift + Dart + Pascal. Those edges
 flow straight into `getImpactRadius` / `codegraph impact` and the impact trail in
 `codegraph_explore` / `codegraph_node` — no agent-behaviour change required.
 
@@ -419,6 +419,17 @@ tsx-specific path — a const read *only* inside JSX (`<Foo x={CONST}/>`) — re
 reader-scan descending into the JSX subtree; it's locked by a unit test
 (`value-reference-edges.test.ts`), so no separate tsx repo sweep is needed.
 
+**`jsx` was missing until 2026-10.** A `.jsx` file is its own language (`jsx`), parsed
+with the JavaScript grammar, and `VALUE_REF_LANGS` — and the kernel's mirror in
+`codegraph-kernel/src/tsjs/` — listed `javascript` and `tsx` but not `jsx`. So a `.jsx`
+component had no edge to the lazy page it renders (`<LoginPage />` under
+`const LoginPage = Loadable(lazy(…))`) or the table it maps over, while the same file as
+`.js` or `.tsx` had both. Adding it changed nothing else: on mantis, matx, berry,
+mastodon and bigbluebutton-html5 the index only gained edges (400 in all, every one a
+same-file read of a file-scope value that is the only binding of its name in the file),
+and a repo with no `.jsx` files indexed byte-identically. Locked by the `.jsx` cases in
+`value-reference-edges.test.ts` and `kernel-tsjs-parity.test.ts`.
+
 **Svelte / Vue / Astro are covered for free** — their extractors re-parse the `<script>` /
 frontmatter block as `typescript` / `javascript`, which are in `VALUE_REF_LANGS`, so a `const`
 in a `.svelte`/`.vue`/`.astro` script edges its readers without any extra work (verified on a
diff --git a/src/extraction/tree-sitter.ts b/src/extraction/tree-sitter.ts
index 0422c44c54..eebcab5f0a 100644
--- a/src/extraction/tree-sitter.ts
+++ b/src/extraction/tree-sitter.ts
@@ -557,7 +557,7 @@ export class TreeSitterExtractor {
   // Value-reference edges (default ON; set CODEGRAPH_VALUE_REFS=0 to disable; see flushValueRefs).
   // Same-file reads of file-scope const/var symbols → `references` edges so impact analysis catches
   // value consumers ("change this constant/table, affect its readers").
-  private static readonly VALUE_REF_LANGS = new Set<string>(['typescript', 'javascript', 'tsx', 'arkts', 'go', 'python', 'rust', 'ruby', 'c', 'java', 'csharp', 'php', 'scala', 'kotlin', 'swift', 'dart', 'pascal']);
+  private static readonly VALUE_REF_LANGS = new Set<string>(['typescript', 'javascript', 'tsx', 'jsx', 'arkts', 'go', 'python', 'rust', 'ruby', 'c', 'java', 'csharp', 'php', 'scala', 'kotlin', 'swift', 'dart', 'pascal']);
   private static readonly MAX_VALUE_REF_NODES = 20_000;
   private readonly valueRefsEnabled = process.env.CODEGRAPH_VALUE_REFS !== '0';
   private fileScopeValues = new Map<string, string>();

From eec9288a560932ab3d8b1c244a89d35070ef43cd Mon Sep 17 00:00:00 2001
From: Colby Mchenry <me@colbymchenry.com>
Date: Thu, 15 Oct 2026 00:46:34 +0000
Subject: [PATCH 3/5] fix(react): a tag written in a comment or a string
 renders no JSX child (#2564)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The jsx-render pass read tag names off each parent's raw lines, so text
that only mentions a tag rendered it: react-router's hooks rendered the
`Router`, `Routes` and `Route` their JSDoc, comments and invariant
messages name ("You cannot render a <Router> inside another <Router>"),
shadcn's `useCarousel` the `Carousel` its error names, and layouts the
markup commented out of them (`{/* <Progress /> */}`).

The pass now scans a code-only view of each file (`jsxCode`, new in
src/resolution/jsx-code.ts): comments and the contents of string,
template and regex literals and of JSX attribute strings are blanked,
offsets and line breaks kept. The lexer follows JSX elements, so a quote,
slash or backtick in JSX text (`Don't`, `https://…`) stays text, and it
re-reads a `<` that opens a type parameter list (`<T,>(x: T) =>`) as an
operator. A file it can't read as one program (an unbalanced brace, a
string open at a line's end, a mismatched closing tag) is scanned as it
is, as before. TypeScript `.ts` files are skipped outright: they can't
hold JSX. The lexer's state lives in a class whose methods every file
shares: closures made per file sent V8 back to recompile it for file
after file.

Checked against TypeScript's parser on 36 React repos (7,649 files,
62,377 `<Name` matches): no real tag blanked, no file given up on, 614
non-JSX matches removed. Graph A/B on 12 repos: -36 jsx-render edges,
+0, nothing else changed; the TypeScript oracle grades all 36 as tags in
comments or strings.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                               |   1 +
 __tests__/jsx-child-disambiguation.test.ts | 230 +++++++++
 src/resolution/callback-synthesizer.ts     |  18 +-
 src/resolution/jsx-code.ts                 | 519 +++++++++++++++++++++
 4 files changed, 763 insertions(+), 5 deletions(-)
 create mode 100644 src/resolution/jsx-code.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3388d034c..ccd5890c1a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -142,6 +142,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `codegraph sync` and the file watcher now link a lazily loaded React Router route to its page when the page appears, or gains the export the route reads, in a folder below the one the route loads, like `src/pages/Home/index.tsx` behind `import('@/pages')`. Before, such a route kept linking nothing until the folder's own `index.ts` changed or the project was re-indexed, although a fresh index linked it.
 - In JavaScript and TypeScript, an import written `import { default as AppRoot } from './routes/app/root'`, as in bulletproof-react's router, now counts as the module's default import, the same as `import AppRoot from './routes/app/root'`. Before, it was read as an import of an export named `default`, which no module has, so a call, a route or a JSX attribute that used `AppRoot` was matched by its name alone: it could link to another file's `AppRoot`, or to nothing when the default export has a name of its own. Svelte, Vue and Astro script blocks are read the same way.
 - In React, a component's JSX no longer links it to a class or component that only shares a name with one of its type arguments or with a variable of its own. A type in angle brackets, like `Document` in `<PaginatedList<Document> items={…} />`, `User` in `useState<User>()` or `Entry` in a generic `<Entry extends BaseEntity>(…) =>` component, is no longer read as a tag. A tag naming a variable or parameter the component sets itself, like `<Content>` after `const Content = isDropdown ? DropdownMenu.SubContent : ContextMenu.SubContent` or `<Widget>` in `widgets.map((Widget) => <Widget />)`, now links to nothing, unless the component declares a component of that name inside itself. Before, these linked to an unrelated class or component elsewhere in the repository: outline's document lists showed up among the callers of its `Document` model class, and its menus among the callers of the command bar's `Content`, so `codegraph_explore`, callers and impact followed renders that never happen. Re-index React projects after upgrading.
+- In React, a tag a component only mentions in a comment or a string no longer links it to that component: a JSDoc example, markup commented out like `{/* <Progress /> */}`, or an error message like react-router's "You cannot render a <Router> inside another <Router>" or shadcn's "useCarousel must be used within a <Carousel />". Nothing in a TypeScript `.ts` file, which can't hold JSX, is read as a tag either, like the XML in outline's OpenSearch template. Before, these counted as renders, so react-router's hooks showed up among the callers of `Router`, `Routes` and `Route`, and `codegraph_explore`, callers and impact followed renders that never happen. A tag after an apostrophe, a URL or a backtick in a component's text, like `<p>Don't have an account? <Link to="/signup">`, still links as before. Re-index React projects after upgrading.
 - In JavaScript and TypeScript, a name imported from a package your `package.json` lists no longer links to a project symbol that only shares its name when `tsconfig.json` or `jsconfig.json` has a catch-all path alias, like `"*": ["./typings/*"]` or `"*": ["src/*", "node_modules/*"]`, or an alias that points the package at a file in `node_modules`, like `"lit/decorators": ["./node_modules/lit/decorators.js"]`. Such an alias made every package look like part of the project, so `import { Typography } from '@mui/material'` was linked to the project's own `Typography` and every lit `@property()` decorator to an unrelated class's `property` field, and `codegraph callers`, impact and `codegraph affected` listed code that never used them. An import the alias does map to a file of your project, like a `.d.ts` you keep for an untyped package or `components/Button` through `"*": ["src/*"]`, links as before. Re-index affected projects after upgrading.
 - `codegraph_explore`'s Flow now goes through the implementation your query names when an interface method has several that lead to the same place. Before, it took whichever one came first in the index: asking about prometheus's `Engine.execEvalStmt Queryable.Querier fanout.Querier NewMergeQuerier` traced the call through the TSDB's `DB.Querier` and left the `fanout.Querier` you named off the Flow. Any two routes of the same length are now settled this way, in favor of the one that passes through more of the symbols you named.
 - In C and C++, a struct, class, union or enum defined in a variable declaration, like `struct Foo { … } foo;`, is now indexed with its methods and enum values, next to the variable. Before, at most the variable was, so the type was missing from search and `codegraph_explore`, a class deriving from it had no base, and calls to its methods linked to nothing: in redis, the Sentinel's `sentinelState` and `redis-cli`'s `config` struct were missing. A struct, union or enum with no name of its own now takes the name of the variable it declares, so redis's `static struct { … } SPT;` is found as `SPT`, and one declared inside a function is named after its variable instead of `<anonymous>`. The comment above the declaration becomes the type's description. Re-index C and C++ projects after upgrading.
diff --git a/__tests__/jsx-child-disambiguation.test.ts b/__tests__/jsx-child-disambiguation.test.ts
index 3a718b9a16..a5d669e7b6 100644
--- a/__tests__/jsx-child-disambiguation.test.ts
+++ b/__tests__/jsx-child-disambiguation.test.ts
@@ -3,6 +3,7 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import * as os from 'node:os';
 import { CodeGraph } from '../src';
+import { jsxCode } from '../src/resolution/jsx-code';
 
 /**
  * A JSX tag names ONE component, and the file it is written in says which:
@@ -1002,3 +1003,232 @@ export default React.forwardRef<HTMLButtonElement, object>(Button);
     expect(renders('Deck')).toEqual(['Card components/Card.js:3']);
   });
 });
+
+/**
+ * The pass reads tag names off a parent's source with a pattern, so it also
+ * read the tags that text only mentions. react-router's hooks rendered the
+ * `Router`, `Routes` and `Route` their invariant messages and comments name
+ * ("You cannot render a <Router> inside another <Router>"), shadcn's
+ * `useCarousel` the `Carousel` its error names, and a layout the `<Progress />`
+ * commented out of it. A tag in a comment, or in a string, template, regex or
+ * attribute value, is text; so is anything in a TypeScript `.ts` file, which
+ * holds no JSX at all.
+ */
+describe('JSX child: a tag written in a comment or a string', () => {
+  let dir: string;
+  let cg: any;
+
+  beforeEach(() => {
+    dir = fs.mkdtempSync(path.join(os.tmpdir(), 'jsx-text-'));
+    fs.writeFileSync(path.join(dir, 'package.json'), '{"dependencies":{"react":"^18.0.0"}}');
+  });
+
+  afterEach(() => {
+    cg?.close?.();
+    fs.rmSync(dir, { recursive: true, force: true });
+  });
+
+  const write = (rel: string, lines: string[]) => {
+    const p = path.join(dir, rel);
+    fs.mkdirSync(path.dirname(p), { recursive: true });
+    fs.writeFileSync(p, lines.join('\n') + '\n');
+  };
+  const component = (name: string, tag = 'div') => [`export function ${name}() {`, `  return <${tag} />;`, '}'];
+
+  async function index(): Promise<void> {
+    cg = await CodeGraph.init(dir, { silent: true });
+    await cg.indexAll();
+  }
+
+  /** The names a jsx-render edge out of `parent` points at. */
+  const renders = (parent: string): string[] =>
+    cg.db.db
+      .prepare(
+        `SELECT t.name AS r FROM edges e
+           JOIN nodes s ON s.id = e.source
+           JOIN nodes t ON t.id = e.target
+          WHERE s.name = ? AND json_extract(e.metadata, '$.synthesizedBy') = 'jsx-render'
+          ORDER BY r`
+      )
+      .all(parent)
+      .map((row: any) => row.r);
+
+  it('renders nothing for a tag in a comment, a string, a template or a regex', async () => {
+    write('router/components.tsx', ['Router', 'Routes', 'Route', 'Outlet', 'Blog'].flatMap((n) => component(n)));
+    write('router/hooks.tsx', [
+      "import { Outlet } from './components';",
+      '',
+      'export function useRoutesImpl(routes, parentPath) {',
+      '  invariant(',
+      '    useInRouterContext(),',
+      '    `useRoutes() may be used only in the context of a <Router> component.`',
+      '  );',
+      "  // You won't get a warning about 2 different <Routes> under a <Route>:",
+      '  //',
+      '  //   <Route path="blog" element={<Blog />} />',
+      '  warning(',
+      '    !parentPath,',
+      '    `You rendered descendant <Routes> (under <Route path="${parentPath}">) ` +',
+      '      "but the parent route path has no trailing \\"*\\"."',
+      '  );',
+      '  const selfClosing = /<Router \\/>/;',
+      '  return <Outlet />;',
+      '}',
+    ]);
+    // shadcn's carousel hook, and excalidraw's docs theme toggle.
+    write('components/ui/carousel.tsx', [
+      "import * as React from 'react';",
+      'const CarouselContext = React.createContext(null);',
+      'export function useCarousel() {',
+      '  const context = React.useContext(CarouselContext);',
+      "  if (!context) throw new Error('useCarousel must be used within a <Carousel />');",
+      '  return context;',
+      '}',
+      'export function Carousel({ children }) {',
+      '  return <CarouselContext.Provider value={{}}>{children}</CarouselContext.Provider>;',
+      '}',
+    ]);
+    write('docs/Excalidraw.tsx', component('Excalidraw'));
+    write('docs/ToggleTheme.tsx', [
+      'export function ToggleTheme({ onThemeChange }) {',
+      '  if (!onThemeChange) {',
+      '    throw new Error("`<Excalidraw/> props.onThemeChange` must be defined when `theme` is set");',
+      '  }',
+      '  return <button onClick={onThemeChange} />;',
+      '}',
+    ]);
+    // bulletproof-react's layout and binner's inventory: markup commented out.
+    write('components/Drawer.tsx', component('Drawer'));
+    write('components/Progress.tsx', component('Progress'));
+    write('components/Layout.jsx', [
+      "import { Drawer } from './Drawer';",
+      "import { Progress } from './Progress';",
+      'export function Layout({ children }) {',
+      '  /*<Progress value={0} />*/',
+      '  return (',
+      '    <div>',
+      '      {/* <Progress /> */}',
+      '      <Drawer>{children}</Drawer>',
+      '    </div>',
+      '  );',
+      '}',
+    ]);
+    await index();
+    expect(renders('useRoutesImpl')).toEqual(['Outlet']);
+    expect(renders('useCarousel')).toEqual([]);
+    expect(renders('ToggleTheme')).toEqual([]);
+    expect(renders('Layout')).toEqual(['Drawer']);
+  });
+
+  it('renders nothing from a TypeScript .ts file', async () => {
+    // outline's OpenSearch description, an XML template in a `.ts` route.
+    write('app/components/Image.tsx', component('Image', 'img'));
+    write('app/components/Description.tsx', component('Description', 'p'));
+    write('server/routes/opensearch.ts', [
+      'export function opensearchResponse(baseUrl: string): string {',
+      '  return `<?xml version="1.0" encoding="UTF-8"?>',
+      '<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">',
+      '  <Description>Search Outline</Description>',
+      '  <Image width="16" height="16">${baseUrl}/images/favicon-16.png</Image>',
+      '</OpenSearchDescription>`;',
+      '}',
+    ]);
+    // A type assertion names a class component. The regex right after
+    // `if (…)` reads as a division, so the file can't be followed and is read
+    // as it is: only its language says `<Editor>` is no tag.
+    write('app/editor/Editor.tsx', [
+      "import * as React from 'react';",
+      'export class Editor extends React.Component {',
+      '  render() {',
+      '    return <div />;',
+      '  }',
+      '}',
+    ]);
+    write('app/editor/focus.ts', [
+      "import { Editor } from './Editor';",
+      '',
+      'export function focusEditor(view: unknown, closing = "</p>") {',
+      "  if (closing) /'/.test(closing);",
+      '  const editor = <Editor>view;',
+      '  return editor;',
+      '}',
+    ]);
+    await index();
+    expect(renders('opensearchResponse')).toEqual([]);
+    expect(renders('focusEditor')).toEqual([]);
+  });
+
+  it('still renders the tags after an apostrophe, a URL or a backtick in JSX text', async () => {
+    for (const name of ['Link', 'Docs', 'Kbd', 'Field', 'Fake']) write(`app/${name}.tsx`, component(name));
+    write('app/Signup.tsx', [
+      "import { Link } from './Link';",
+      "import { Docs } from './Docs';",
+      "import { Kbd } from './Kbd';",
+      "import { Field } from './Field';",
+      '',
+      'const first = <T,>(items: T[]) => items[0];',
+      "const slug = (s: string) => s.replace(/[`'\"]/g, '').replace(/\\//g, '-');",
+      'const note = `${`nested ${first([1])}`} <Fake />`;',
+      '',
+      'export function Signup() {',
+      '  return (',
+      '    <form title="<Fake /> is not rendered">',
+      '      <p>Don\'t have an account? <Link to="/signup">Sign up</Link></p>',
+      '      <p>Read https://example.com/docs first: <Docs /></p>',
+      '      <p>Press `Ctrl` and <Kbd>K</Kbd></p>',
+      '      <Field label=\'It"s\' />',
+      '    </form>',
+      '  );',
+      '}',
+    ]);
+    await index();
+    expect(renders('Signup')).toEqual(['Docs', 'Field', 'Kbd', 'Link']);
+  });
+});
+
+describe('jsxCode', () => {
+  const TAG = /<([A-Z][A-Za-z0-9_]*)(?=[\s/><])/g;
+  const tags = (code: string) => [...code.matchAll(TAG)].map((m) => m[1]);
+
+  it('blanks comments and literal text, and keeps every offset and line break', () => {
+    const source = [
+      '/** Renders a <Route> in an <Outlet>. */',
+      'export function Page({ items }) {',
+      "  const re = /<Fake\\/>/g, s = 'a <Fake />', t = `<Fake /> ${items.map((i) => <Item key={i} />)}`;",
+      '  return (',
+      '    <Shell title="<Fake />">',
+      "      {/* <Fake /> */} Don't <Link to=\"/x\">go</Link> to https://a.b/c",
+      '    </Shell>',
+      '  );',
+      '}',
+    ].join('\r\n');
+    const code = jsxCode(source)!;
+    expect(code).not.toBeNull();
+    expect(code.length).toBe(source.length);
+    expect([...code].flatMap((c, i) => (c === '\n' || c === '\r' ? [i] : []))).toEqual(
+      [...source].flatMap((c, i) => (c === '\n' || c === '\r' ? [i] : []))
+    );
+    expect(tags(source)).toContain('Fake');
+    expect(tags(code)).toEqual(['Item', 'Shell', 'Link']);
+  });
+
+  it('reads a `<` that opens a type parameter list as an operator', () => {
+    const source = [
+      'type Fn = <T>(x: T) => T;',
+      'interface Call { <T>(x: T): T }',
+      'const first = <T,>(items: T[]) => items[0];',
+      "const Table = <Entry extends Base>({ rows }) => <Grid rows={rows} label='a \"b' />;",
+      'const c = i++ / 2, d = x! < y;',
+    ].join('\n');
+    const code = jsxCode(source)!;
+    expect(code).not.toBeNull();
+    expect(tags(code)).toEqual(['T', 'T', 'Entry', 'Grid']);
+  });
+
+  it('is null for a file it cannot read as one program', () => {
+    expect(jsxCode('const a = <p>a } b</p>;')).toBeNull();
+    expect(jsxCode('function f() {\n  return 1;\n')).toBeNull();
+    expect(jsxCode("const s = 'open\nconst b = 1;")).toBeNull();
+    expect(jsxCode('const a = <A><B></A></B>;')).toBeNull();
+  });
+});
diff --git a/src/resolution/callback-synthesizer.ts b/src/resolution/callback-synthesizer.ts
index 9f2818c7d2..3dc07280d4 100644
--- a/src/resolution/callback-synthesizer.ts
+++ b/src/resolution/callback-synthesizer.ts
@@ -41,6 +41,7 @@ import { enclosingFn, makeLineAt } from './synth-utils';
 import { resolveImportPath } from './import-resolver';
 import { crossesCodeBoundary, jsCodeBindsName } from './name-matcher';
 import { declaredComponent, exportedComponent, lazyValueModules } from './frameworks/react';
+import { jsxCode } from './jsx-code';
 
 const REGISTRAR_NAME = /^(on[A-Z]\w*|subscribe|addListener|addEventListener|register|watch|listen|addCallback)$/;
 const DISPATCHER_NAME = /(emit|trigger|notify|dispatch|fire|publish|flush)/i;
@@ -52,6 +53,8 @@ const EMIT_RE = /\.(?:emit|fire|dispatchEvent)\(\s*['"]([^'"]+)['"]/g;
 const SETSTATE_RE = /this\.setState\s*\(/;
 const FLUTTER_SETSTATE_RE = /\bsetState\s*\(/; // Flutter: setState((){…}) / this.setState
 const JS_FAMILY = ['typescript', 'javascript', 'tsx', 'jsx'];
+/** The languages that can write JSX: not TypeScript's `.ts` files. */
+const JSX_FAMILY = ['tsx', 'jsx', 'javascript'];
 // A tag's name ends at whitespace, `/` or `>`, or at the `<` of the type
 // arguments a generic component's tag passes: `<PaginatedList<Document>
 // items={…} />` renders PaginatedList. The lookahead leaves that `<` to open
@@ -1930,7 +1933,9 @@ function declaredInside(ctx: ResolutionContext, name: string, parent: Node, chil
  * so a render tree (App.render → StaticCanvas → renderStaticScene) breaks at the
  * JSX hop. Link parent → each capitalized JSX child it renders. File-oriented
  * (read each JSX file once). Precision gates: the parent must write the name as
- * a tag, not only in a type argument or parameter list (`useState<User>()`,
+ * a tag in its code, not in a comment, a string or a template (react-router's
+ * "You cannot render a <Router> inside another <Router>"; `jsxCode`), and
+ * not only in a type argument or parameter list (`useState<User>()`,
  * `<Entry extends BaseEntity>(…) =>`; outline's `<PaginatedList<Document>`
  * read its `Document` model class as a child), and the name must resolve to a
  * component/function/class node, or to a value the file declares itself (see
@@ -1966,9 +1971,11 @@ async function reactJsxChildEdges(ctx: ResolutionContext, onYield: MaybeYield):
     const content = ctx.readFile(file);
     if (!content || (!content.includes('</') && !content.includes('/>'))) continue; // JSX-file gate
     // File-level language gate, not merely a project-level one: mixed C/JS
-    // monorepos must not interpret `"<Foo/>"` inside C as JSX (#1560).
+    // monorepos must not interpret `"<Foo/>"` inside C as JSX (#1560). A
+    // TypeScript `.ts` file holds no JSX either: a `<Name>` there is a type
+    // assertion or text, like outline's OpenSearch XML template.
     const parents = ctx.getNodesInFile(file).filter(
-      (n) => PARENT_KINDS.has(n.kind) && JS_FAMILY.includes(n.language)
+      (n) => PARENT_KINDS.has(n.kind) && JSX_FAMILY.includes(n.language)
     );
     if (parents.length === 0) continue;
     // Read once per file, and only when a name actually turns out ambiguous.
@@ -1985,7 +1992,8 @@ async function reactJsxChildEdges(ctx: ResolutionContext, onYield: MaybeYield):
     // the same lines share them: every function of a minified bundle spans
     // its one line, and reading that line again per function took 9 to 25 s
     // over go-ethereum's graphiql.min.js (2,234 functions on 980 KB). The
-    // file is split once, not once per function.
+    // file is split once, not once per function, and read as code once: a
+    // tag in a comment or a string is text (`jsxCode`).
     let lines: string[] | null = null;
     // Each name a span holds, and the line of its first tag: 0 while only type
     // argument or parameter lists name it (`opensTag`). `bare` holds the
@@ -1997,7 +2005,7 @@ async function reactJsxChildEdges(ctx: ResolutionContext, onYield: MaybeYield):
       let names = tagsBySpan.get(span);
       if (!names) {
         names = { tags: new Map<string, number>(), bare: new Set<string>() };
-        lines ??= content.split('\n');
+        lines ??= (jsxCode(content) ?? content).split('\n');
         const src = lines.slice(parent.startLine - 1, parent.endLine).join('\n');
         if (src.includes('</') || src.includes('/>')) {
           let line = parent.startLine;
diff --git a/src/resolution/jsx-code.ts b/src/resolution/jsx-code.ts
new file mode 100644
index 0000000000..32ae05618c
--- /dev/null
+++ b/src/resolution/jsx-code.ts
@@ -0,0 +1,519 @@
+/**
+ * A JavaScript or JSX file's code, for a scan that reads JSX tags off it with a
+ * pattern.
+ *
+ * Text that only mentions a tag renders nothing: a JSDoc example, markup
+ * commented out (`{/* <Progress /> *\/}`), an error message ("You cannot
+ * render a <Router> inside another <Router>"), an attribute's value. So
+ * comments, and the contents of string, template and regex literals and of
+ * JSX attribute strings, are blanked. Every character keeps its offset and
+ * every line break its place, so a match in the result sits at the same line
+ * and column as in the source.
+ *
+ * Inside an element, a quote, a slash or a backtick is text: `<p>Don't have an
+ * account? <Link to="/signup">`, `<a>https://…</a>`. Read as code, that
+ * apostrophe opens a string that blanks the `<Link`. So the lexer follows
+ * elements the way JSX does: one opens where an expression can start, and its
+ * text runs to a tag or a `{`. A `<` that opens a type parameter list in the
+ * same place (`<T,>(x: T) =>`, `type Fn = <T>(x: T) => T`) reads as an element
+ * only until it fails to: the lexer then reads it again as an operator.
+ *
+ * Null when the file does not read as one program that way: a string still
+ * open at the end of its line, a comment, template or element still open at
+ * the end of the file, braces that don't balance, a closing tag that names
+ * another element, or a `</` or `/>` among code. A scan should then read the
+ * source as it is.
+ */
+
+/**
+ * What the lexer reads: code, a template's text, an element's opening tag (its
+ * attributes), or its children (JSX text, tags and `{…}`).
+ */
+type Mode = 'code' | 'template' | 'tag' | 'children';
+
+interface Frame {
+  mode: Mode;
+  /** Code: braces opened in this frame and not closed yet. */
+  braces: number;
+  /** Tag and Children: the element's name, which its closing tag repeats. */
+  name: string;
+}
+
+/** Where an element opened among code: what to undo to read its `<` again. */
+interface Root {
+  at: number;
+  depth: number;
+  blanks: number;
+}
+
+/** Keywords an expression follows: a `<` after one opens an element, a `/` a regex. */
+const BEFORE_EXPRESSION = new Set([
+  'return', 'typeof', 'instanceof', 'in', 'of', 'new', 'delete', 'void', 'throw',
+  'case', 'do', 'else', 'yield', 'await', 'default',
+]);
+
+/** How many elements may fail to read before the file is read as it is. */
+const MAX_REREADS = 64;
+
+const isSpace = (c: number): boolean =>
+  c === 32 || c === 10 || c === 13 || c === 9 || c === 11 || c === 12 || c === 0xa0 || c === 0xfeff;
+const isIdStart = (c: number): boolean =>
+  (c >= 97 && c <= 122) || (c >= 65 && c <= 90) || c === 36 || c === 95 || (c > 127 && !isSpace(c));
+const isIdPart = (c: number): boolean => isIdStart(c) || (c >= 48 && c <= 57);
+/** A JSX name's characters: an identifier's, and the `-`, `.` and `:` between its parts. */
+const isNamePart = (c: number): boolean => isIdPart(c) || c === 45 || c === 46 || c === 58;
+
+function skipSpace(src: string, k: number): number {
+  while (k < src.length && isSpace(src.charCodeAt(k))) k++;
+  return k;
+}
+
+function nameEnd(src: string, k: number): number {
+  while (k < src.length && isNamePart(src.charCodeAt(k))) k++;
+  return k;
+}
+
+function lineEnd(src: string, k: number): number {
+  for (let c = src.charCodeAt(k); k < src.length && c !== 10 && c !== 13; c = src.charCodeAt(++k));
+  return k;
+}
+
+/** The `/` closing the regex literal opened at `start`, or -1 when it doesn't close on its line. */
+function regexEnd(src: string, start: number): number {
+  let inClass = false;
+  for (let k = start + 1; k < src.length; k++) {
+    const c = src.charCodeAt(k);
+    if (c === 10 || c === 13) return -1;
+    if (c === 92) {
+      k++;
+      if (src.charCodeAt(k) === 10 || src.charCodeAt(k) === 13) return -1;
+    } else if (c === 91) inClass = true;
+    else if (c === 93) inClass = false;
+    else if (c === 47 && !inClass) return k;
+  }
+  return -1;
+}
+
+/** The quote closing the string opened at `start`, or -1 when the string doesn't close. */
+function stringEnd(src: string, start: number): number {
+  const quote = src.charCodeAt(start);
+  for (let k = start + 1; k < src.length; k++) {
+    const c = src.charCodeAt(k);
+    if (c === quote) return k;
+    if (c === 92) k += src.charCodeAt(k + 1) === 13 && src.charCodeAt(k + 2) === 10 ? 2 : 1;
+    else if (c === 10 || c === 13) return -1;
+  }
+  return -1;
+}
+
+/** `src` with the ranges (start and end pairs, in order) turned to spaces, line breaks kept. */
+function blankRanges(src: string, blanks: number[]): string {
+  if (blanks.length === 0) return src;
+  const parts: string[] = [];
+  let from = 0;
+  for (let b = 0; b < blanks.length; b += 2) {
+    const start = blanks[b]!;
+    const end = blanks[b + 1]!;
+    if (start < from) continue;
+    parts.push(src.slice(from, start));
+    const text = src.slice(start, end);
+    parts.push(/[\r\n]/.test(text) ? text.replace(/[^\r\n]/g, ' ') : ' '.repeat(end - start));
+    from = end;
+  }
+  parts.push(src.slice(from));
+  return parts.join('');
+}
+
+export function jsxCode(src: string): string | null {
+  return new JsxLexer(src).read();
+}
+
+/**
+ * The lexer's state for one file. Its steps are methods, not closures made
+ * per file: a closure made anew for each file is another call target to the
+ * optimizer, which threw `jsxCode`'s code away and compiled it again for
+ * file after file, at 40 to 90 ms a time (excalidraw's index did it 15 times).
+ */
+class JsxLexer {
+  private readonly n: number;
+  /** Ranges to blank, as start and end pairs, in source order. */
+  private readonly blanks: number[] = [];
+  private readonly stack: Frame[] = [{ mode: 'code', braces: 0, name: '' }];
+  /** The elements opened among code that are still open, innermost last. */
+  private readonly roots: Root[] = [];
+  /** `<`s that failed to read as an element. */
+  private readonly operators = new Set<number>();
+  private i = 0;
+  /** Whether the last token ends an expression: a `<` then compares, a `/` divides. */
+  private exprEnd = false;
+  /** Whether the last token is a `.`, so a keyword is a property's name. */
+  private afterDot = false;
+  private rereads = 0;
+
+  constructor(private readonly src: string) {
+    this.n = src.length;
+  }
+
+  read(): string | null {
+    const budget = 4 * this.n + 65536;
+    let steps = 0;
+    for (;;) {
+      while (this.i < this.n) {
+        if (++steps > budget) return null;
+        const top = this.stack[this.stack.length - 1]!;
+        const c = this.src.charCodeAt(this.i);
+        const ok =
+          top.mode === 'code' ? this.code(top, c)
+          : top.mode === 'template' ? this.template(c)
+          : top.mode === 'tag' ? this.tag(top, c)
+          : this.children(top, c);
+        if (!ok) return null;
+      }
+      if (this.stack.length === 1 && this.stack[0]!.braces === 0) break;
+      if (!this.reread()) return null;
+    }
+    return blankRanges(this.src, this.blanks);
+  }
+
+  private blank(from: number, to: number): void {
+    if (to > from) this.blanks.push(from, Math.min(to, this.n));
+  }
+
+  private codeFrame(): void {
+    this.stack.push({ mode: 'code', braces: 0, name: '' });
+    this.exprEnd = false;
+    this.afterDot = false;
+  }
+
+  /**
+   * Undo back to the innermost element still open among code and read its
+   * `<` again as an operator. False when there is none, or too many have
+   * failed: the file is then read as it is.
+   */
+  private reread(): boolean {
+    const root = this.roots.pop();
+    if (!root || ++this.rereads > MAX_REREADS) return false;
+    this.stack.length = root.depth;
+    this.blanks.length = root.blanks;
+    for (const k of this.operators) if (k > root.at) this.operators.delete(k);
+    this.operators.add(root.at);
+    this.i = root.at;
+    this.exprEnd = false;
+    this.afterDot = false;
+    return true;
+  }
+
+  /** Open the element whose `<` is at `lt`. False when it cannot be one. */
+  private openElement(lt: number): boolean {
+    const src = this.src;
+    if (src.charCodeAt(lt + 1) === 62) {
+      this.stack.push({ mode: 'children', braces: 0, name: '' });
+      this.i = lt + 2;
+      return true;
+    }
+    let k = nameEnd(src, lt + 1);
+    const name = src.slice(lt + 1, k);
+    // `<Entry extends BaseEntity>(…) =>`: a generic arrow function's type parameters.
+    const next = skipSpace(src, k);
+    if (next > k && src.startsWith('extends', next) && isSpace(src.charCodeAt(next + 7))) return false;
+    if (src.charCodeAt(k) === 60) {
+      // `<Select<Option> …>`: the element's type arguments.
+      let depth = 0;
+      const limit = Math.min(this.n, k + 1000);
+      for (; k < limit; k++) {
+        const c = src.charCodeAt(k);
+        if (c === 60) depth++;
+        else if (c === 62 && --depth === 0) break;
+      }
+      if (depth !== 0) return false;
+      k++;
+    }
+    this.stack.push({ mode: 'tag', braces: 0, name });
+    this.i = k;
+    return true;
+  }
+
+  /** Close the innermost element. Closing an element opened among code ends an expression. */
+  private closeElement(): void {
+    this.stack.pop();
+    if (this.stack[this.stack.length - 1]!.mode === 'code') {
+      this.roots.pop();
+      this.exprEnd = true;
+      this.afterDot = false;
+    }
+  }
+
+  /** One step among code. False when the file is given up. */
+  private code(top: Frame, c: number): boolean {
+    const src = this.src;
+    const i = this.i;
+    if (isSpace(c)) {
+      this.i = i + 1;
+      return true;
+    }
+    if (c === 47) {
+      const d = src.charCodeAt(i + 1);
+      if (d === 47) {
+        const end = lineEnd(src, i);
+        this.blank(i, end);
+        this.i = end;
+        return true;
+      }
+      if (d === 42) {
+        const end = src.indexOf('*/', i + 2);
+        if (end === -1) return this.reread();
+        this.blank(i, end + 2);
+        this.i = end + 2;
+        return true;
+      }
+      if (this.exprEnd) {
+        // `/>` among code: an element read as code.
+        if (d === 62) return this.reread();
+        this.i = i + 1;
+        this.exprEnd = false;
+        this.afterDot = false;
+        return true;
+      }
+      const end = regexEnd(src, i);
+      if (end === -1) {
+        this.i = i + 1;
+        return true;
+      }
+      this.blank(i + 1, end);
+      let k = end + 1;
+      while (k < this.n && isIdPart(src.charCodeAt(k))) k++;
+      this.i = k;
+      this.exprEnd = true;
+      this.afterDot = false;
+      return true;
+    }
+    if (c === 34 || c === 39) {
+      const end = stringEnd(src, i);
+      if (end === -1) return this.reread();
+      this.blank(i + 1, end);
+      this.i = end + 1;
+      this.exprEnd = true;
+      this.afterDot = false;
+      return true;
+    }
+    if (c === 96) {
+      this.stack.push({ mode: 'template', braces: 0, name: '' });
+      this.i = i + 1;
+      return true;
+    }
+    if (c === 60) {
+      const d = src.charCodeAt(i + 1);
+      if (!this.exprEnd && (d === 62 || isIdStart(d)) && !this.operators.has(i)) {
+        this.roots.push({ at: i, depth: this.stack.length, blanks: this.blanks.length });
+        return this.openElement(i) || this.reread();
+      }
+      // `</` among code: a closing tag read as code.
+      if (d === 47) return this.reread();
+      this.i = i + (d === 60 || d === 61 ? 2 : 1);
+      this.exprEnd = false;
+      this.afterDot = false;
+      return true;
+    }
+    if (c === 123) {
+      top.braces++;
+      this.i = i + 1;
+      this.exprEnd = false;
+      this.afterDot = false;
+      return true;
+    }
+    if (c === 125) {
+      if (top.braces > 0) {
+        top.braces--;
+        this.i = i + 1;
+        this.exprEnd = false;
+        this.afterDot = false;
+        return true;
+      }
+      if (this.stack.length === 1) return this.reread();
+      // The end of a JSX `{…}` or of a template's `${…}`.
+      this.stack.pop();
+      this.i = i + 1;
+      return true;
+    }
+    if (isIdStart(c)) {
+      let end = i + 1;
+      while (end < this.n && isIdPart(src.charCodeAt(end))) end++;
+      this.exprEnd = this.afterDot || !BEFORE_EXPRESSION.has(src.slice(i, end));
+      this.afterDot = false;
+      this.i = end;
+      return true;
+    }
+    const d = src.charCodeAt(i + 1);
+    if ((c >= 48 && c <= 57) || (c === 46 && d >= 48 && d <= 57)) {
+      let end = i + 1;
+      for (let e = src.charCodeAt(end); end < this.n && (isIdPart(e) || e === 46); e = src.charCodeAt(++end));
+      this.i = end;
+      this.exprEnd = true;
+      this.afterDot = false;
+      return true;
+    }
+    if (c === 46) {
+      if (d === 46 && src.charCodeAt(i + 2) === 46) {
+        this.i = i + 3;
+        this.exprEnd = false;
+        this.afterDot = false;
+      } else {
+        this.i = i + 1;
+        this.exprEnd = false;
+        this.afterDot = true;
+      }
+      return true;
+    }
+    if (c === 41 || c === 93) {
+      this.i = i + 1;
+      this.exprEnd = true;
+      this.afterDot = false;
+      return true;
+    }
+    // `++` and `--` leave the expression where it was, and so does TypeScript's `x!`.
+    if ((c === 43 || c === 45) && d === c) {
+      this.i = i + 2;
+      return true;
+    }
+    if (c === 33 && this.exprEnd && d !== 61) {
+      this.i = i + 1;
+      return true;
+    }
+    if (c === 35 && i === 0 && d === 33) {
+      this.i = lineEnd(src, 0);
+      return true;
+    }
+    this.i = i + 1;
+    this.exprEnd = false;
+    this.afterDot = false;
+    return true;
+  }
+
+  /** One step in a template's text. */
+  private template(c: number): boolean {
+    const src = this.src;
+    const i = this.i;
+    if (c === 96) {
+      this.stack.pop();
+      this.i = i + 1;
+      this.exprEnd = true;
+      this.afterDot = false;
+      return true;
+    }
+    if (c === 92) {
+      this.blank(i, i + 2);
+      this.i = i + 2;
+      return true;
+    }
+    if (c === 36 && src.charCodeAt(i + 1) === 123) {
+      this.codeFrame();
+      this.i = i + 2;
+      return true;
+    }
+    let end = i + 1;
+    for (let e = src.charCodeAt(end); end < this.n && e !== 96 && e !== 92 && e !== 36; e = src.charCodeAt(++end));
+    this.blank(i, end);
+    this.i = end;
+    return true;
+  }
+
+  /** One step in an element's opening tag. False when the file is given up. */
+  private tag(top: Frame, c: number): boolean {
+    const src = this.src;
+    const i = this.i;
+    if (isSpace(c)) {
+      this.i = i + 1;
+      return true;
+    }
+    if (c === 62) {
+      top.mode = 'children';
+      this.i = i + 1;
+      return true;
+    }
+    if (c === 47) {
+      const d = src.charCodeAt(i + 1);
+      if (d === 62) {
+        this.i = i + 2;
+        this.closeElement();
+        return true;
+      }
+      if (d === 47) {
+        const end = lineEnd(src, i);
+        this.blank(i, end);
+        this.i = end;
+        return true;
+      }
+      if (d === 42) {
+        const end = src.indexOf('*/', i + 2);
+        if (end !== -1) {
+          this.blank(i, end + 2);
+          this.i = end + 2;
+          return true;
+        }
+      }
+      return this.reread();
+    }
+    if (c === 123) {
+      this.codeFrame();
+      this.i = i + 1;
+      return true;
+    }
+    if (isIdStart(c)) {
+      const end = nameEnd(src, i + 1);
+      const eq = skipSpace(src, end);
+      if (src.charCodeAt(eq) !== 61) {
+        this.i = end;
+        return true;
+      }
+      const value = skipSpace(src, eq + 1);
+      const q = src.charCodeAt(value);
+      if (q === 34 || q === 39) {
+        // JSX strings have no escapes and may span lines.
+        const close = src.indexOf(q === 34 ? '"' : "'", value + 1);
+        if (close === -1) return this.reread();
+        this.blank(value + 1, close);
+        this.i = close + 1;
+        return true;
+      }
+      if (q === 123) {
+        this.codeFrame();
+        this.i = value + 1;
+        return true;
+      }
+      const next = src.charCodeAt(value + 1);
+      if (q === 60 && (next === 62 || isIdStart(next)) && this.openElement(value)) return true;
+    }
+    return this.reread();
+  }
+
+  /** One step among an element's children. False when the file is given up. */
+  private children(top: Frame, c: number): boolean {
+    const src = this.src;
+    const i = this.i;
+    if (c === 123) {
+      this.codeFrame();
+      this.i = i + 1;
+      return true;
+    }
+    if (c === 60) {
+      const d = src.charCodeAt(i + 1);
+      if (d === 47) {
+        const start = skipSpace(src, i + 2);
+        const end = nameEnd(src, start);
+        const gt = skipSpace(src, end);
+        if (src.charCodeAt(gt) !== 62 || src.slice(start, end) !== top.name) return this.reread();
+        this.i = gt + 1;
+        this.closeElement();
+        return true;
+      }
+      if ((d === 62 || isIdStart(d)) && this.openElement(i)) return true;
+      return this.reread();
+    }
+    // JSX text can't hold a `>` or a `}`: code read as text.
+    if (c === 62 || c === 125) return this.reread();
+    let end = i + 1;
+    for (let e = src.charCodeAt(end); end < this.n && e !== 123 && e !== 60 && e !== 62 && e !== 125; e = src.charCodeAt(++end));
+    this.i = end;
+    return true;
+  }
+}

From 0d41bbe364cbefdca4545b02d52efdf73d6e239c Mon Sep 17 00:00:00 2001
From: Aaron Queen <bompus@users.noreply.github.com>
Date: Wed, 14 Oct 2026 20:09:28 -0600
Subject: [PATCH 4/5] docs: list jsx among value-reference languages; correct
 the parity-test note

---
 docs/design/value-reference-edges-playbook.md | 6 +++---
 docs/design/value-reference-edges.md          | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/design/value-reference-edges-playbook.md b/docs/design/value-reference-edges-playbook.md
index 363d662045..328c6408ea 100644
--- a/docs/design/value-reference-edges-playbook.md
+++ b/docs/design/value-reference-edges-playbook.md
@@ -66,11 +66,11 @@ targets** (see §3).
 
 ## 2. Current state (what's shipped + validated)
 
-- **Default ON** for TS/JS/tsx + Go + Python + Rust + Ruby + C + Java + C# (`CODEGRAPH_VALUE_REFS=0` disables). Shipped in **PR #895**
+- **Default ON** for TS/JS/tsx/jsx + Go + Python + Rust + Ruby + C + Java + C# (`CODEGRAPH_VALUE_REFS=0` disables). Shipped in **PR #895**
   (flip-on + the shadow prune); Go added in a later PR (the shadow-prune declarator switch +
   `VALUE_REF_LANGS`); C added later still (extractor change to emit the nodes + the bare-identifier
   misparse guard); Java + C# after that (field→constant kind switch for the const subset).
-- **Validated S/M/L** in **TS, JS, tsx, Go, Python, Rust, Ruby, C, Java, and C#** — see the matrix in the
+- **Validated S/M/L** in **TS, JS, tsx, jsx, Go, Python, Rust, Ruby, C, Java, and C#** — see the matrix in the
   design doc. All clean: node count identical on/off, precision guards held, impact win
   reproduced. Go required extending the shadow prune (per-grammar declarators) — the worked
   example of "step B is load-bearing." **C required the Ruby treatment** (the extractor didn't emit
@@ -154,7 +154,7 @@ targets** (see §3).
   miss); not worth normalizing.
 - **Tests:** `__tests__/value-reference-edges.test.ts` — same-file readers edged; surfaced in
   impact radius; shadowed const NOT edged (verified to fail without the guard); JSX-only read
-  edged (tsx); `CODEGRAPH_VALUE_REFS=0` emits nothing.
+  edged (tsx and jsx); `CODEGRAPH_VALUE_REFS=0` emits nothing.
 - **Memory:** `value-reference-edges-default-on` (the A/B finding + shadow guard rationale).
 
 ---
diff --git a/docs/design/value-reference-edges.md b/docs/design/value-reference-edges.md
index 75c553fc63..3a6662f2d0 100644
--- a/docs/design/value-reference-edges.md
+++ b/docs/design/value-reference-edges.md
@@ -428,7 +428,7 @@ component had no edge to the lazy page it renders (`<LoginPage />` under
 mastodon and bigbluebutton-html5 the index only gained edges (400 in all, every one a
 same-file read of a file-scope value that is the only binding of its name in the file),
 and a repo with no `.jsx` files indexed byte-identically. Locked by the `.jsx` cases in
-`value-reference-edges.test.ts` (the fork has no parity test, because it has no second parser; the kernel walker in `codegraph-kernel/src/tsjs/fnref.rs` carries the same change).
+`value-reference-edges.test.ts` (the kernel walker in `codegraph-kernel/src/tsjs/fnref.rs` carries the same change; `kernel-generic-extractor-tree.test.ts` compares that walker with the generic extractor, but has no `.jsx` value-reference case of its own).
 
 **Svelte / Vue / Astro are covered for free** — their extractors re-parse the `<script>` /
 frontmatter block as `typescript` / `javascript`, which are in `VALUE_REF_LANGS`, so a `const`

From ca68a8002861c78cfe2aa43be577fc601d6e5fdb Mon Sep 17 00:00:00 2001
From: Aaron Queen <bompus@users.noreply.github.com>
Date: Wed, 14 Oct 2026 20:12:52 -0600
Subject: [PATCH 5/5] docs: keep the original value-reference rollout list;
 note jsx was added later

---
 docs/design/value-reference-edges-playbook.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/design/value-reference-edges-playbook.md b/docs/design/value-reference-edges-playbook.md
index 328c6408ea..f859306d9d 100644
--- a/docs/design/value-reference-edges-playbook.md
+++ b/docs/design/value-reference-edges-playbook.md
@@ -66,10 +66,10 @@ targets** (see §3).
 
 ## 2. Current state (what's shipped + validated)
 
-- **Default ON** for TS/JS/tsx/jsx + Go + Python + Rust + Ruby + C + Java + C# (`CODEGRAPH_VALUE_REFS=0` disables). Shipped in **PR #895**
+- **Default ON** for TS/JS/tsx + Go + Python + Rust + Ruby + C + Java + C# (`CODEGRAPH_VALUE_REFS=0` disables). Shipped in **PR #895**
   (flip-on + the shadow prune); Go added in a later PR (the shadow-prune declarator switch +
   `VALUE_REF_LANGS`); C added later still (extractor change to emit the nodes + the bare-identifier
-  misparse guard); Java + C# after that (field→constant kind switch for the const subset).
+  misparse guard); Java + C# after that (field→constant kind switch for the const subset). `jsx` was added in 2026-10 (it was missing from `VALUE_REF_LANGS`).
 - **Validated S/M/L** in **TS, JS, tsx, jsx, Go, Python, Rust, Ruby, C, Java, and C#** — see the matrix in the
   design doc. All clean: node count identical on/off, precision guards held, impact win
   reproduced. Go required extending the shadow prune (per-grammar declarators) — the worked