diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2866703f24..e72c8b3816 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -553,6 +553,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - React Router routes written as JSX now read `<Route index>` the way route objects do: inside `<Route path="/" element={<Layout />}>`, `<Route index element={<Home />} />` is the page at `/`, and `Layout` counts as the layout of every route nested in it, as does a guard with no path of its own like `<Route element={<RequireAuth />}>`. Before, the index route was never read, so `/` led to the layout itself and a `<Route path="/dashboard">` holding only an index route led to nothing. A route's `element` written on lines of its own, the way Prettier formats a long one, or wrapped in `<Suspense fallback={<Loader />}>`, now links to the page it shows rather than to nothing or to the fallback, and a path written in braces, like `path={"agents"}`, is read like any other. Re-index React projects after upgrading.
 
 - A React Router route whose `lazy` loader picks its page from the module it loads now links to that page: `lazy: async () => { const { TestTab } = await import('./tabs'); return { Component: TestTab }; }`, `const { default: Component } = await import('./pages/Login')`, `import('./reports').then((m) => ({ Component: m.ReportList }))`, `({ Component: (await import('./reports')).ReportPage })`, React Router 7's `lazy: { Component: async () => (await import('./show')).Show }`, and a page the loader shows inside a guard, like `element: <AgeGate><FireworksPage /></AgeGate>`. Before, such a route linked to the module's default export, else its `Component` export, which is a different page or none at all, as with luci-go's tabs loaded from a folder that forwards them. A loader written as a method, `async lazy() { … }`, is now read too, so its route is no longer missing, and a loader that hands React Router only a `loader` no longer makes the module's default export the route's page or the layout of the routes inside it. Re-index React projects after upgrading.
+- A React Router route, or a page loaded with `lazy(() => import(…))`, now links to its page when the folder it loads passes the page on through an import of its own, like `import { UserLayout } from './UserLayout'; export { UserLayout }` or `import Login from './Login'; export default Login`. Before, the folder's `index.ts` was searched for a page declared in it, which it doesn't have, so the route linked nothing. A default export that wraps the page in a call, like `export default withAuth(Page)`, still links neither the wrapper nor a guess. Re-index React projects after upgrading.
+- `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.
 
 
@@ -684,6 +686,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - In `codegraph_explore`, an override that hands off to the method it overrides no longer leads the Flow when the question names only the bare method (`pre_sql_setup`), so the Flow starts at the base method instead.
 - 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.
 
 ## [1.6.2] - 2026-10-03
 
diff --git a/README.md b/README.md
index 80f11258fd..6364e5a439 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ Follow [@getcodegraph](https://x.com/getcodegraph) on X for updates.
 
 ## About this fork
 
-This is **bompus/codegraph**, a fork of [colbymchenry/codegraph](https://github.com/colbymchenry/codegraph). Its default branch, `fork/consolidated`, contains upstream `main` through [`5da4a41d`](https://github.com/colbymchenry/codegraph/commit/5da4a41d) (after v1.6.2) plus the fork's own work, and it takes upstream changes as they land. Changes that suit upstream are also offered there as pull requests.
+This is **bompus/codegraph**, a fork of [colbymchenry/codegraph](https://github.com/colbymchenry/codegraph). Its default branch, `fork/consolidated`, contains upstream `main` through [`d0bb9be5`](https://github.com/colbymchenry/codegraph/commit/d0bb9be5) (after v1.6.2) plus the fork's own work, and it takes upstream changes as they land. Changes that suit upstream are also offered there as pull requests.
 
 The fork publishes no releases. The install scripts, npm package, badges and `codegraph upgrade` further down this page install **upstream's** releases. To run the fork, build it from source (below).
 
diff --git a/__tests__/jsx-child-disambiguation.test.ts b/__tests__/jsx-child-disambiguation.test.ts
index 2ba41b0583..9867cab0f4 100644
--- a/__tests__/jsx-child-disambiguation.test.ts
+++ b/__tests__/jsx-child-disambiguation.test.ts
@@ -509,3 +509,306 @@ export function PostList({ posts }: { posts: IPost[] }) {
     expect(renders('PostList')).toEqual([]);
   });
 });
+
+/**
+ * A tag the file declares itself as a VALUE — a lazily loaded page, a
+ * wrapped component, an alias — is that declaration, whatever else in the
+ * repository shares its name. A value is no component node, so the lookup by
+ * kind used to skip it and take a lone same-named function anywhere: on
+ * codedthemes' mantis (a vite app and a Next.js app in one repository) the
+ * vite app's `RegisterPage` went to the Next.js app's page, and excalidraw's
+ * Next.js example rendered the docs site's `Excalidraw`. Component resolution
+ * keeps the same rule for every other reference to such a name (the last case).
+ */
+describe('JSX child: a value the file declares itself', () => {
+  let dir: string;
+  let cg: any;
+
+  beforeEach(() => {
+    dir = fs.mkdtempSync(path.join(os.tmpdir(), 'jsx-own-'));
+    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, 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();
+  }
+
+  /** `kind name file` of each node a jsx-render edge out of `parent` points at. */
+  const renders = (parent: string): string[] =>
+    cg.db.db
+      .prepare(
+        `SELECT t.kind || ' ' || t.name || ' ' || t.file_path 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);
+
+  const LOADABLE = 'export default function Loadable(Component) {\n  return (props) => <Component {...props} />;\n}\n';
+
+  it('renders the module a lazy value loads, never another app’s same-named page', async () => {
+    write('next/src/app/(auth)/register/page.jsx', 'export default function RegisterPage() {\n  return <div />;\n}\n');
+    write('vite/src/pages/auth/Register.jsx', 'export default function Register() {\n  return <div />;\n}\n');
+    write('vite/src/components/Loadable.jsx', LOADABLE);
+    write(
+      'vite/src/layout/AuthShell.jsx',
+      `import { lazy } from 'react';
+import Loadable from '../components/Loadable';
+
+const RegisterPage = Loadable(lazy(() => import('../pages/auth/Register')));
+
+export function AuthShell() {
+  return <main><RegisterPage /></main>;
+}
+`
+    );
+    await index();
+    expect(renders('AuthShell')).toEqual(['function Register vite/src/pages/auth/Register.jsx']);
+  });
+
+  // `before` is the text in front of the tag in the shell's JSX.
+  const declarationWhenOutOfReach = async (before: string) => {
+    write('next/src/app/(auth)/login/page.jsx', 'export default function LoginPage() {\n  return <div />;\n}\n');
+    write('vite/src/components/Loadable.jsx', LOADABLE);
+    write(
+      'vite/src/layout/AuthShell.jsx',
+      `import { lazy } from 'react';
+import Loadable from '../components/Loadable';
+
+// An import only the app's own build resolves (\`baseUrl\`).
+const LoginPage = Loadable(lazy(() => import('pages/auth/Login')));
+
+export function AuthShell() {
+  return <main>${before}<LoginPage /></main>;
+}
+`
+    );
+    await index();
+    expect(renders('AuthShell')).toEqual(['constant LoginPage vite/src/layout/AuthShell.jsx']);
+  };
+
+  it('renders the declaration itself when the module it loads is out of reach', () => declarationWhenOutOfReach('Sign in: '));
+
+  // Known limit of the fork: `opensTag` skips the whitespace before `<` and reads a word there
+  // as a type or comparison (`count < Max`), so upstream's `Sign in <LoginPage />` is no tag
+  // here. `it.fails` keeps this red-by-design case visible and turns the suite red once fixed.
+  it.fails('renders the declaration itself when a word precedes the tag (upstream fixture)', () => declarationWhenOutOfReach('Sign in '));
+
+  it('reads next/dynamic’s `(await import(…)).default` and a `.then` that picks a named export', async () => {
+    // excalidraw's docs site has a component of the same name.
+    write('dev-docs/src/theme/ReactLiveScope/index.js', 'const Excalidraw = React.forwardRef((props, ref) => <div ref={ref} />);\nexport default { Excalidraw };\n');
+    write('examples/with-nextjs/src/excalidrawWrapper.tsx', 'const ExcalidrawWrapper = () => {\n  return <div />;\n};\nexport default ExcalidrawWrapper;\n');
+    write(
+      'examples/with-nextjs/src/pages/excalidraw-in-pages.tsx',
+      `import dynamic from 'next/dynamic';
+
+const Excalidraw = dynamic(
+  async () => (await import('../excalidrawWrapper')).default,
+  {
+    ssr: false,
+  },
+);
+
+export default function Page() {
+  return <Excalidraw />;
+}
+`
+    );
+    write('a-decoy/line-chart.tsx', 'export function LineChart() {\n  return <svg />;\n}\n');
+    write('charts/line-chart.tsx', 'export function LineChart() {\n  return <svg />;\n}\n');
+    write('charts/index.ts', "export default function Fallback() {\n  return null;\n}\nexport * from './line-chart';\n");
+    write(
+      'dashboard.tsx',
+      `import { lazy } from 'react';
+const LineChart = lazy(() => import('./charts').then((m) => ({ default: m.LineChart })));
+export function Dashboard() {
+  return <LineChart />;
+}
+`
+    );
+    await index();
+    expect(renders('Page')).toEqual(['function ExcalidrawWrapper examples/with-nextjs/src/excalidrawWrapper.tsx']);
+    expect(renders('Dashboard')).toEqual(['function LineChart charts/line-chart.tsx']);
+  });
+
+  it('follows a module that forwards its default export to the component it wraps', async () => {
+    // outline: `scenes/Login/index.ts` forwards `Login.tsx`'s `observer(Login)`.
+    write('a-decoy/Login.tsx', 'export function Login() {\n  return <form />;\n}\n');
+    write(
+      'app/scenes/Login/Login.tsx',
+      "import { observer } from 'mobx-react';\nfunction Login() {\n  return <form />;\n}\n\nexport default observer(Login);\n"
+    );
+    write('app/scenes/Login/index.ts', 'import Login from "./Login";\n\nexport default Login;\n');
+    write(
+      'app/scenes/Shared/index.tsx',
+      `import { lazy } from 'react';
+const Login = lazy(() => import('../Login'));
+export function SharedScene() {
+  return <Login />;
+}
+`
+    );
+    await index();
+    expect(renders('SharedScene')).toEqual(['function Login app/scenes/Login/Login.tsx']);
+  });
+
+  it('renders the function a value wraps, and an alias value itself', async () => {
+    write('a-decoy/portal.tsx', 'export function DialogPortal() {\n  return <div />;\n}\n');
+    write(
+      'app/settings.tsx',
+      `import { observer } from 'mobx-react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const Application = observer(function Application() {
+  return <div />;
+});
+
+function TableViewInner() {
+  return <table />;
+}
+
+const TableView = observer(TableViewInner) as typeof TableViewInner;
+
+export function Settings() {
+  return <DialogPortal><Application /><TableView /></DialogPortal>;
+}
+`
+    );
+    write('a-decoy/table-view.tsx', 'export class TableView {}\n');
+    await index();
+    expect(renders('Settings')).toEqual([
+      'constant DialogPortal app/settings.tsx',
+      'function Application app/settings.tsx',
+      'function TableViewInner app/settings.tsx',
+    ]);
+  });
+
+  it('renders the branch of a conditional that loads lazily, and a wrapper typed past its call or given options', async () => {
+    // SigNoz loads its devtools in development only and memoizes a table body
+    // with a comparator; mastodon types its `forwardRef` with an object type
+    // that keeps the generics.
+    write('a-decoy/AuthZDevModal.tsx', 'export function AuthZDevModal() {\n  return <div />;\n}\n');
+    write('a-decoy/Combobox.tsx', 'export function Combobox() {\n  return <div />;\n}\n');
+    write('a-decoy/MemoizedRows.tsx', 'export function MemoizedRows() {\n  return <div />;\n}\n');
+    write('src/lib/devtools/AuthZDevModal.tsx', 'export function AuthZDevModal() {\n  return <dialog />;\n}\n');
+    write(
+      'src/palette.tsx',
+      `import React, { forwardRef } from 'react';
+
+const IS_DEV = process.env.NODE_ENV === 'development';
+
+const AuthZDevModal = IS_DEV
+  ? React.lazy(() =>
+      import('./lib/devtools/AuthZDevModal').then((m) => ({
+        default: m.AuthZDevModal,
+      })),
+    )
+  : null;
+
+const ComboboxWithRef = <Item extends { id: string }>(
+  props: { items: Item[] },
+  ref: React.ForwardedRef<HTMLInputElement>,
+) => {
+  return <input ref={ref} />;
+};
+
+export const Combobox = forwardRef(ComboboxWithRef) as {
+  <Item extends { id: string }>(props: { items: Item[] }): ReturnType<typeof ComboboxWithRef>;
+  displayName: string;
+};
+
+function Rows({ rows }: { rows: string[] }) {
+  return <ul>{rows.map((row) => <li key={row}>{row}</li>)}</ul>;
+}
+
+const MemoizedRows = React.memo(
+  Rows,
+  (prev, next) => prev.rows === next.rows,
+) as typeof Rows;
+
+export function Palette() {
+  return <div>{AuthZDevModal && <AuthZDevModal />}<Combobox items={[]} /><MemoizedRows rows={[]} /></div>;
+}
+`
+    );
+    await index();
+    expect(renders('Palette')).toEqual([
+      'function AuthZDevModal src/lib/devtools/AuthZDevModal.tsx',
+      'function ComboboxWithRef src/palette.tsx',
+      'function Rows src/palette.tsx',
+    ]);
+  });
+
+  it('renders nothing for a type argument naming the value, nor for an import inside a function it wraps', async () => {
+    write('a-decoy/schema.tsx', 'export function Schema() {\n  return <div />;\n}\n');
+    write('heavy.tsx', 'export default function Heavy() {\n  return <div />;\n}\n');
+    write(
+      'form.tsx',
+      `import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { withFallback } from './fallback';
+
+const Schema = z.object({ name: z.string() });
+type Schema = z.infer<typeof Schema>;
+
+const Dialog = withFallback('Dialog', (props) => {
+  const load = () => import('./heavy');
+  return <div onClick={load} />;
+});
+
+export function Form() {
+  const form = useForm<Schema>();
+  return <form><Dialog /></form>;
+}
+`
+    );
+    write('fallback.tsx', 'export function withFallback(name, render) {\n  return render;\n}\n');
+    await index();
+    expect(renders('Form')).toEqual(['constant Dialog form.tsx']);
+  });
+
+  it('binds a TSX type named like a value the file declares to that file, never another app’s component', async () => {
+    // Component resolution saw the name as a component's and took the only
+    // one in the repository, in another app.
+    write('admin/src/components/User.tsx', 'export function User() {\n  return <div />;\n}\n');
+    write(
+      'web/src/forms/profile-form.tsx',
+      `import { z } from 'zod';
+
+const User = z.object({ name: z.string() });
+type User = z.infer<typeof User>;
+
+export function ProfileForm({ user }: { user: User }) {
+  return <form>{user.name}</form>;
+}
+`
+    );
+    await index();
+    const referenced = cg.db.db
+      .prepare(
+        `SELECT DISTINCT t.file_path AS f FROM edges e
+           JOIN nodes s ON s.id = e.source
+           JOIN nodes t ON t.id = e.target
+          WHERE s.name = 'ProfileForm' AND e.kind = 'references'`
+      )
+      .all()
+      .map((row: any) => row.f);
+    expect(referenced).toEqual(['web/src/forms/profile-form.tsx']);
+  });
+});
diff --git a/__tests__/react-router-barrel-imports.test.ts b/__tests__/react-router-barrel-imports.test.ts
new file mode 100644
index 0000000000..2acd28d1d6
--- /dev/null
+++ b/__tests__/react-router-barrel-imports.test.ts
@@ -0,0 +1,229 @@
+/**
+ * A lazily loaded module that passes on a page it imports
+ * (Arshia76/DigiShop.Frontend): `src/layout/index.ts` does `import {
+ * UserLayout } from './UserLayout'; export { UserLayout }`, so
+ * `lazy: async () => { const { UserLayout } = await import('@/layout');
+ * return { Component: UserLayout }; }` renders `UserLayout`. The barrel
+ * declares no `UserLayout` of its own, and before, its export clause was read
+ * as naming one, so the route linked nothing.
+ */
+import { describe, it, expect, afterAll, afterEach, beforeAll } from 'vitest';
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import { CodeGraph } from '../src';
+
+let root = '';
+let cg: CodeGraph;
+
+const PKG = JSON.stringify({ name: 'shop', private: true, dependencies: { react: '^18', 'react-router': '^7', '@mui/material': '^6' } });
+const TSCONFIG = JSON.stringify({ compilerOptions: { baseUrl: '.', paths: { '@/*': ['./src/*'] } } });
+
+beforeAll(async () => {
+  root = fs.mkdtempSync(path.join(os.tmpdir(), 'cg-rr-barrel-imports-'));
+  const files: Record<string, string> = {
+    'package.json': PKG,
+    'tsconfig.json': TSCONFIG,
+    'src/router.tsx': `import { lazy } from 'react';
+import { createBrowserRouter } from 'react-router';
+
+const Help = lazy(() => import('@/help'));
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    lazy: async () => {
+      const { UserLayout } = await import('@/layout');
+      return { Component: UserLayout };
+    },
+    children: [
+      {
+        index: true,
+        lazy: async () => {
+          const { HomePage } = await import('@/pages');
+          return { Component: HomePage };
+        },
+      },
+      { path: 'login', lazy: () => import('@/auth/login') },
+      { path: 'settings', lazy: () => import('@/settings') },
+      { path: 'help', element: <Help /> },
+      {
+        path: 'tabs',
+        lazy: async () => {
+          const { Tabs } = await import('@/tabs');
+          return { Component: Tabs };
+        },
+      },
+      {
+        path: 'button',
+        lazy: async () => {
+          const { Button } = await import('@/ui');
+          return { Component: Button };
+        },
+      },
+      { path: 'account', lazy: () => import('@/account') },
+    ],
+  },
+  {
+    path: '/admin',
+    lazy: async () => {
+      const { AdminLayout } = await import('@/layout');
+      return { Component: AdminLayout };
+    },
+  },
+]);
+`,
+    // DigiShop's barrel: imports, then one export clause, no semicolons.
+    'src/layout/index.ts': `import { AdminLayout } from './AdminLayout'
+import { UserLayout } from './UserLayout'
+
+export { AdminLayout, UserLayout }
+`,
+    'src/layout/AdminLayout.tsx': 'export function AdminLayout() {\n  return null;\n}\n',
+    'src/layout/UserLayout.tsx': 'export const UserLayout = () => null;\n',
+    // A barrel that imports from another barrel.
+    'src/pages/index.ts': "import { HomePage } from './home';\n\nexport { HomePage };\n",
+    'src/pages/home/index.ts': "export * from './HomePage';\n",
+    'src/pages/home/HomePage.tsx': 'export function HomePage() {\n  return null;\n}\n',
+    // The default export is an imported binding.
+    'src/auth/login/index.ts': "import Login from './Login';\n\nexport default Login;\n",
+    'src/auth/login/Login.tsx': 'export default function Login() {\n  return null;\n}\n',
+    // Renamed to the name React Router reads.
+    'src/settings/index.ts': "import { SettingsPage } from './SettingsPage';\n\nexport { SettingsPage as Component };\n",
+    'src/settings/SettingsPage.tsx': 'export function SettingsPage() {\n  return null;\n}\n',
+    // `React.lazy` reads the default, here an imported binding renamed to it.
+    'src/help/index.ts': "import HelpPage from './HelpPage';\n\nexport { HelpPage as default };\n",
+    'src/help/HelpPage.tsx': 'export default function HelpPage() {\n  return null;\n}\n',
+    // A namespace object is no component.
+    'src/tabs/index.ts': "import * as Tabs from './tabs';\n\nexport { Tabs };\n",
+    'src/tabs/tabs.tsx': 'export function First() {\n  return null;\n}\n',
+    // A package's component is not the project's to link.
+    'src/ui/index.ts': "import { Button } from '@mui/material';\n\nexport { Button };\n",
+    // The default export is a call: no binding the module imports is the page.
+    'src/account/index.ts': "import withAuth from '@/hoc/withAuth';\nimport { AccountPage } from './AccountPage';\n\nexport default withAuth(AccountPage);\n",
+    'src/account/AccountPage.tsx': 'export function AccountPage() {\n  return null;\n}\n',
+    'src/hoc/withAuth.ts': 'export default function withAuth(Component: unknown) {\n  return Component;\n}\n',
+  };
+  for (const [rel, content] of Object.entries(files)) {
+    fs.mkdirSync(path.dirname(path.join(root, rel)), { recursive: true });
+    fs.writeFileSync(path.join(root, rel), content);
+  }
+  cg = await CodeGraph.init(root, { index: true });
+}, 60_000);
+
+afterAll(() => {
+  cg?.close();
+  if (root) fs.rmSync(root, { recursive: true, force: true });
+});
+
+/** What a route's `references` edges reach, as `name@file`: what it renders, or the layouts around it. */
+const bindings = (routeName: string, layout: boolean): string[] => {
+  const route = cg.getNodesByKind('route').find((r) => r.name === routeName);
+  if (!route) return [`no route ${routeName}`];
+  return cg.getOutgoingEdges(route.id)
+    .filter((e) => e.kind === 'references' && Boolean((e.metadata as Record<string, unknown> | undefined)?.layout) === layout)
+    .map((e) => cg.getNode(e.target)!)
+    .map((n) => `${n.name}@${n.filePath}`);
+};
+const renders = (routeName: string): string[] => bindings(routeName, false);
+
+describe('a lazily loaded module that passes on a page it imports', () => {
+  it('renders the page an export clause of imports passes on', () => {
+    expect(renders('/admin')).toEqual(['AdminLayout@src/layout/AdminLayout.tsx']);
+    expect(bindings('/login', true)).toEqual(['UserLayout@src/layout/UserLayout.tsx']);
+  });
+
+  it('follows the import to another barrel', () => {
+    expect(renders('/')).toEqual(['HomePage@src/pages/home/HomePage.tsx']);
+  });
+
+  it('follows a default export that is an imported binding', () => {
+    expect(renders('/login')).toEqual(['Login@src/auth/login/Login.tsx']);
+  });
+
+  it('follows an imported page the module renames to Component', () => {
+    expect(renders('/settings')).toEqual(['SettingsPage@src/settings/SettingsPage.tsx']);
+  });
+
+  it('follows the default a React.lazy value loads', () => {
+    expect(renders('/help')).toEqual(['HelpPage@src/help/HelpPage.tsx']);
+  });
+
+  it('links nothing for a namespace or a package it passes on', () => {
+    expect(renders('/tabs')).toEqual([]);
+    expect(renders('/button')).toEqual([]);
+  });
+
+  it('links no wrapper a default export calls', () => {
+    expect(renders('/account')).toEqual([]);
+  });
+});
+
+describe('sync, for a module that passes on a page it imports', () => {
+  type Files = Record<string, string>;
+  const ROUTER: Files = {
+    'package.json': PKG,
+    'tsconfig.json': TSCONFIG,
+    'src/router.tsx': `import { createBrowserRouter } from 'react-router';
+
+export const router = createBrowserRouter([
+  { path: '/login', lazy: () => import('@/auth/login') },
+]);
+`,
+    'src/auth/login/index.ts': "import Login from './Login';\n\nexport default Login;\n",
+  };
+  const PAGE: Files = { 'src/auth/login/Login.tsx': 'export default function Login() {\n  return null;\n}\n' };
+
+  let dirs: string[] = [];
+  let graphs: CodeGraph[] = [];
+  afterEach(() => {
+    for (const graph of graphs) graph.close();
+    for (const dir of dirs) fs.rmSync(dir, { recursive: true, force: true });
+    graphs = [];
+    dirs = [];
+  });
+
+  const write = (dir: string, files: Files): void => {
+    for (const [rel, content] of Object.entries(files)) {
+      fs.mkdirSync(path.dirname(path.join(dir, rel)), { recursive: true });
+      fs.writeFileSync(path.join(dir, rel), content);
+    }
+  };
+  /** A project of `files`, indexed from scratch in a folder of its own. */
+  const indexed = async (files: Files): Promise<{ dir: string; graph: CodeGraph }> => {
+    const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'cg-rr-barrel-imports-sync-'));
+    dirs.push(dir);
+    write(dir, files);
+    const graph = await CodeGraph.init(dir, { index: true });
+    graphs.push(graph);
+    return { dir, graph };
+  };
+  /** Each route's `references` edges, as `name@file`. */
+  const routeLinks = (graph: CodeGraph): Record<string, string[]> => Object.fromEntries(
+    graph.getNodesByKind('route').map((route) => [route.name, graph.getOutgoingEdges(route.id)
+      .filter((e) => e.kind === 'references')
+      .map((e) => graph.getNode(e.target)!)
+      .map((n) => `${n.name}@${n.filePath}`)
+      .sort()])
+  );
+
+  it('links the page once the module it imports appears', async () => {
+    const { dir, graph } = await indexed(ROUTER);
+    expect(routeLinks(graph)).toEqual({ '/login': [] });
+    write(dir, PAGE);
+    expect((await graph.sync()).filesAdded).toBe(1);
+    expect(routeLinks(graph)).toEqual({ '/login': ['Login@src/auth/login/Login.tsx'] });
+    expect(routeLinks((await indexed({ ...ROUTER, ...PAGE })).graph)).toEqual({ '/login': ['Login@src/auth/login/Login.tsx'] });
+  }, 60_000);
+
+  it('follows the imported page when its default export moves to another component', async () => {
+    const { dir, graph } = await indexed({ ...ROUTER, ...PAGE });
+    expect(routeLinks(graph)).toEqual({ '/login': ['Login@src/auth/login/Login.tsx'] });
+    // The old component stays, so the route's edge would follow it through the re-index.
+    const edit = { 'src/auth/login/Login.tsx': 'export function Login() {\n  return null;\n}\n\nexport default function SignIn() {\n  return null;\n}\n' };
+    write(dir, edit);
+    await graph.sync();
+    expect(routeLinks(graph)).toEqual({ '/login': ['SignIn@src/auth/login/Login.tsx'] });
+    expect(routeLinks((await indexed({ ...ROUTER, ...edit })).graph)).toEqual({ '/login': ['SignIn@src/auth/login/Login.tsx'] });
+  }, 60_000);
+});
diff --git a/__tests__/react-router.test.ts b/__tests__/react-router.test.ts
index be3a4a5801..17bf2bcb96 100644
--- a/__tests__/react-router.test.ts
+++ b/__tests__/react-router.test.ts
@@ -1817,3 +1817,54 @@ describe('react-router: route-table reference persistence', () => {
     }
   });
 });
+
+describe('react-router: a layout the route file loads lazily', () => {
+  let root: string;
+  let cg: CodeGraph;
+  beforeAll(async () => {
+    ({ root, cg } = await indexProject({
+      'package.json': JSON.stringify({ name: 'mantis', private: true }),
+      'vite/package.json': JSON.stringify({ name: 'vite-app', dependencies: { react: '^18', 'react-router-dom': '^7' } }),
+      'vite/src/routes/index.jsx': `import { createBrowserRouter } from 'react-router-dom';
+import MainRoutes from './MainRoutes';
+
+const router = createBrowserRouter([MainRoutes]);
+
+export default router;
+`,
+      'vite/src/routes/MainRoutes.jsx': `import { lazy } from 'react';
+import Loadable from '../components/Loadable';
+
+const MainLayout = Loadable(lazy(() => import('../layout/MainLayout')));
+const Dashboard = Loadable(lazy(() => import('../views/Dashboard')));
+
+const MainRoutes = {
+  path: '/',
+  element: <MainLayout />,
+  children: [
+    {
+      path: 'dashboard',
+      element: <Dashboard />
+    }
+  ]
+};
+
+export default MainRoutes;
+`,
+      'vite/src/layout/MainLayout/index.jsx': 'export default function Layout() {\n  return <main />;\n}\n',
+      'vite/src/views/Dashboard.jsx': 'export default function Dashboard() {\n  return <div />;\n}\n',
+      'vite/src/components/Loadable.jsx': 'export default function Loadable(Component) {\n  return (props) => <Component {...props} />;\n}\n',
+      // The repository's other app, with a layout of the same name.
+      'next/package.json': JSON.stringify({ name: 'next-app', dependencies: { next: '^15', react: '^18' } }),
+      'next/src/layout/MainLayout.jsx': 'export default function MainLayout({ children }) {\n  return <main>{children}</main>;\n}\n',
+    }));
+  });
+  afterAll(() => {
+    cg?.close();
+    if (root) fs.rmSync(root, { recursive: true, force: true });
+  });
+
+  it('binds the layout to the module the route file loads, never to a same-named layout of another app', () => {
+    expect(routeBindings(cg)).toEqual(['/ -> Layout', '/dashboard -> Dashboard', '/dashboard ~> Layout']);
+  });
+});
diff --git a/__tests__/sync-lazy-route-value.test.ts b/__tests__/sync-lazy-route-value.test.ts
index 1bf6204738..4cb2f563b1 100644
--- a/__tests__/sync-lazy-route-value.test.ts
+++ b/__tests__/sync-lazy-route-value.test.ts
@@ -168,7 +168,8 @@ describe('sync redraws a route that renders a same-file lazy value when its modu
       // module it loads leads to it.
       '/docs': ['src/pages/Docs.tsx::DocsPage'],
     });
-    expect(renders(cg!)).toEqual(['App -> src/pages/Team.tsx::Team']);
+    // A tag naming a lazy value renders the page that value loads, named like it or not.
+    expect(renders(cg!)).toEqual(['App -> src/pages/Docs.tsx::DocsPage', 'App -> src/pages/Team.tsx::Team']);
     expect(cg!.getPendingReferenceCount()).toBe(0);
     expect(graphOf(cg!)).toEqual(await freshGraph(files));
   }, 60_000);
diff --git a/__tests__/sync-nested-barrel-route.test.ts b/__tests__/sync-nested-barrel-route.test.ts
new file mode 100644
index 0000000000..a9b3e95145
--- /dev/null
+++ b/__tests__/sync-nested-barrel-route.test.ts
@@ -0,0 +1,132 @@
+/**
+ * A lazy route whose module is a barrel, and whose page sits in a folder below
+ * the barrel's (DigiShop.Frontend: `@/pages` is `src/pages/index.ts`, which
+ * imports `./Home`, which is `src/pages/Home/index.tsx`). While the page is
+ * missing the route's reference fails, and it waits under the key of the
+ * module it names, `module:pages`. A file in `src/pages/Home/` gives its own
+ * folder's and stem's keys, so `codegraph sync` never revisited the route when
+ * the page appeared, though a fresh index links it.
+ */
+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';
+
+type Files = Record<string, string | null>;
+
+const ROUTER: Files = {
+  'package.json': JSON.stringify({ name: 'shop', private: true, dependencies: { react: '^18', 'react-router': '^7' } }),
+  'tsconfig.json': JSON.stringify({ compilerOptions: { baseUrl: '.', paths: { '@/*': ['./src/*'] } } }),
+  'src/router.tsx': `import { createBrowserRouter } from 'react-router';
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    lazy: async () => {
+      const { HomePage } = await import('@/pages');
+      return { Component: HomePage };
+    },
+  },
+  {
+    path: '/cart',
+    lazy: async () => {
+      const { CartPage } = await import('@/shop');
+      return { Component: CartPage };
+    },
+  },
+  { path: '/admin', lazy: () => import('@/admin') },
+]);
+`,
+  // \`export … from\` into a folder below.
+  'src/pages/index.ts': "export * from './home';\n",
+  'src/pages/home/index.ts': "export { HomePage } from './HomePage';\n",
+  // An import the barrel exports again.
+  'src/shop/index.ts': "import { CartPage } from './cart';\n\nexport { CartPage };\n",
+  // Two barrels below the one the route loads.
+  'src/admin/index.ts': "export * from './dashboard';\n",
+  'src/admin/dashboard/index.ts': "export * from './panel';\n",
+  'src/admin/dashboard/panel/index.ts': "export * from './Dashboard';\n",
+};
+
+const PAGES: Files = {
+  'src/pages/home/HomePage.tsx': 'export function HomePage() {\n  return null;\n}\n',
+  'src/shop/cart/index.tsx': 'export function CartPage() {\n  return null;\n}\n',
+  'src/admin/dashboard/panel/Dashboard.tsx': 'export function Component() {\n  return null;\n}\n',
+};
+
+const LINKED = {
+  '/': ['HomePage@src/pages/home/HomePage.tsx'],
+  '/cart': ['CartPage@src/shop/cart/index.tsx'],
+  '/admin': ['Component@src/admin/dashboard/panel/Dashboard.tsx'],
+};
+
+let dirs: string[] = [];
+let graphs: CodeGraph[] = [];
+afterEach(() => {
+  for (const graph of graphs) graph.close();
+  for (const dir of dirs) fs.rmSync(dir, { recursive: true, force: true });
+  graphs = [];
+  dirs = [];
+});
+
+const write = (dir: string, files: Files): void => {
+  for (const [rel, content] of Object.entries(files)) {
+    const file = path.join(dir, rel);
+    if (content === null) {
+      fs.rmSync(file, { force: true });
+      continue;
+    }
+    fs.mkdirSync(path.dirname(file), { recursive: true });
+    fs.writeFileSync(file, content);
+  }
+};
+/** A project of `files`, indexed from scratch in a folder of its own. */
+const indexed = async (files: Files): Promise<{ dir: string; graph: CodeGraph }> => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'cg-sync-nested-barrel-'));
+  dirs.push(dir);
+  write(dir, files);
+  const graph = await CodeGraph.init(dir, { index: true });
+  graphs.push(graph);
+  return { dir, graph };
+};
+/** Each route's `references` edges, as `name@file`. */
+const routeLinks = (graph: CodeGraph): Record<string, string[]> => Object.fromEntries(
+  graph.getNodesByKind('route').map((route) => [route.name, graph.getOutgoingEdges(route.id)
+    .filter((e) => e.kind === 'references')
+    .map((e) => graph.getNode(e.target)!)
+    .map((n) => `${n.name}@${n.filePath}`)
+    .sort()])
+);
+const NONE = { '/': [], '/cart': [], '/admin': [] };
+
+describe('sync, for a lazy route whose page sits below its barrel', () => {
+  it('links each page once it appears', async () => {
+    const { dir, graph } = await indexed(ROUTER);
+    expect(routeLinks(graph)).toEqual(NONE);
+    write(dir, PAGES);
+    expect((await graph.sync()).filesAdded).toBe(3);
+    expect(routeLinks(graph)).toEqual(LINKED);
+    expect(routeLinks((await indexed({ ...ROUTER, ...PAGES })).graph)).toEqual(LINKED);
+  }, 60_000);
+
+  it('links each page once an edit gives it the export', async () => {
+    const placeholders = Object.fromEntries(Object.keys(PAGES).map((file) => [file, 'export const placeholder = 1;\n']));
+    const { dir, graph } = await indexed({ ...ROUTER, ...placeholders });
+    expect(routeLinks(graph)).toEqual(NONE);
+    write(dir, PAGES);
+    expect((await graph.sync()).filesModified).toBe(3);
+    expect(routeLinks(graph)).toEqual(LINKED);
+  }, 60_000);
+
+  it('links a page again after it is deleted and comes back', async () => {
+    const { dir, graph } = await indexed({ ...ROUTER, ...PAGES });
+    expect(routeLinks(graph)).toEqual(LINKED);
+    write(dir, Object.fromEntries(Object.keys(PAGES).map((file) => [file, null])));
+    await graph.sync();
+    expect(routeLinks(graph)).toEqual(NONE);
+    write(dir, PAGES);
+    await graph.sync();
+    expect(routeLinks(graph)).toEqual(LINKED);
+  }, 60_000);
+});
diff --git a/docs/design/framework-coverage.md b/docs/design/framework-coverage.md
index 3594a1daad..7b7801a004 100644
--- a/docs/design/framework-coverage.md
+++ b/docs/design/framework-coverage.md
@@ -38,7 +38,7 @@ arms disagree unresolved rather than guessed.
 |---|---|---|---|---|
 | Expo Router | `frameworks/expo-router.ts` | `expo-router-synthesizer.ts` | `expo-router.test.ts`, `monorepo-app-frameworks.test.ts`, `monorepo-app-frameworks-sync.test.ts` | upstream: evanbacon.dev (`+api` endpoints), react-native-true-sheet (nearest manifest decides the app) |
 | Next.js | `frameworks/nextjs.ts` | `next-router-synthesizer.ts` | `nextjs.test.ts` | next-saas-starter |
-| React Router / Remix | `frameworks/react-router.ts` | `react-router-synthesizer.ts` | `react-router.test.ts`, `react-router-framework.test.ts`, `remix-routes.test.ts` | proshop (44 edges), proshop-v2 (28), react-redux-realworld (22), react-boilerplate (`styled(Link)`), takenote (v5 `<Redirect>`); pinned official framework config and flat filenames; bulletproof-react: nested children, lazy routes and paths.x.path constants through per-app aliases; paths.x.getHref() links and navigate calls read literal or template destinations; upstream route-table and JSX index/layout regressions cover imported route tables, nested layouts and index pages; fork recheck: 11 navigates on bulletproof-react `9506629` (2026-10-01), all destinations checked against config and route registrations. Lazy loaders that pick their page (`lazyRouteReference` in `frameworks/react.ts`, trap 18): milo/ui's three tabs (`const { TestTab } = await import('…/tabs')`), 20 apps from a GitHub survey of `createBrowserRouter` + `lazy` (636 picked-page edges, each checked against the target file's own export: 467 by name, 169 as its `export default`; 42 routes written with `async lazy()` now indexed, among them React Router's own `lazy-loading-router-provider` example), an AST oracle on the TypeScript compiler agreeing with the text reader on all 2,538 loaders of 876 surveyed router files, a late-file sync equal to a fresh index on 8 of those apps, and 26 control repos byte-identical, among them ghostfolio, whose 30 Angular lazy routes stay Angular's with React detected in the same project |
+| React Router / Remix | `frameworks/react-router.ts` | `react-router-synthesizer.ts` | `react-router.test.ts`, `react-router-framework.test.ts`, `remix-routes.test.ts` | proshop (44 edges), proshop-v2 (28), react-redux-realworld (22), react-boilerplate (`styled(Link)`), takenote (v5 `<Redirect>`); pinned official framework config and flat filenames; bulletproof-react: nested children, lazy routes and paths.x.path constants through per-app aliases; paths.x.getHref() links and navigate calls read literal or template destinations; upstream route-table and JSX index/layout regressions cover imported route tables, nested layouts and index pages; fork recheck: 11 navigates on bulletproof-react `9506629` (2026-10-01), all destinations checked against config and route registrations. Lazy loaders that pick their page (`lazyRouteReference` in `frameworks/react.ts`, trap 18): milo/ui's three tabs (`const { TestTab } = await import('…/tabs')`), 20 apps from a GitHub survey of `createBrowserRouter` + `lazy` (636 picked-page edges, each checked against the target file's own export: 467 by name, 169 as its `export default`; 42 routes written with `async lazy()` now indexed, among them React Router's own `lazy-loading-router-provider` example), an AST oracle on the TypeScript compiler agreeing with the text reader on all 2,538 loaders of 876 surveyed router files, a late-file sync equal to a fresh index on 8 of those apps, and 26 control repos byte-identical, among them ghostfolio, whose 30 Angular lazy routes stay Angular's with React detected in the same project Barrels that pass on a page they import (`import { UserLayout } from './UserLayout'; export { UserLayout }`, `import Login from './Login'; export default Login`): `exportedComponent` follows the import, reading the export from binding rows; upstream: Arshia76/DigiShop.Frontend (0 → 27 route and layout edges), 49 other repos byte-identical; `export default withAuth(Page)` is followed nowhere. A page in a folder below the barrel (`pages/Home/index.tsx` behind `@/pages`) whose route failed waits under the barrel's module key: a sync that adds the page, or gives it a definition, re-opens it (`reopenReferencesThroughBarrels` in `resolution/module-importers.ts`; upstream: a late-file sync on DigiShop equals a fresh index). A name the route file declares itself (trap 19) binds to what that declaration renders in routes, layouts and JSX alike; upstream: outline (+31 edges), mastodon (+20), SigNoz (+7), excalidraw (+3), bulletproof-react (+6), with matx, mantis, proshop, next-saas-starter and berry byte-identical |
 | TanStack Router / Start | `frameworks/tanstack-router.ts` | `tanstack-router-synthesizer.ts` | `tanstack-router.test.ts`, `tanstack-start.test.ts` | TanStack examples, fastapi-template frontend; pinned Start server-handler syntax |
 | Vue Router / Nuxt | `frameworks/vue-router.ts` (Nuxt file routes: `nuxtResolver` in `frameworks/vue.ts`) | `vue-router-synthesizer.ts` | `vue-router.test.ts` | vue-realworld (23 edges); vue-element-admin (62 routes), vue-admin-template (14), vben (192), halo console (34) — named tables, module files, `children` + layouts; Nuxt: mealie, elk, nuxt/movies |
 | SvelteKit | `frameworks/sveltekit-router.ts` | `sveltekit-synthesizer.ts` | `sveltekit-router.test.ts`, `sveltekit-route-names.test.ts` | sveltekit-realworld (31 edges); shadcn-svelte and skeleton (`(group)` layouts: 13 and 23 edges), svelte.dev (74), kit's test apps (47) |
@@ -478,6 +478,13 @@ Each of these cost real debugging time; they are not hypothetical.
    route's reference back for its resolution sweep. The same holds for the
    JSX a component renders: a sync that adds a component redraws the
    `jsx-render` edges, since a tag in a file it never touched may name it.
+   A route whose reference FAILED waits under the key of the module it names
+   (`module:pages` for `@/pages`), and a page in a folder below that barrel
+   (`pages/Home/index.tsx`) gives only its own folder's and stem's keys. So a
+   sync that adds a file, or gives one a definition, walks up the import
+   edges to the barrels that pass it on and re-opens what waits under their
+   keys (`reopenReferencesThroughBarrels`, after the failed-ref retry made the
+   barrel's import edge into the added file).
 18. **A lazy loader is code, and its page is what it hands over.** A React
    Router `lazy` resolves to the route's properties, so `const { TestTab } =
    await import('./tabs'); return { Component: TestTab }` renders `TestTab`,
@@ -492,6 +499,33 @@ Each of these cost real debugging time; they are not hypothetical.
    answers only references a React route makes (`isReactRouteRef`: tsx or jsx,
    which Vue's and Angular's route references never are), or it takes theirs
    first, as an Angular app with React in a `package.json` would let it.
+19. **A name a file declares is that declaration, wherever the file uses it.**
+   JavaScript scoping makes `<RegisterPage />`, a route's `element:
+   <RegisterPage />`, a `layout:` and a TSX type all the `const` the file
+   declares under that name, so every one of them asks `declaredComponent`
+   first (Pattern 1 of `reactResolver.resolve` for any PascalCase reference in
+   a `.tsx` or `.jsx` file, `layoutComponent`, and the `jsx-render`
+   synthesizer's `jsxChild`), and the
+   lookup by name runs only for a file that declares no such value. A value is
+   no component node: the lookup by kind skipped it and took a lone
+   same-named component anywhere, so mantis's vite app rendered its Next.js
+   app's `RegisterPage`. What the value renders is read from its initializer
+   (`valueLoader`, by `loaderValue`): the module a lazy loader loads or the
+   export it picks, in either branch of a conditional (SigNoz's `IS_DEV ?
+   React.lazy(…) : null`); the function it wraps (`observer(function
+   Settings() {…})`, SigNoz's `React.memo(TableBody, areEqual)`, mastodon's
+   `forwardRef(ComboboxWithRef) as {…}`); else the
+   declaration itself (`const DialogPortal = DialogPrimitive.Portal`,
+   `createContext(…)`). A module whose default export is `observer(Login)`
+   hands over `Login` (`defaultExportedName`); whether a module's default
+   export is a binding it imports (`export default Page;`) is read from its
+   binding rows. A tag's edge depends on the modules the file's lazy values
+   load; the fork re-runs synthesis on every sync that changes a file, so a
+   sync that gives one its default export redraws the tag, as a fresh index
+   would draw it. Known limit: TypeScript keeps types and values in separate
+   namespaces, but the resolver does not, so a `.tsx` type reference to a name
+   the file also declares as a lazy value (`type User = …; const User =
+   lazy(…)`) binds to the loaded page, not to the type.
 
 ---
 
diff --git a/src/codegraph.ts b/src/codegraph.ts
index 7dfb0da5c7..f7b58e2d6a 100644
--- a/src/codegraph.ts
+++ b/src/codegraph.ts
@@ -67,7 +67,7 @@ import { CodeGraphPackageVersion } from './mcp/version';
 import { extractSegmentSearchWords, segmentLookupVariants, splitIdentifierSegments } from './search/identifier-segments';
 import { seedLiteralsInQuery, seedRouteNamesInQuery } from './extraction/literal-capture';
 import { createYielder } from './resolution/cooperative-yield';
-import { createImportReader, reopenReferencesThroughAddedFiles } from './resolution/module-importers';
+import { createImportReader, reopenReferencesThroughAddedFiles, reopenReferencesThroughBarrels } from './resolution/module-importers';
 import { minRefsForPool } from './resolution/resolver-pool';
 
 /** The extraction, resolution and watcher modules, loaded on first use. */
@@ -1127,18 +1127,40 @@ export class CodeGraph {
             // it bound by name in its absence, or failed, goes back to pending
             // for the sweep below, which binds it through the module as a fresh
             // index does. (The removal half runs before removed files are deleted.)
-            if (result.addedFilePaths && result.addedFilePaths.length > 0) {
+            const importReader = createImportReader(this.projectRoot, this.queries);
+            const added = (result.addedFilePaths ?? []).flatMap((filePath) => {
+              const file = this.queries.getFileByPath(filePath);
+              return file ? [{ path: filePath, language: file.language }] : [];
+            });
+            if (added.length > 0) {
               const tAdded = Date.now();
-              const added = result.addedFilePaths.flatMap((filePath) => {
-                const file = this.queries.getFileByPath(filePath);
-                return file ? [{ path: filePath, language: file.language }] : [];
-              });
               const reopened = reopenReferencesThroughAddedFiles(
-                this.queries, createImportReader(this.projectRoot, this.queries), added, edgesBeforeResolution,
+                this.queries, importReader, added, edgesBeforeResolution,
                 (specifier, fromFile, language) => this.resolver.resolveModuleFile(specifier, fromFile, language)
               );
               if (process.env.CODEGRAPH_SYNTH_TIMINGS) console.error(`[phase-timing] sync-added-module-importers: ${Date.now() - tAdded}ms (${reopened} refs re-opened)`);
             }
+
+            // A failed reference that waits for a module through a barrel —
+            // React Router's `import:@/pages#HomePage`, parked under
+            // `module:pages` — waits for a file below the barrel too
+            // (`pages/Home/index.tsx`), whose own keys name its folder and
+            // stem. Those parked under the keys of the barrels that pass on a
+            // file this sync adds, or one whose definitions it changed, go
+            // back to pending for the sweep; a body-only edit satisfies none.
+            const tBarrels = Date.now();
+            const delta = new Set(result.definitionDelta ?? []);
+            const seeds = new Map<string, Language>(added.map((file) => [file.path, file.language]));
+            const modified = (result.changedFilePaths ?? []).filter((filePath) => !seeds.has(filePath));
+            if (delta.size > 0 && modified.length > 0) {
+              for (const node of this.queries.getNodesByFiles(modified)) {
+                if (delta.has(node.name)) seeds.set(node.filePath, node.language);
+              }
+            }
+            const throughBarrels = reopenReferencesThroughBarrels(
+              this.queries, importReader, [...seeds].map(([path, language]) => ({ path, language }))
+            );
+            if (process.env.CODEGRAPH_SYNTH_TIMINGS) console.error(`[phase-timing] sync-barrel-modules: ${Date.now() - tBarrels}ms (${throughBarrels} refs re-opened)`);
           } else {
             // No git info — use batched resolution to avoid OOM
             const unresolvedCount = this.queries.getUnresolvedReferencesCount();
diff --git a/src/db/queries.ts b/src/db/queries.ts
index 0d6c03abed..d2231d93fa 100644
--- a/src/db/queries.ts
+++ b/src/db/queries.ts
@@ -4462,6 +4462,18 @@ export class QueryBuilder {
     }));
   }
 
+  /**
+   * The keys failed references wait for a module under (`module:pages`), each
+   * once. Reads only the failed rows parked under such keys: a range of
+   * idx_unresolved_failed_tail, or the whole of
+   * idx_unresolved_failed_module_name.
+   */
+  getFailedModuleKeys(): string[] {
+    return (this.db
+      .prepare(`SELECT DISTINCT name_tail AS key FROM unresolved_refs WHERE status = 'failed' AND name_tail GLOB 'module:*'`)
+      .all() as Array<{ key: string }>).map((row) => row.key);
+  }
+
   /**
    * Put failed refs back in the pending set, for the next resolution pass —
    * the sync's orphan sweep — to try again. Returns the number re-opened.
diff --git a/src/resolution/callback-synthesizer.ts b/src/resolution/callback-synthesizer.ts
index 7e2d5e8c4c..89c7950e89 100644
--- a/src/resolution/callback-synthesizer.ts
+++ b/src/resolution/callback-synthesizer.ts
@@ -44,6 +44,7 @@ import { rnModuleMethods } from './frameworks/react-native';
 import { resolveImportPath } from './import-resolver';
 import { isDistinctiveIdentifier } from '../search/query-utils';
 import { crossesCodeBoundary, innermostBinding } from './gates';
+import { declaredComponent } 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;
@@ -2103,13 +2104,24 @@ function importedFromPackage(ctx: ResolutionContext, name: string, file: string)
  * 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.
+ *
+ * A value the file declares under the name comes first of all: `const Chart =
+ * lazy(() => import('./Chart'))` renders the component that module exports,
+ * `observer(function Settings() {…})` the function it wraps, and anything
+ * else the declaration itself (`declaredComponent`). Kind alone left it out —
+ * a value is no component node — so a lone function of that name anywhere
+ * won: mantis's vite app rendered the `RegisterPage` of the repository's
+ * Next.js app.
  */
 function jsxChild(
   ctx: ResolutionContext,
   name: string,
   file: string,
-  importsOf: () => Map<string, string>
+  importsOf: () => Map<string, string>,
+  ownValueOf: (name: string) => ReturnType<typeof declaredComponent>
 ): Node | undefined {
+  const own = ownValueOf(name);
+  if (own) return own.component ?? own.declaration;
   const candidates = ctx.getNodesByName(name).filter((n) => JSX_CHILD_KINDS.has(n.kind));
   const local = candidates.find((n) => n.filePath === file);
   if (local) return local;
@@ -2206,7 +2218,8 @@ function declaredInside(ctx: ResolutionContext, name: string, parent: Node, chil
  * a tag, 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. A name the parent binds itself by its first
+ * component/function/class node, or to a value the file declares itself (see
+ * `jsxChild`). A name the parent binds itself by its first
  * tag — a parameter, or a `const` like outline's `const Content = variant ===
  * "dropdown" ? DropdownMenu.SubContent : ContextMenu.SubContent` — is that
  * local, and renders only a component declared inside the parent
@@ -2238,6 +2251,12 @@ async function reactJsxChildEdges(ctx: ResolutionContext, onYield: MaybeYield):
     let imports: Map<string, string> | null = null;
     const importsOf = () =>
       (imports ??= importedFrom(ctx, file, parents[0]!.language));
+    // Once per file and name: the value the file declares under it, if any.
+    const ownValues = new Map<string, ReturnType<typeof declaredComponent>>();
+    const ownValueOf = (name: string) => {
+      if (!ownValues.has(name)) ownValues.set(name, declaredComponent(name, file, ctx));
+      return ownValues.get(name);
+    };
     // A function renders the tags its own lines hold, so functions that span
     // 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
@@ -2274,7 +2293,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);
+        let child = jsxChild(ctx, name, file, importsOf, ownValueOf);
         // A name the parent binds itself by its first tag is that local.
         if (child && names.bare.has(name) && jsxParentBindsName(name, parent, line, ctx)) {
           child = declaredInside(ctx, name, parent, child);
diff --git a/src/resolution/frameworks/react.ts b/src/resolution/frameworks/react.ts
index 953dcf1e19..96ae99c302 100644
--- a/src/resolution/frameworks/react.ts
+++ b/src/resolution/frameworks/react.ts
@@ -5,7 +5,7 @@
  * Next.js pages, route handlers and navigation are `nextjs.ts`'s.
  */
 
-import { Language, Node } from '../../types';
+import { Binding, Language, Node } from '../../types';
 import { FrameworkExtractionResult, FrameworkResolver, UnresolvedRef, ResolvedRef, ResolutionContext } from '../types';
 import { dependsOn } from './package-deps';
 import { detectLanguage } from '../../extraction/grammars';
@@ -87,15 +87,15 @@ export const reactResolver: FrameworkResolver = {
       isPascalCase(ref.referenceName) &&
       !isBuiltInType(ref.referenceName)
     ) {
-      // What a route renders, when its own file declares it: the module a
-      // `const RegisterPage = Loadable(lazy(() => import('pages/auth/Register')))`
-      // loads, or else that declaration, which name matching binds — never a
-      // same-named component in another app of the repository.
-      if (ref.fromNodeId.startsWith(`route:${ref.filePath}:`)) {
-        const own = declaredComponent(ref.referenceName, ref.filePath, context);
-        if (own !== undefined) {
-          return own ? { original: ref, targetNodeId: own, confidence: 0.9, resolvedBy: 'framework' } : null;
-        }
+      // A name the file declares itself is that declaration, whatever refers
+      // to it — a route's `element`, a page's default export, a type: the
+      // module a `const RegisterPage = Loadable(lazy(() =>
+      // import('pages/auth/Register')))` loads, the function a value wraps, or
+      // else the declaration, which name matching binds — never a same-named
+      // component in another app of the repository.
+      const own = declaredComponent(ref.referenceName, ref.filePath, context);
+      if (own) {
+        return own.component ? { original: ref, targetNodeId: own.component.id, confidence: 0.9, resolvedBy: 'framework' } : null;
       }
       const result = resolveComponent(ref.referenceName, ref.filePath, context);
       if (result) {
@@ -223,9 +223,9 @@ export const reactResolver: FrameworkResolver = {
   /**
    * The modules a route's answer is read from: a lazily loaded page or layout
    * (`lazy-import:` references, and `import:…#…` for the export a loader
-   * picks), or the one a same-file lazy value the route renders loads — the
-   * references Pattern 1 asks `declaredComponent` about — with the modules a
-   * barrel there forwards the lookup to.
+   * picks), or the one a same-file lazy value the route renders, or renders
+   * inside, loads (`declaredComponent`) — with the modules a barrel there
+   * forwards the lookup to.
    */
   lazyModules(ref: UnresolvedRef, context: ResolutionContext): readonly string[] {
     const name = ref.referenceName;
@@ -238,8 +238,17 @@ export const reactResolver: FrameworkResolver = {
     let spec: string | null | undefined;
     if (name.startsWith(LAZY_ROUTE_PREFIX)) spec = name.slice(LAZY_ROUTE_PREFIX.length);
     else if (name.startsWith(LAYOUT_PREFIX + LAZY_ROUTE_PREFIX)) spec = name.slice(LAYOUT_PREFIX.length + LAZY_ROUTE_PREFIX.length);
-    else if ((ref.language === 'tsx' || ref.language === 'jsx') && isPascalCase(name) && !isBuiltInType(name) &&
-      ref.fromNodeId.startsWith(`route:${ref.filePath}:`)) spec = declaredLoader(name, ref.filePath, context);
+    else if (isReactRouteRef(ref)) {
+      // A page or layout the route file declares as a value it loads lazily.
+      const own = name.startsWith(LAYOUT_PREFIX) ? name.slice(LAYOUT_PREFIX.length) : name;
+      const loaded = isPascalCase(own) && !isBuiltInType(own) ? declaredLoader(own, ref.filePath, context) : undefined;
+      if (loaded && loaded.member !== 'default') {
+        const reads = new Set<string>();
+        pickedExport(loaded.spec, loaded.member, ref.filePath, context, reads);
+        return [...reads];
+      }
+      spec = loaded?.spec;
+    }
     return spec ? lazyRouteFiles(spec, ref.filePath, context) : [];
   },
 };
@@ -469,9 +478,15 @@ function readObjectPath(text: string, at: number, keys: string[]): string | null
   return null;
 }
 
-/** The file a route's lazily loaded module is, from the file that loads it. */
+/**
+ * The file a lazily loaded module is, from the file that loads it: by the
+ * extensions that file's own imports resolve with (`./MainLayout` is
+ * `MainLayout/index.jsx` from a `.jsx` file), else by TypeScript's.
+ */
 function lazyModuleFile(spec: string, fromFile: string, context: ResolutionContext): string | null {
-  return resolveImportPath(spec, fromFile, 'typescript', context);
+  const language = scriptLanguage(fromFile);
+  return resolveImportPath(spec, fromFile, language, context) ??
+    (language === 'typescript' ? null : resolveImportPath(spec, fromFile, 'typescript', context));
 }
 
 /** The component a lazy route module renders: its default export, else its `Component` export. */
@@ -518,8 +533,9 @@ const MAX_REEXPORT_HOPS = 4;
  * Page`, `export function Component`, `export { Page as Component }` — or one
  * it forwards from the module that declares it, as a barrel `index.ts` does:
  * `export { default } from './page'`, `export { Page as Component } from
- * './page'`, or `export * from './page'`, which forwards every name but the
- * default. As in JavaScript, a name the file exports itself hides one an
+ * './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.
  */
@@ -532,17 +548,32 @@ function exportedComponent(
 ): string | null {
   if (visited.has(file) || visited.size > MAX_REEXPORT_HOPS) return null;
   reads?.add(file);
-  const bindings = context.getBindings?.(file) ?? [];
-  const local = bindings.find((b) => b.kind !== 'reexport' && b.exportedAs === name)?.name
-    ?? ownExport(stripCommentsForRegex(context.readFile(file) ?? '', 'typescript'), name);
-  if (local) return context.getNodesInFile(file).find((n) => n.name === local && EXPORTED_COMPONENT_KINDS.has(n.kind))?.id ?? null;
   const language = scriptLanguage(file);
-  const reExports = bindings.filter((b) => b.kind === 'reexport' && b.targetSpec);
+  const bindings = context.getBindings?.(file) ?? [];
   const through = new Set(visited).add(file);
   const forwarded = (source: string, exported: string): string | null => {
     const target = resolveImportPath(source, file, language, context);
     return target ? exportedComponent(target, exported, context, through, reads) : null;
   };
+  // The binding rows name the local an export hands over (`export { Page as
+  // Component }`, `export default Page`); a nodeless `default` row is an
+  // expression (`export default observer(Page)`), which `ownExport` reads.
+  const local = bindings.find((b) => b.kind !== 'reexport' && b.exportedAs === name && b.name !== 'default')?.name
+    ?? ownExport(stripCommentsForRegex(context.readFile(file) ?? '', 'typescript'), 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];
+    // 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;
+    // 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(bindings, 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;
+  }
+  const reExports = bindings.filter((b) => b.kind === 'reexport' && b.targetSpec);
   for (const re of reExports) {
     if (re.name !== '*' && re.exportedAs === name) return forwarded(re.targetSpec!, re.targetName ?? re.name);
   }
@@ -558,13 +589,14 @@ function exportedComponent(
 }
 
 /**
- * The local name a module's own `export` gives `name`: `export default Page`
- * (or `function Page`, `class Page`), `export function Component`, `export
- * const Component`, `export { Page as Component }`. Null when it has none.
+ * The local name a module's own `export` gives `name`: its default export
+ * (`defaultExportedName`: `export default Page`, `function Page`, `class
+ * Page`, `observer(Page)`), `export function Component`, `export const
+ * Component`, `export { Page as Component }`. Null when it has none.
  */
 function ownExport(source: string, name: string): string | null {
   if (name === 'default') {
-    const declared = /\bexport\s+default\s+(?:async\s+)?(?:function\s*\*?\s*|class\s+)?([A-Za-z_$][\w$]*)/.exec(source)?.[1];
+    const declared = defaultExportedName(source);
     if (declared) return declared;
   } else if (new RegExp(String.raw`\bexport\s+(?:async\s+)?(?:const|let|var|function|class)\s+${name.replace(/\$/g, '\\$')}(?![\w$])`).test(source)) {
     return name;
@@ -573,31 +605,233 @@ function ownExport(source: string, name: string): string | null {
 }
 
 /**
- * A component `filePath` holds in a value of its own, for a route there that
- * renders it: the component of the module a lazy declaration loads (`lazy(()
- * => import('./x'))`, wrapped or not), null for a value that loads none it
- * can find — the value is then the binding, by name — and undefined when the
- * file declares no such value (a function or class component is found the
- * usual way).
+ * The name a module's default export carries: `export default Login`,
+ * `export default function Login`, `export default class Login`, `export
+ * default Login as FC`, or the component a wrapper call hands over —
+ * `observer(Login)`, `React.memo(Login)`, `connect(mapState)(Login)`,
+ * `withTranslation()(withRouter(Login))`.
+ */
+function defaultExportedName(source: string): string | null {
+  const at = /\bexport\s+default\s+/.exec(source);
+  if (!at) return null;
+  const rest = source.slice(at.index + at[0].length);
+  const named = /^(?:async\s+)?(?:function\s*\*?\s*|class\s+)([A-Za-z_$][\w$]*)/.exec(rest) ??
+    /^([A-Za-z_$][\w$]*)(?:[ \t]*(?:;|\r?\n|$)|\s+(?:as|satisfies)\s)/.exec(rest);
+  return named ? named[1]! : wrappedName(rest.slice(0, statementEnd(rest, 0)));
+}
+
+/**
+ * The component a wrapper call hands over — `observer(Login)`, `React.memo(Login)`,
+ * `connect(mapState)(Login)`, `withTranslation()(withRouter(Login))`: its last
+ * argument list's lone argument, or a component ahead of the options after it
+ * (`React.memo(TableBody, areEqual)`, `withAuthZ(Page, { … })`), past a type
+ * assertion on the call (`as typeof Login`, or mastodon's
+ * `forwardRef(ComboboxWithRef) as { … }`, which keeps the generics
+ * `forwardRef` drops).
+ */
+function wrappedName(expression: string): string | null {
+  const s = expression.trim();
+  const callee = /^[A-Za-z_$][\w$]*(?:\s*\.\s*[A-Za-z_$][\w$]*)*\s*(?:<[^()]*>)?\s*(?=\()/.exec(s);
+  if (!callee) return null;
+  let end = callee[0].length;
+  let args: string[] = [];
+  for (let open = end; s[open] === '('; ) {
+    const close = matchBracket(s, open);
+    if (close < 0) return null;
+    args = topLevelItems(s.slice(open + 1, close));
+    end = close + 1;
+    for (open = end; /\s/.test(s[open] ?? ''); ) open++;
+  }
+  if (!/^(?:\s+(?:as|satisfies)\s[\s\S]*)?$/.test(s.slice(end))) return null;
+  const first = args[0] ?? '';
+  // `connect(mapState, mapDispatch)` hands over no component yet.
+  if (args.length > 1 && !/^[A-Z]/.test(first)) return null;
+  return /^[A-Za-z_$][\w$]*$/.test(first) ? first : first ? wrappedName(first) : null;
+}
+
+/**
+ * True when the module's default export is the binding `local` itself:
+ * `export default Page;`, `export { Page as default }` — its binding row
+ * exports it as `default`. `export default withAuth(Page)` leaves Page's row
+ * unexported.
  */
-function declaredComponent(name: string, filePath: string, context: ResolutionContext): string | null | undefined {
-  const spec = declaredLoader(name, filePath, context);
-  if (spec === undefined) return undefined;
-  return spec ? lazyRouteComponent(spec, filePath, context) : null;
+function exportsBinding(bindings: readonly Binding[], local: string): boolean {
+  return bindings.some((b) => b.name === local && b.kind !== 'reexport' && b.exportedAs === 'default');
 }
 
 /**
- * The module a value `filePath` declares as `name` loads lazily — the
- * `'./x'` of `const X = lazy(() => import('./x'))`, wrapped or not — null
- * for a value that loads none, undefined when the file declares no such value.
+ * A value `filePath` declares itself under a component's name, and what it
+ * renders. JavaScript scoping makes the name, used anywhere in that file —
+ * `<RegisterPage />`, a route's `element: <RegisterPage />` — this
+ * declaration, never another file's same-named component: mantis's vite app
+ * bound its `RegisterPage`, a `Loadable(lazy(() =>
+ * import('pages/auth/Register')))`, to the page of that name in the
+ * repository's Next.js app. `component` is the component of the module a lazy
+ * declaration loads (`declaredLoader`), or the function the value wraps
+ * (`observer(function Login() {…})`); null when there is none to find, and
+ * the declaration is then the binding. Undefined when the file declares no
+ * such value (a function or class component is found the usual way).
  */
-function declaredLoader(name: string, filePath: string, context: ResolutionContext): string | null | undefined {
-  const own = context.getNodesByName(name)
-    .find((n) => n.filePath === filePath && (n.kind === 'constant' || n.kind === 'variable'));
-  if (!own) return undefined;
-  const lines = context.getFileLines?.(filePath) ?? context.readFile(filePath)?.split(/\r?\n/) ?? [];
-  const text = lines.slice(own.startLine - 1, own.endLine).join('\n');
-  return /=>\s*import\s*\(\s*["']([^"']+)["']\s*\)/.exec(text)?.[1] ?? null;
+export function declaredComponent(
+  name: string,
+  filePath: string,
+  context: ResolutionContext,
+): { declaration: Node; component: Node | null } | undefined {
+  const declaration = declaredValue(name, filePath, context);
+  if (!declaration) return undefined;
+  const loaded = valueLoader(declaration, context);
+  if (!loaded) return { declaration, component: wrappedComponent(declaration, context) };
+  const id = loaded.member === 'default'
+    ? lazyRouteComponent(loaded.spec, filePath, context)
+    : pickedExport(loaded.spec, loaded.member, filePath, context);
+  return { declaration, component: id ? context.getNodeById?.(id) ?? null : null };
+}
+
+/**
+ * The module a value `filePath` declares as `name` loads lazily, and the
+ * export its loader picks (`valueLoader`) — null for a value that loads none,
+ * undefined when the file declares no such value.
+ */
+function declaredLoader(name: string, filePath: string, context: ResolutionContext): { spec: string; member: string } | null | undefined {
+  const declaration = declaredValue(name, filePath, context);
+  return declaration ? valueLoader(declaration, context) : undefined;
+}
+
+/** The module-level `const`, `let` or `var` `filePath` declares as `name`. */
+function declaredValue(name: string, filePath: string, context: ResolutionContext): Node | undefined {
+  return context.getNodesByName(name)
+    .find((n) => n.filePath === filePath && (n.kind === 'constant' || n.kind === 'variable') && n.qualifiedName === name);
+}
+
+/**
+ * The module a value's initializer hands a lazy loader, and the export the
+ * loader resolves to — `default` unless it picks one: `lazy(() =>
+ * import('./x'))`, wrapped or not (`Loadable(lazy(…))`, `loadable(…)`,
+ * `dynamic(…, { ssr: false })`, `Loadable({ loader: () => import(…) })`),
+ * `dynamic(async () => (await import('./x')).default)`, or a named export
+ * (`.then((m) => ({ default: m.Chart }))`, `.then((m) => m.Chart)`), in either
+ * branch of a conditional (`IS_DEV ? React.lazy(…) : null`). The loader is
+ * read by `loaderValue`, as a data router's is; one it can't read loads the
+ * module its expression's first import names. A function the value wraps is
+ * no loader (`withFallback('Dialog', (props) => { … import('mermaid') … })`):
+ * what it returns renders, and what it imports is its own business.
+ */
+function valueLoader(declaration: Node, context: ResolutionContext): { spec: string; member: string } | null {
+  const code = stripCommentsForRegex(declarationText(declaration, context), 'typescript');
+  const init = initializerAt(code, declaration.name.length);
+  const loader = init < 0 ? null : loaderOf(code.slice(init));
+  if (!loader) return null;
+  const page = loadedPage(loaderValue(loader, new Map()));
+  if (page) return page;
+  const fn = functionParts(loader);
+  const spec = fn && !fn.block ? FIRST_IMPORT.exec(fn.body)?.[1] : undefined;
+  return spec ? { spec, member: 'default' } : null;
+}
+
+/**
+ * The loader function an initializer hands a lazy wrapper: the first function
+ * among its call's arguments, through the wrappers around it (`Loadable(lazy(()
+ * => import('./x')))`) and before the options after it (`dynamic(…, { ssr:
+ * false })`), or an options object's `loader` (`Loadable({ loader: () =>
+ * import(…) })`). Null for an initializer that is no such call.
+ */
+function loaderOf(text: string): string | null {
+  const s = text.trim();
+  const call = /^[A-Za-z_$][\w$]*(?:\s*\.\s*[A-Za-z_$][\w$]*)*\s*(?:<[^()]*>)?\s*\(/.exec(s);
+  if (!call) return conditionalLoader(s);
+  const open = call[0].length - 1;
+  const close = matchBracket(s, open);
+  if (close < 0) return null;
+  for (const arg of topLevelItems(s.slice(open + 1, close))) {
+    const item = arg.trim();
+    if (!item) continue;
+    if (functionParts(item)) return item;
+    if (item.startsWith('{')) {
+      const loader = matchBracket(item, 0) === item.length - 1 ? objectEntries(item.slice(1, -1)).props.get('loader') : undefined;
+      if (loader !== undefined && functionParts(loader)) return loader;
+      continue;
+    }
+    const inner = loaderOf(item);
+    if (inner) return inner;
+  }
+  return conditionalLoader(s);
+}
+
+/**
+ * The loader of a conditional's one branch that has one: SigNoz's `IS_DEV ?
+ * React.lazy(() => import(…)) : null`. Null when neither branch loads, or both
+ * do — the value is then one or the other.
+ */
+function conditionalLoader(text: string): string | null {
+  const branches = conditionalBranches(text);
+  const loaders = branches ? branches.map(loaderOf).filter((l): l is string => l !== null) : [];
+  return loaders.length === 1 ? loaders[0]! : null;
+}
+
+/** The two branches of a conditional expression, `test ? yes : no`; null for any other expression. */
+function conditionalBranches(text: string): [string, string] | null {
+  let question = -1;
+  let open = 0;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i]!;
+    if (ch === '"' || ch === "'" || ch === '`' || ch === '{' || ch === '(' || ch === '[') {
+      i = ch === '{' || ch === '(' || ch === '[' ? matchBracket(text, i) : skipString(text, i);
+      if (i < 0) return null;
+    } else if (ch === '?') {
+      // `??` and `?.` are no conditional.
+      if (text[i + 1] === '?' || (text[i + 1] === '.' && !/\d/.test(text[i + 2] ?? ''))) i++;
+      else if (open++ === 0) question = i;
+    } else if (ch === ':' && open > 0 && --open === 0) {
+      return [text.slice(question + 1, i), text.slice(i + 1)];
+    }
+  }
+  return null;
+}
+
+/**
+ * The page a lazy wrapper's loader resolves to: a module's default export, an
+ * export it picks, or the `default` of the object `React.lazy` wants (`{
+ * default: m.Chart }`).
+ */
+function loadedPage(value: Loaded | null): { spec: string; member: string } | null {
+  if (value?.kind === 'module') return { spec: value.spec, member: 'default' };
+  if (value?.kind === 'export') return { spec: value.spec, member: value.name };
+  if (value?.kind !== 'object') return null;
+  const inner = objectEntries(value.text).props.get('default');
+  return inner === undefined ? null : loadedPage(valueOf(inner, value.scope));
+}
+
+/** A declarator's own source text: `B = lazy(…)` in `const A = lazy(…), B = lazy(…)`. */
+function declarationText(node: Node, context: ResolutionContext): string {
+  const lines = (context.getFileLines?.(node.filePath) ?? context.readFile(node.filePath)?.split(/\r?\n/) ?? [])
+    .slice(node.startLine - 1, node.endLine);
+  if (lines.length === 0) return '';
+  if (node.endColumn > 0) lines[lines.length - 1] = lines[lines.length - 1]!.slice(0, node.endColumn);
+  lines[0] = lines[0]!.slice(node.startColumn);
+  return lines.join('\n');
+}
+
+/**
+ * The component a value wraps, which is what it renders: the function it
+ * holds (`const Application = observer(function Application() {…})`), or the
+ * component of its own file a wrapper call is handed (`const TableView =
+ * observer(TableViewInner)`). An inner function counts when it has the value's
+ * name or ends where the value does — never a helper inside an arrow the graph
+ * has no node for (`withFallback('X', () => { const load = () => …; … })`).
+ */
+function wrappedComponent(value: Node, context: ResolutionContext): Node | null {
+  const nodes = context.getNodesInFile(value.filePath);
+  const inner = nodes.filter((n) => COMPONENT_KINDS.has(n.kind) &&
+    n.qualifiedName === `${value.qualifiedName}::${n.name}` && n.startLine >= value.startLine && n.endLine <= value.endLine);
+  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;
+  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)
+    ? nodes.find((n) => n.name === handed && n.qualifiedName === handed && COMPONENT_KINDS.has(n.kind)) ?? null
+    : null;
 }
 
 /**
@@ -611,7 +845,14 @@ function layoutComponent(spec: string, ref: UnresolvedRef, context: ResolutionCo
   const picked = isReactRouteRef(ref) ? PICKED_EXPORT.exec(spec) : null;
   if (picked) return pickedExport(picked[1]!, picked[2]!, ref.filePath, context);
   const mapping = context.getImportMappings(ref.filePath, ref.language).find((m) => m.localName === spec);
-  if (!mapping) return resolveComponent(spec, ref.filePath, context);
+  if (!mapping) {
+    // A layout the route file declares itself (`const MainLayout =
+    // Loadable(lazy(…))`): no name match follows a `layout:` reference, so
+    // the declaration binds here when there is no component to find.
+    const own = declaredComponent(spec, ref.filePath, context);
+    if (own) return (own.component ?? own.declaration).id;
+    return resolveComponent(spec, ref.filePath, context);
+  }
   const viaImport = context.resolveImport?.({ ...ref, referenceName: spec })?.targetNodeId;
   if (viaImport) return viaImport;
   // `import { default as AppRoot } from './routes/app/root'`: read the module the
diff --git a/src/resolution/module-importers.ts b/src/resolution/module-importers.ts
index 018d9f304f..c115bcc21d 100644
--- a/src/resolution/module-importers.ts
+++ b/src/resolution/module-importers.ts
@@ -24,6 +24,7 @@ import type { Binding, Edge, Language, UnresolvedReference } from '../types';
 import type { ImportMapping, ReExport } from './types';
 import { importMappingsFromBindings, pythonModulePath } from './import-resolver';
 import { resurrectRefFromDroppedEdge } from './resurrect-ref';
+import { moduleReferenceKeys } from '../db/reference-tail';
 
 /**
  * Languages whose import bindings name what their references are written as:
@@ -78,6 +79,12 @@ export interface ImportReader {
   reExports(file: string, language: Language): ReExport[];
   /** The modules a Python file star-imports, which have no import mapping. */
   starImports(file: string, language: Language): string[];
+  /**
+   * The bindings an ES module's own exports hand over as they are: each local
+   * an export clause names (`export { Page }`), and its default export when
+   * that is a binding (`export default Page;`).
+   */
+  exportedBindings(file: string, language: Language): ReadonlySet<string>;
 }
 
 export function createImportReader(rootDir: string, queries: QueryBuilder): ImportReader {
@@ -93,6 +100,7 @@ export function createImportReader(rootDir: string, queries: QueryBuilder): Impo
   const mappingsMemo = new Map<string, ImportMapping[]>();
   const reExportsMemo = new Map<string, ReExport[]>();
   const starsMemo = new Map<string, string[]>();
+  const exportedMemo = new Map<string, Set<string>>();
   return {
     // The file's `import` binding rows, which the resolver reads its imports
     // from (`extractImportMappings` reads no source text). A star import has
@@ -136,6 +144,22 @@ export function createImportReader(rootDir: string, queries: QueryBuilder): Impo
       }
       return stars;
     },
+    // The names its top-level binding rows export as they are: a local an
+    // export clause names (`export { Page }`), its default export when that
+    // is a binding (`export default Page;`, `export { Page as default }`),
+    // and a CommonJS export of one. `export default withAuth(Page)` exports
+    // a nodeless `default` row, which names no binding of the module's.
+    exportedBindings: (file) => {
+      let exported = exportedMemo.get(file);
+      if (!exported) {
+        exported = new Set();
+        for (const r of bindingsOf(file)) {
+          if (r.exportedAs !== undefined && r.scopeStart <= 1 && r.name !== 'default') exported.add(r.name);
+        }
+        exportedMemo.set(file, exported);
+      }
+      return exported;
+    },
   };
 }
 
@@ -187,6 +211,66 @@ export function reopenReferencesThroughAddedFiles(
     reopenEdges(queries, bindings, (e) => e.edgeId <= resolvedUpToEdgeId) + queries.reopenFailedReferences(failed);
 }
 
+/** The languages a barrel a lazy route reads through is written in: the ES-module family. */
+const BARREL_LANGUAGES = new Set<Language>(['typescript', 'tsx', 'javascript', 'jsx']);
+
+/**
+ * Re-open, for the sync's sweep, the failed references that wait for a module
+ * through a barrel when a file below the barrel appears or gains a
+ * definition. React Router's `import:@/pages#HomePage` waits under the key of
+ * the module it names, `module:pages`. When `pages/index.ts` passes on
+ * `pages/Home/index.tsx`, that file is what the reference waits for, but its
+ * own keys name its folder and stem (`module:Home`), never the barrel's.
+ *
+ * The barrels are the modules that pass one of `files` on, through `export …
+ * from` or an import they export again (`import { HomePage } from './Home';
+ * export { HomePage }`), followed up as deep as the resolver chases a name.
+ * Only keys a failed reference waits under are looked up, so a sync with none
+ * reads nothing. Call after the failed-ref retry: an added file's importers
+ * reach it through the import edges that retry made. Returns the number
+ * re-opened.
+ */
+export function reopenReferencesThroughBarrels(
+  queries: QueryBuilder,
+  reader: ImportReader,
+  files: ReadonlyArray<{ path: string; language: Language }>,
+): number {
+  let level = files.filter((file) => BARREL_LANGUAGES.has(file.language));
+  if (level.length === 0) return 0;
+  const waiting = new Set(queries.getFailedModuleKeys());
+  if (waiting.size === 0) return 0;
+  const keys = new Set<string>();
+  const seen = new Set(level.map((file) => file.path));
+  for (let depth = 1; level.length > 0 && depth <= REEXPORT_MAX_DEPTH; depth++) {
+    const next: Array<{ path: string; language: Language }> = [];
+    for (const module of level) {
+      for (const i of queries.getImportsInto(`file:${module.path}`, module.path)) {
+        if (i.refName === null || seen.has(i.filePath) || !BARREL_LANGUAGES.has(i.language)) continue;
+        if (!passesOn(i.filePath, i.language, i.refName, reader)) continue;
+        seen.add(i.filePath);
+        for (const key of moduleReferenceKeys(i.filePath)) if (waiting.has(key)) keys.add(key);
+        next.push({ path: i.filePath, language: i.language });
+      }
+    }
+    level = next;
+  }
+  if (keys.size === 0) return 0;
+  const parked = queries.getRetryableFailedReferences([...keys]).flatMap((ref) => (ref.rowId === undefined ? [] : [ref.rowId]));
+  return queries.reopenFailedReferences(parked);
+}
+
+/**
+ * Whether `importer` passes on what it imports from `source`: an `export …
+ * from` of it, or a binding it imports from it and exports again — the forms
+ * a lazy route's lookup follows through a barrel (`exportedComponent`).
+ */
+function passesOn(importer: string, language: Language, source: string, reader: ImportReader): boolean {
+  if (reader.reExports(importer, language).some((rex) => rex.source === source)) return true;
+  const exported = reader.exportedBindings(importer, language);
+  return exported.size > 0 &&
+    reader.mappings(importer, language).some((m) => m.source === source && !m.isNamespace && exported.has(m.localName));
+}
+
 /** An import's module edge into a file that an added file now outranks. */
 interface OutrankedImport {
   edge: Edge & { edgeId: number; sourceFilePath: string; sourceLanguage: Language };