diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0dd95878..4ea70a3d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to Context are documented here.
 
+## 0.7.87 - 2026-10-26
+
+- Each website article now ends with its sources as a map. The article's sections sit in the middle and the documents they cite sit around them in flat blobs, grouped by where each document comes from: a repository directory, Lark documents or notes. Sections are purple; repository files are green, Skills magenta, Lark documents blue and notes orange. Hovering a section or document highlights what it is linked to and shows the cited line ranges; clicking a document opens the cited lines and clicking a section scrolls to it. A List view shows the same documents by group, and narrow screens show only the list. Other articles citing the same documents are linked below. The map is computed during `context build` from the recorded references, registered sources and committed snapshots, so it needs no agent step. Set `site.sourceMap: false` to keep the plain source list.
+- The `context` entry Skill includes a source checklist template a team can fill in before a knowledge base is built, and explains how to register sources from a filled checklist; the planning Skill asks once whether a checklist exists before inventorying sources.
+
 ## 0.7.86 - 2026-10-26
 
 - Website emphasis now follows the CJK-friendly amendment to CommonMark through `markdown-it-cjk-friendly`, replacing 0.7.85's built-in rule. Any East Asian wide or full-width character beside a `*` run, including full-width punctuation, counts like whitespace when deciding whether the run opens or closes emphasis; `_` and runs with no CJK character beside them keep the CommonMark result. Clean content renders as in 0.7.85.
diff --git a/bun.lock b/bun.lock
index 6e0823f2..fcbbad85 100644
--- a/bun.lock
+++ b/bun.lock
@@ -18,7 +18,7 @@
     },
     "packages/context": {
       "name": "@c4a/context",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "yaml": "^2.5.1",
         "zod": "^3.23.8",
@@ -26,7 +26,7 @@
     },
     "packages/context-cli": {
       "name": "@c4a/context-cli",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "bin": {
         "context": "dist/cli.js",
       },
@@ -45,6 +45,7 @@
         "@c4a/extract-ts": "workspace:*",
         "@mermaid-js/layout-elk": "0.2.0",
         "commander": "^11.0.0",
+        "d3-force": "3.0.0",
         "fast-xml-parser": "^5.10.1",
         "handlebars": "^4.7.8",
         "ink": "^5.0.0",
@@ -67,6 +68,7 @@
       },
       "devDependencies": {
         "@c4a/core": "workspace:*",
+        "@types/d3-force": "3.0.10",
         "esbuild": "0.27.3",
         "playwright": "1.58.2",
         "zod-to-json-schema": "^3.25.1",
@@ -74,7 +76,7 @@
     },
     "packages/core": {
       "name": "@c4a/core",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "picomatch": "^4.0.4",
         "yaml": "^2.4.5",
@@ -86,7 +88,7 @@
     },
     "packages/dev-cli": {
       "name": "@c4a/dev-cli",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/context": "workspace:*",
         "@c4a/core": "workspace:*",
@@ -98,7 +100,7 @@
     },
     "packages/extract": {
       "name": "@c4a/extract",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "bin": {
         "c4a-extract-code": "./dist/bin/c4a-extract-code.js",
       },
@@ -113,7 +115,7 @@
     },
     "packages/extract-contract": {
       "name": "@c4a/extract-contract",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "graphql": "^16.14.2",
@@ -123,7 +125,7 @@
     },
     "packages/extract-go": {
       "name": "@c4a/extract-go",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "@c4a/extract": "workspace:*",
@@ -133,7 +135,7 @@
     },
     "packages/extract-mdx": {
       "name": "@c4a/extract-mdx",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "remark-mdx": "^3.1.1",
@@ -145,7 +147,7 @@
     },
     "packages/extract-proto": {
       "name": "@c4a/extract-proto",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "zod": "^3.23.8",
@@ -153,7 +155,7 @@
     },
     "packages/extract-rush": {
       "name": "@c4a/extract-rush",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "typescript": "^5.5.4",
@@ -163,7 +165,7 @@
     },
     "packages/extract-sql": {
       "name": "@c4a/extract-sql",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "node-sql-parser": "^5.4.0",
@@ -172,7 +174,7 @@
     },
     "packages/extract-style": {
       "name": "@c4a/extract-style",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "postcss": "^8.5.26",
@@ -184,7 +186,7 @@
     },
     "packages/extract-thrift": {
       "name": "@c4a/extract-thrift",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "zod": "^3.23.8",
@@ -192,7 +194,7 @@
     },
     "packages/extract-ts": {
       "name": "@c4a/extract-ts",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "@c4a/core": "workspace:*",
         "@c4a/extract": "workspace:*",
@@ -203,7 +205,7 @@
     },
     "packages/tui": {
       "name": "@c4a/tui",
-      "version": "0.7.86",
+      "version": "0.7.87",
       "dependencies": {
         "ink": "^5.0.0",
         "react": "^18.3.1",
diff --git a/package.json b/package.json
index 524c50bd..27739f77 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "packageManager": "bun@1.3.9",
   "repository": {
     "type": "git",
diff --git a/packages/context-cli/context-workflow/provider.yaml b/packages/context-cli/context-workflow/provider.yaml
index 7dc9ebd8..5ce67d04 100644
--- a/packages/context-cli/context-workflow/provider.yaml
+++ b/packages/context-cli/context-workflow/provider.yaml
@@ -1,6 +1,6 @@
 schema: agent-graph.provider.v1
 id: c4a/context
-version: 0.7.86
+version: 0.7.87
 name: Context workflow
 description: Internal work contract for Context knowledge workspaces.
 graphs:
diff --git a/packages/context-cli/context-workflow/resources/manuals/guides/package-outputs.md b/packages/context-cli/context-workflow/resources/manuals/guides/package-outputs.md
index baf62f9f..09cee90e 100644
--- a/packages/context-cli/context-workflow/resources/manuals/guides/package-outputs.md
+++ b/packages/context-cli/context-workflow/resources/manuals/guides/package-outputs.md
@@ -121,7 +121,18 @@ zoom, full-screen and source controls. Controls appear on hover or keyboard focu
 (and remain visible on touch devices). Layout and source/copy actions are on the
 left, sizing actions on the right. Source view replaces the diagram. Flowcharts default to ELK and can switch to Dagre without changing the article. Offline Review reports use the same
 viewer and include its resources only when a candidate contains Mermaid.
-Article provenance initially shows ten sources; Show more reveals the full list.
+Each article ends with its sources as a map: the article's sections in the
+middle and the documents they cite around them, grouped by where each document
+comes from (a repository directory, Lark documents or notes). Sections are purple;
+sources are coloured by type: repository files green, Skills magenta, Lark
+documents blue and notes orange. Hovering a section
+or document highlights what it is linked to; clicking a document opens the cited
+lines, and clicking a section scrolls to it. A List view shows the same documents
+by group with their cited line ranges, and narrow screens show only the list.
+Below the map, other articles citing the same documents are linked. The map is
+computed while building from the recorded references, so it needs no agent
+step; set `site.sourceMap: false` to show the plain source list instead, which
+initially shows ten sources; Show more reveals the full list.
 Invalid diagrams and diagrams with embedded image/HTML resources retain their
 source with a rendering notice instead of blocking publication. Code samples and raw HTML are
 displayed as content, not executed as Vue components or scripts.
diff --git a/packages/context-cli/context-workflow/resources/manuals/reference/project-api.md b/packages/context-cli/context-workflow/resources/manuals/reference/project-api.md
index 4f4c22c8..8ba85d6e 100644
--- a/packages/context-cli/context-workflow/resources/manuals/reference/project-api.md
+++ b/packages/context-cli/context-workflow/resources/manuals/reference/project-api.md
@@ -191,7 +191,8 @@ the same build, beside the KB directory. `<base>` removes one trailing `-kb`
 from the package name, if present. Omit it for KB-only output. It accepts `title`, `description`,
 `lang`, a deployment `base` path, an optional top-bar `titleLink`, and an
 optional `home` presentation. Navigation and language fields are `nav`, `more`,
-`socialLinks`, `locales` and `localePreferenceKey`; see
+`socialLinks`, `locales` and `localePreferenceKey`; `sourceMap: false` replaces
+the per-article source map with a plain source list; see
 [Package Outputs](../guides/package-outputs.md) and
 [Site translation](../guides/site-translation.md). `home`
 accepts `title`, `slogan`, `description`, hero `actions`, and `resources` shown
diff --git a/packages/context-cli/package.json b/packages/context-cli/package.json
index db637563..4cf2dffc 100644
--- a/packages/context-cli/package.json
+++ b/packages/context-cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/context-cli",
   "description": "Local runtime and Agent integration for traceable knowledge production",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -67,6 +67,7 @@
     "@c4a/extract-ts": "workspace:*",
     "@mermaid-js/layout-elk": "0.2.0",
     "commander": "^11.0.0",
+    "d3-force": "3.0.0",
     "fast-xml-parser": "^5.10.1",
     "handlebars": "^4.7.8",
     "ink": "^5.0.0",
@@ -89,6 +90,7 @@
   },
   "devDependencies": {
     "@c4a/core": "workspace:*",
+    "@types/d3-force": "3.0.10",
     "esbuild": "0.27.3",
     "playwright": "1.58.2",
     "zod-to-json-schema": "^3.25.1"
diff --git a/packages/context-cli/src/__tests__/packageSite.test.ts b/packages/context-cli/src/__tests__/packageSite.test.ts
index c1de4460..2e99f28e 100644
--- a/packages/context-cli/src/__tests__/packageSite.test.ts
+++ b/packages/context-cli/src/__tests__/packageSite.test.ts
@@ -167,7 +167,12 @@ test("VitePress builds an independent site with search, safe prose, anchors and
     expect(article).not.toContain("<script>unsafe()");
     expect(article).not.toContain("unsafe-script");
     expect(article).toContain("language-mermaid");
-    expect(article).toContain('class="context-sources"');
+    // Recorded references render as the source map by default, linking sections, cited lines and articles citing the same file.
+    expect(article).toContain('class="context-sources context-source-map"');
+    expect(article).not.toContain('class="context-sources"');
+    expect(article).toContain('id="context-source-line-1"');
+    expect(article).toContain('href="#section-source"');
+    expect(article).toMatch(/class="context-source-others"[\s\S]*?href="\/docs\/pages\/[0-9a-f]+\.html"/u);
     expect(article).toContain("https://github.com/example/components/blob/abc123/packages/ui/src/entry.ts#L1-L1");
     const sourceLinks = [...article.matchAll(/<a class="context-source-link" href="([^"]+)"[^>]*><code>([^<]+)<\/code><\/a>/gu)].map(match => [match[2], match[1]]);
     expect(sourceLinks).toEqual([
@@ -221,6 +226,25 @@ test("VitePress builds an independent site with search, safe prose, anchors and
 }, 120000);
 
 
+test("site.sourceMap false keeps the plain source list", async () => {
+  const root = await mkdtemp(join(tmpdir(), "context-site-"));
+  try {
+    const plain = kbPackage({ name: "sample", template: "src/templates", site: { title: "Knowledge", sourceMap: false } });
+    const files = selected.slice(0, 1).map(file => ({ ...file, article: { ...file.article, sections: [{ id: "entry", references: [{
+      source_ref: "repo:20260910/sample", locator: { path: "src/entry.ts", start_line: 2, end_line: 4 }, content_digest: "sha256:" + "a".repeat(64) }] }] } }));
+    const page = createSiteNavigation(plain, files).pages[0]!;
+    await mkdir(join(root, plain.outDir, page.package_path, ".."), { recursive: true });
+    await writeFile(join(root, plain.outDir, page.package_path), "# Start\n\n## Entry\n");
+    await mkdir(join(root, "sources/repo"), { recursive: true });
+    await writeFile(join(root, "sources/repo/index.yaml"), 'sources:\n  - name: "20260910"\n    modules:\n      - name: sample\n        git:\n          remote: https://github.com/example/components.git\n          ref: abc123\n');
+    await writePackageSite({ projectRoot: root, pkg: plain, selected: files });
+    const html = await readFile(join(root, packageSiteOutputDir(plain), page.site_path), "utf8");
+    expect(html).toContain('class="context-sources"');
+    expect(html).not.toContain("context-source-map");
+    expect(html).toContain("https://github.com/example/components/blob/abc123/src/entry.ts#L2-L4");
+  } finally { await rm(root, { recursive: true, force: true }); }
+}, 120000);
+
 test("deployment roots retain subpaths and reject non-site URLs without network access", async () => {
   expect(normalizeSiteUrl("https://example.com/docs")).toBe("https://example.com/docs/");
   expect(normalizeSiteUrl("https://example.com/")).toBe("https://example.com/");
diff --git a/packages/context-cli/src/__tests__/packageSiteSourceMap.test.ts b/packages/context-cli/src/__tests__/packageSiteSourceMap.test.ts
new file mode 100644
index 00000000..cfc79156
--- /dev/null
+++ b/packages/context-cli/src/__tests__/packageSiteSourceMap.test.ts
@@ -0,0 +1,88 @@
+import { expect, test } from "bun:test";
+import type { ArticleStructureEntry, SourcesRegistry } from "@c4a/context";
+import { createSiteSourceMaps, siteDocumentKey, siteSectionHeadings } from "../project/packageSiteSourceMap.js";
+import { siteArticleSources } from "../project/packageSiteSources.js";
+
+const registry: SourcesRegistry = {
+  kind: "sources.registry", registryPaths: { repo: "", file: "", lark: "" }, absolutePaths: { repo: "", file: "", lark: "" },
+  repos: [{ id: "snapshot/ui", name: "ui", namespace: "snapshot", module: "ui", materializedAt: "", remote: "git@github.com:example/widgets.git", ref: "abc123def4567890abc123def4567890abc123de" }],
+  larks: [{ id: "snapshot/guide", name: "guide", title: "Usage guide", materializedAt: "", url: "https://docs.example.com/guide" }], files: [],
+  notes: [{ id: "20261001/decisions.md", name: "20261001/decisions.md", namespace: "20261001", module: "decisions.md", materializedAt: "sources/note/20261001/decisions.md" }], sessions: [],
+};
+const digest = `sha256:${"a".repeat(64)}`;
+const ref = (source_ref: string, path: string, start_line = 1, end_line = 4) => ({ source_ref, locator: { path, start_line, end_line }, content_digest: digest });
+const entry = (id: string, sections: ArticleStructureEntry["sections"]) => ({
+  article: { article_id: id, path: `${id}.md`, collection: "codeindex", visibility: "public", sections } as ArticleStructureEntry,
+  href: `/pages/${id}.html`, titles: { "en-US": `Title ${id}`, "zh-CN": `标题 ${id}` },
+  sectionTitles: Object.fromEntries(sections.map(section => [section.id, { "en-US": section.id, "zh-CN": "" }])),
+});
+const button = entry("button", [
+  { id: "usage", references: [ref("repo:snapshot/ui", "src/components/button/index.ts", 3, 8), ref("lark:snapshot/guide", "guide.md")] },
+  { id: "styling", references: [ref("repo:snapshot/ui", "src/components/button/index.ts", 20, 30), ref("repo:snapshot/ui", "skills/button-style/SKILL.md")] },
+  { id: "why", references: [ref("note:20261001/decisions.md", "decisions.md")] },
+]);
+const input = { registry, titles: new Map([[siteDocumentKey("note:20261001/decisions.md", "decisions.md"), "Design decisions"]]),
+  articles: [button, entry("theme", [{ id: "tokens", references: [ref("repo:snapshot/ui", "skills/button-style/SKILL.md", 9, 12)] }]),
+    entry("empty", [{ id: "intro", references: [] }])] };
+
+test("source maps come from recorded references only, grouped by where each document lives", () => {
+  const map = createSiteSourceMaps(input).get("button")!;
+  expect(map.docs.map(doc => [doc.title, doc.path])).toEqual([
+    ["index", "src/components/button/index.ts"], ["Usage guide", "guide.md"], ["button-style", "skills/button-style/SKILL.md"], ["Design decisions", "decisions.md"],
+  ]);
+  // Two regions of one file stay distinct citations, each with the link the plain list uses.
+  expect(map.docs[0]!.refs).toEqual([
+    { s: 0, lines: [3, 8], href: siteArticleSources(button.article, registry)[0]!.href! },
+    { s: 1, lines: [20, 30], href: siteArticleSources(button.article, registry)[2]!.href! },
+  ]);
+  expect(map.areas.map(area => [area.kind, area.label])).toEqual([
+    ["repo", "ui · button"], ["lark", { zh: "飞书文档", en: "Lark docs" }], ["repo", "ui · button-style"], ["note", { zh: "笔记", en: "Notes" }],
+  ]);
+  expect(map.sections.map(section => section.titles)).toEqual([{ "en-US": "usage", "zh-CN": "" }, { "en-US": "styling", "zh-CN": "" }, { "en-US": "why", "zh-CN": "" }]);
+  // Articles citing the same document link to each other; an article without references gets no map.
+  expect(map.others).toEqual([{ titles: { "en-US": "Title theme", "zh-CN": "标题 theme" }, href: "/pages/theme.html", docs: [2] }]);
+  expect(createSiteSourceMaps(input).has("empty")).toBe(false);
+});
+
+test("the layout is deterministic and stays inside the drawing", () => {
+  const first = createSiteSourceMaps(input).get("button")!;
+  expect(createSiteSourceMaps(input).get("button")).toEqual(first);
+  for (const node of [...first.sections, ...first.docs]) {
+    expect(node.x).toBeGreaterThanOrEqual(70); expect(node.x).toBeLessThanOrEqual(first.w - 70);
+    expect(node.y).toBeGreaterThanOrEqual(50); expect(node.y).toBeLessThanOrEqual(first.h - 64);
+  }
+  expect(first.sectionArea.blobs).toHaveLength(first.sections.length * 4);
+  // Each label's free space reaches halfway to its row neighbours and stays inside the drawing.
+  for (const node of [...first.sections, ...first.docs]) {
+    expect(node.rl).toBeGreaterThan(0); expect(node.rr).toBeGreaterThan(0);
+    expect(node.x - node.rl).toBeGreaterThanOrEqual(8); expect(node.x + node.rr).toBeLessThanOrEqual(first.w - 8);
+  }
+  // Area names lean with their blob's edge, never steeper than about 29 degrees.
+  for (const area of [first.sectionArea, ...first.areas]) expect(Math.abs(area.la)).toBeLessThanOrEqual(28.7);
+});
+
+test("many directories coarsen into a few source areas", () => {
+  const many = entry("many", [{ id: "all", references: ["a", "b", "c"].map(name => ref("repo:snapshot/ui", `packages/${name}/src/index.ts`)) },
+    { id: "more", references: ["d", "e", "f", "g"].map(name => ref("repo:snapshot/ui", `packages/${name}/src/index.ts`)) }]);
+  const map = createSiteSourceMaps({ ...input, articles: [many] }).get("many")!;
+  expect(map.areas.map(area => area.label)).toEqual(["ui · packages"]);
+});
+
+test("sections are named by their heading, else by their first prose; the opening has no name", () => {
+  const headings = siteSectionHeadings([
+    '<!-- context:section id="intro" -->', "Opening text.", "<!-- /context:section -->",
+    '<!-- context:section id="setup" -->', "## Set up **the** [client](./client.md) {#setup}", "", "### Detail", "<!-- /context:section -->",
+    '<!-- context:section id="note" -->', "> [!NOTE]", "> Use **version 2** when you install `two` packages.", "<!-- /context:section -->",
+  ].join("\n"));
+  expect([...headings]).toEqual([["setup", "Set up the client"], ["note", "Use version 2 when you install two packages."]]);
+});
+
+test("each source type has one colour: repository files, Skills, Lark and notes", () => {
+  const map = createSiteSourceMaps(input).get("button")!;
+  // src/components/button/index.ts is code, skills/button-style/SKILL.md a Skill.
+  expect(map.areas.map(area => [area.kind, area.color])).toEqual([
+    ["repo", "#16a34a"], ["lark", "#2e7dd6"], ["repo", "#db2777"], ["note", "#ea7a1e"],
+  ]);
+  const docs = entry("docs", [{ id: "guide", references: [ref("repo:snapshot/ui", "docs/guide.md")] }]);
+  expect(createSiteSourceMaps({ ...input, articles: [docs] }).get("docs")!.areas[0]!.color).toBe("#16a34a");
+});
diff --git a/packages/context-cli/src/project/indexerBaseContracts.ts b/packages/context-cli/src/project/indexerBaseContracts.ts
index 7b0acd29..f6f1a70d 100644
--- a/packages/context-cli/src/project/indexerBaseContracts.ts
+++ b/packages/context-cli/src/project/indexerBaseContracts.ts
@@ -21,7 +21,7 @@ import { bundledMarkdownReaderQuestionContracts } from
   "./indexerBaseMarkdownAuthoringCatalog.js";
 
 const BASE_CONTRACT_VERSION = "1.1.0";
-export const BUNDLED_INDEXER_PARSER_PACKAGE_VERSION = "0.7.86";
+export const BUNDLED_INDEXER_PARSER_PACKAGE_VERSION = "0.7.87";
 const BUNDLED_PARSER_REQUIREMENTS = buildIndexerParserCapabilityRequirements(
   BUNDLED_INDEXER_PARSER_PACKAGE_VERSION,
 );
diff --git a/packages/context-cli/src/project/packageSite.ts b/packages/context-cli/src/project/packageSite.ts
index 9fbecc10..0a271a57 100644
--- a/packages/context-cli/src/project/packageSite.ts
+++ b/packages/context-cli/src/project/packageSite.ts
@@ -18,6 +18,8 @@ import { knowledgeMapSectionAnchor } from "./packageKnowledgeMap.js";
 import { markdownReaderLinks } from "./markdownLinks.js";
 import type { ApprovedKnowledgeFile } from "./packageIndexes.js";
 import { articleProvenanceMarkdown, siteArticleSources, siteSourceLinks } from "./packageSiteSources.js";
+import { createSiteSourceMaps, siteDocumentKey, siteSectionHeadings, type SiteSourceMap, type SiteSourceMapArticle } from "./packageSiteSourceMap.js";
+import { readTranslatedArticle } from "./siteTranslation.js";
 import { siteMarkdownConfig, siteMarkdownImports, siteThemeCss, siteThemeScript, siteThemeLabels } from "./packageSiteTheme.js";
 import { packageSiteBranding } from "./packageSiteBranding.js";
 import { writeSiteExtensions, siteExtensionTargets, invalidSiteExtension } from "./packageSiteExtensions.js";
@@ -185,6 +187,47 @@ export function siteHomeHero(options: PackageSiteDefinition,
   };
 }
 
+/** Everything the source maps need is recorded at build time: references, registered sources,
+ * committed snapshots and notes, and translated headings. Nothing is asked of an agent. */
+async function siteSourceMaps(input: { projectRoot: string; registry: Awaited<ReturnType<typeof loadSourcesRegistry>>; repositoryRemote?: string | undefined;
+  pages: readonly SitePage[]; sourceContent: ReadonlyMap<string, ApprovedKnowledgeFile>; tags: readonly string[] }) {
+  const [primary, ...extra] = input.tags as [string, ...string[]];
+  const articles: SiteSourceMapArticle[] = [];
+  const documents = new Map<string, string>();
+  for (const page of input.pages) {
+    const file = input.sourceContent.get(page.package_path);
+    if (!file?.article) continue;
+    const titles: Record<string, string> = { [primary]: page.title };
+    const headings = new Map([[primary, siteSectionHeadings(file.content)]]);
+    for (const tag of extra) {
+      const translation = await readTranslatedArticle(input.projectRoot, tag, file);
+      if (!translation) continue;
+      titles[tag] = translation.title;
+      headings.set(tag, siteSectionHeadings(translation.body));
+    }
+    // An empty title is a section without a heading; the theme names it the article opening.
+    const sectionTitles = Object.fromEntries(file.article.sections.map(section => [section.id, Object.fromEntries(input.tags.map(tag =>
+      [tag, headings.get(tag)?.get(section.id) ?? headings.get(primary)!.get(section.id) ?? ""]))]));
+    file.article.sections.forEach(section => section.references.forEach(({ source_ref: ref, locator }) => {
+      const note = ref.startsWith("note:") ? input.registry.notes.find(entry => ref === `note:${entry.id}`) : undefined;
+      const lark = ref.startsWith("lark:") ? input.registry.larks.find(entry => ref === `lark:${entry.id}` || ref === `lark:${entry.name}`) : undefined;
+      const path = note ? note.materializedAt : lark && !lark.title ? posix.join(lark.materializedAt, locator.path) : undefined;
+      if (path && !posix.normalize(path).startsWith("../")) documents.set(siteDocumentKey(ref, locator.path), path);
+    }));
+    articles.push({ article: file.article, href: `/${page.site_path}`, titles, sectionTitles });
+  }
+  // Lark snapshots and notes are committed, so their own titles are stable across builds.
+  const titles = new Map<string, string>();
+  for (const [key, file] of documents) {
+    const content = await readFile(join(input.projectRoot, file), "utf8").catch(() => undefined);
+    const title = content && (/^title:[ \t]*["']?(.+?)["']?[ \t]*$/mu.exec(/^---\r?\n([\s\S]*?)\r?\n---/u.exec(content)?.[1] ?? "")?.[1] ??
+      /^#[ \t]+(.+?)[ \t#]*$/mu.exec(content)?.[1]);
+    if (title) titles.set(key, title.trim());
+  }
+  return createSiteSourceMaps({ articles, registry: input.registry, titles,
+    ...(input.repositoryRemote ? { repositoryRemote: input.repositoryRemote } : {}) });
+}
+
 export async function writePackageSite(input: {
   projectRoot: string; pkg: PackageDefinition; selected: readonly ApprovedKnowledgeFile[]; structure?: KnowledgeMap; siteUrl?: string;
 }) {
@@ -237,9 +280,10 @@ export async function writePackageSite(input: {
     }
     const readers = siteReaderLocales(options, pkg.name);
     const marker = createLocaleMarker();
+    const theme = await resolveSiteTheme(projectRoot, options.theme, true);
     await writeFile(join(configRoot, "theme/index.js"), siteThemeScript);
     await writeFile(join(configRoot, "theme/style.css"), siteThemeCss + siteLocaleCss(readers) +
-      siteThemeVariables(await resolveSiteTheme(projectRoot, options.theme, true)));
+      siteThemeVariables(theme));
     await writeSiteExtensions(projectRoot, temporary, options.extensions);
     const localizer = await createSiteLocalizer({ projectRoot, readers, marker, selected, byPath, resources });
     await mkdir(join(temporary, "pages"), { recursive: true });
@@ -258,8 +302,12 @@ export async function writePackageSite(input: {
       const pageContent = provenance && content.endsWith(provenance) ? content.slice(0, -provenance.length) : content;
       return siteMarkdown(pageContent, page.package_path, byPath, resources);
     };
+    const sourceMaps = options.sourceMap === false ? new Map<string, SiteSourceMap>() : await siteSourceMaps({
+      projectRoot, registry, repositoryRemote, pages: [...byPath.values()], sourceContent,
+      tags: readers.translated ? readers.tags : [readers.primary] });
     const pageFrontmatter = (page: SitePage, content: string, titles?: Record<string, string>) => {
       const original = sourceContent.get(page.package_path);
+      const sourceMap = original?.article ? sourceMaps.get(original.article.article_id) : undefined;
       const sources = siteArticleSources(original?.article, registry, repositoryRemote);
       const sourceLinks = siteSourceLinks(original?.article, registry, repositoryRemote);
       const timestamp = parseKnowledgeFrontmatter(original?.content ?? content).timestamp;
@@ -267,7 +315,8 @@ export async function writePackageSite(input: {
         ? new Date(timestamp).toISOString() : null;
       return `---\ntitle: ${JSON.stringify(page.title)}\n${titles ? `contextTitles: ${JSON.stringify(titles)}\n` : ""}` +
         `contextSources: ${JSON.stringify(sources)}\n` +
-        `${Object.keys(sourceLinks).length ? `contextSourceLinks: ${JSON.stringify(sourceLinks)}\n` : ""}contextUpdated: ${JSON.stringify(updated)}\n---\n`;
+        `${Object.keys(sourceLinks).length ? `contextSourceLinks: ${JSON.stringify(sourceLinks)}\n` : ""}` +
+        `${sourceMap ? `contextSourceMap: ${JSON.stringify(sourceMap)}\n` : ""}contextUpdated: ${JSON.stringify(updated)}\n---\n`;
     };
     for (const page of byPath.values()) {
       const content = await readFile(join(root, page.package_path), "utf8");
diff --git a/packages/context-cli/src/project/packageSiteSourceMap.ts b/packages/context-cli/src/project/packageSiteSourceMap.ts
new file mode 100644
index 00000000..92bc2e3c
--- /dev/null
+++ b/packages/context-cli/src/project/packageSiteSourceMap.ts
@@ -0,0 +1,326 @@
+import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY, type SimulationNodeDatum } from "d3-force";
+import type { ArticleStructureEntry, SourcesRegistry } from "@c4a/context";
+import { siteReferenceSource } from "./packageSiteSources.js";
+
+/** A label in every reader language, or one string shared by all of them. */
+export type SiteMapText = string | Record<string, string>;
+export interface SiteSourceMapArea {
+  kind: "repo" | "lark" | "note" | "other";
+  label: SiteMapText;
+  color: string;
+  /** Circles `[x, y, r]` the theme melts into one flat blob. */
+  blobs: number[][];
+  /** Label position and its tilt in degrees, following the blob's outer edge. */
+  lx: number; ly: number; la: number;
+}
+export interface SiteSourceMapDocument {
+  title: string; path: string; area: number; x: number; y: number; r: number;
+  /** Free space for the label to the left and right of the node. */
+  rl: number; rr: number;
+  /** `s` is the section index; one entry per cited region. */
+  refs: { s: number; lines: [number, number]; href?: string }[];
+}
+/** One article's recorded references laid out for the website: its sections in the middle,
+ * the cited documents grouped by where they come from around them. */
+export interface SiteSourceMap {
+  w: number; h: number;
+  sections: { id: string; titles: Record<string, string>; x: number; y: number; rl: number; rr: number }[];
+  sectionArea: { blobs: number[][]; lx: number; ly: number; la: number };
+  areas: SiteSourceMapArea[];
+  docs: SiteSourceMapDocument[];
+  /** Other delivered articles citing at least one of the same documents; `docs` are indexes. */
+  others: { titles: Record<string, string>; href: string; docs: number[] }[];
+}
+export interface SiteSourceMapArticle {
+  article: ArticleStructureEntry;
+  href: string;
+  titles: Record<string, string>;
+  /** Section id → reader language → heading. */
+  sectionTitles: Record<string, Record<string, string>>;
+}
+
+const WIDTH = 720;
+const AREA_LIMIT = 6;
+/** Each source type has one fixed colour; the article's own sections are purple in the theme. */
+const TYPE_COLORS = { repo: "#16a34a", skill: "#db2777", lark: "#2e7dd6", note: "#ea7a1e", other: "#8a8f98" } as const;
+type SourceType = keyof typeof TYPE_COLORS;
+/** Repository files, code and documentation alike, share one colour; Skills have their own. */
+function sourceType(document: { kind: SiteSourceMapArea["kind"]; path: string }): SourceType {
+  if (document.kind !== "repo") return document.kind;
+  return /(?:^|\/)skills?\//iu.test(document.path) || /(?:^|\/)skill\.md$/iu.test(document.path) ? "skill" : "repo";
+}
+const KIND_LABELS = { lark: { zh: "飞书文档", en: "Lark docs" }, note: { zh: "笔记", en: "Notes" } } as const;
+/** The theme names the sections' blob; only its width matters here. */
+const SECTIONS_LABEL = { zh: "本文段落", en: "This article" };
+const round = (value: number) => Math.round(value * 10) / 10;
+/** One cited document: a registered source and a path inside it. */
+export const siteDocumentKey = (sourceRef: string, path: string) => `${sourceRef}\u0000${path}`;
+
+const plain = (value: string) => value.replace(/\s*\{#[^}]*\}$/u, "").replace(/!?\[([^\]]*)\]\([^)]*\)/gu, "$1")
+  .replace(/<[^>]+>/gu, "").replace(/[*_`~]/gu, "").replace(/\s+/gu, " ").trim();
+/** Section names from approved Markdown: the section's heading, else the start of its first line of
+ * prose. The opening section before any heading gets no name; the theme calls it the opening. */
+export function siteSectionHeadings(markdown: string): Map<string, string> {
+  const headings = new Map<string, string>();
+  let first = true;
+  for (const match of markdown.matchAll(/<!--\s*context:section\b[^>]*\bid="([^"]+)"[^>]*-->([\s\S]*?)(?=<!--\s*\/?context:section\b|$)/gu)) {
+    const opening = first;
+    first = false;
+    if (headings.has(match[1]!)) continue;
+    const heading = /^#{1,6}[ \t]+(.+?)[ \t#]*$/mu.exec(match[2]!)?.[1];
+    const prose = match[2]!.split(/\r?\n/u).map(line => plain(line.replace(/^(?:\s*>)+\s*(?:\[![A-Za-z]+\]\s*)?/u, "").replace(/^\s*(?:[-*+]|\d+\.)\s+/u, "")))
+      .find(line => line && !/^(?:```|~~~|\||<!--)/u.test(line));
+    const name = heading !== undefined ? plain(heading) : opening ? undefined : prose && [...prose].slice(0, 60).join("");
+    if (name) headings.set(match[1]!, name);
+  }
+  return headings;
+}
+
+/** Repository files are titled by path, so every build titles them alike without reading snapshots. */
+function pathTitle(path: string): string {
+  const parts = path.split("/").filter(Boolean);
+  const file = parts.at(-1) ?? path;
+  if (/^(?:skill|readme|index)\.mdx?$/iu.test(file) && parts.length > 1) return parts.at(-2)!;
+  return file.replace(/\.[^.]+$/u, "") || file;
+}
+function seededRandom(seed: string) {
+  let state = 0;
+  for (const char of seed) state = (Math.imul(state, 31) + char.charCodeAt(0)) | 0;
+  return () => ((state = (Math.imul(state, 1103515245) + 12345) | 0) >>> 0) / 4294967296;
+}
+
+interface Located { key: string; title: string; path: string; kind: SiteSourceMapArea["kind"]; owner: string; directory: string[];
+  refs: { s: number; lines: [number, number]; href?: string }[] }
+function locate(entry: SiteSourceMapArticle, registry: SourcesRegistry, titles: ReadonlyMap<string, string>, repositoryRemote?: string) {
+  const documents = new Map<string, Located>();
+  entry.article.sections.forEach((section, index) => section.references.forEach(reference => {
+    const source = siteReferenceSource(reference, registry, repositoryRemote);
+    const path = reference.locator.path;
+    const key = siteDocumentKey(reference.source_ref, path);
+    const document = documents.get(key) ?? { key, path, kind: source.kind, owner: source.owner, directory: path.split("/").slice(0, -1),
+      title: titles.get(key) ?? (source.kind === "lark" ? source.owner : pathTitle(path)), refs: [] };
+    const lines: [number, number] = [reference.locator.start_line, reference.locator.end_line];
+    if (!document.refs.some(ref => ref.s === index && ref.lines[0] === lines[0] && ref.lines[1] === lines[1])) {
+      document.refs.push({ s: index, lines, ...(source.href ? { href: source.href } : {}) });
+    }
+    documents.set(key, document);
+  }));
+  for (const document of documents.values()) document.refs.sort((left, right) => left.s - right.s || left.lines[0] - right.lines[0] || left.lines[1] - right.lines[1]);
+  return [...documents.values()];
+}
+
+/** Repository documents group by module and leading directories, coarsened until few groups remain. */
+function areasOf(documents: readonly Located[]) {
+  const keyAt = (document: Located, depth: number) => document.kind === "repo"
+    ? `repo:${document.owner}:${document.directory.slice(0, depth).join("/")}` : document.kind === "other" ? `other:${document.owner}` : document.kind;
+  let depth = 3;
+  while (depth > 0 && new Set(documents.map(document => keyAt(document, depth))).size > AREA_LIMIT) depth -= 1;
+  return { depth, key: (document: Located) => keyAt(document, depth) };
+}
+
+/** Approximate drawn width of a label in the theme's 12px semibold type; wide characters count twice. */
+const textUnits = (value: string) => [...value].reduce((sum, char) =>
+  sum + (/[\u1100-\u115f\u2e80-\ua4cf\uac00-\ud7a3\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]/u.test(char) ? 2 : 1), 0);
+function labelWidth(label: SiteMapText): number {
+  return Math.min(36, Math.max(...(typeof label === "string" ? [label] : Object.values(label)).map(textUnits))) * 6.6;
+}
+
+/** Node labels sit under their node. Each label may use the free space around it on its row, up to
+ * halfway to the nearest neighbour on either side; the theme decides per reader language whether a
+ * label fits on one line there or wraps. `rl`/`rr` are those distances to the left and right. */
+function labelRoom(nodes: readonly { x: number; y: number }[]) {
+  return nodes.map((node, index) => {
+    const row = nodes.filter((other, at) => at !== index && Math.abs(other.y - node.y) < 34);
+    const left = Math.max(8, ...row.filter(other => other.x < node.x).map(other => (node.x + other.x) / 2));
+    const right = Math.min(WIDTH - 8, ...row.filter(other => other.x >= node.x).map(other => (node.x + other.x) / 2));
+    return { rl: round(node.x - left), rr: round(right - node.x) };
+  });
+}
+
+/** The outer edge of a blob above (or below) `x`: the highest (lowest) point of its circles there. */
+function contour(circles: readonly number[][], x: number, below: boolean): number | undefined {
+  let edge: number | undefined;
+  for (const [cx, cy, r] of circles as [number, number, number][]) {
+    const dx = x - cx;
+    if (Math.abs(dx) >= r) continue;
+    const y = below ? cy + Math.sqrt(r * r - dx * dx) : cy - Math.sqrt(r * r - dx * dx);
+    if (edge === undefined || (below ? y > edge : y < edge)) edge = y;
+  }
+  return edge;
+}
+
+function layout(entry: SiteSourceMapArticle, documents: readonly Located[], areaKeys: readonly string[], areaOf: readonly number[],
+  widths: { sections: number; areas: readonly number[] }) {
+  const sections = entry.article.sections;
+  // The middle grows with the sections, and the areas around it move out with it.
+  const height = Math.round(Math.min(820, Math.max(440, 380 + sections.length * 16 + documents.length * 9)));
+  const random = seededRandom(entry.article.article_id);
+  const center: [number, number] = [WIDTH / 2, height / 2 + 6];
+  // Areas sit evenly around the sections, in the order of the sections that use them.
+  const usage = areaKeys.map((_, area) => {
+    const used = documents.flatMap((document, index) => areaOf[index] === area ? document.refs.map(ref => ref.s) : []);
+    return used.reduce((sum, value) => sum + value, 0) / Math.max(1, used.length);
+  });
+  const order = areaKeys.map((_, area) => area).sort((left, right) => usage[left]! - usage[right]! || left - right);
+  const anchors = new Map<number, [number, number]>([[-1, center]]);
+  order.forEach((area, position) => {
+    const angle = -Math.PI / 2 + position / order.length * Math.PI * 2 + 0.35;
+    anchors.set(area, [center[0] + Math.cos(angle) * WIDTH * 0.36, center[1] + Math.sin(angle) * height * 0.36]);
+  });
+  type Node = SimulationNodeDatum & { section: boolean; area: number; r: number };
+  // Sections sit further apart, so their circles are larger to melt into one blob.
+  const pad = (node: Node) => node.r + (node.section ? 32 : 24);
+  const nodes: Node[] = [
+    ...sections.map(() => ({ section: true, area: -1, r: 7.5 })),
+    ...documents.map((document, index) => ({ section: false, area: areaOf[index]!, r: 5 + Math.min(document.refs.length, 7) * 0.75 })),
+  ];
+  for (const node of nodes) {
+    const [x, y] = anchors.get(node.area)!;
+    node.x = x + (random() - 0.5) * 30; node.y = y + (random() - 0.5) * 30;
+  }
+  const links = documents.flatMap((document, index) => [...new Set(document.refs.map(ref => ref.s))]
+    .map(section => ({ source: nodes[section]!, target: nodes[sections.length + index]! })));
+  const simulation = forceSimulation(nodes).randomSource(random)
+    .force("link", forceLink(links).distance(130).strength(0.02))
+    .force("charge", forceManyBody<Node>().strength(node => node.section ? -60 : -30))
+    // Section labels sit side by side in the middle, so sections keep about a label's width apart.
+    .force("collide", forceCollide<Node>(node => node.r + (node.section ? 34 : 28)).iterations(3))
+    .force("x", forceX<Node>(node => anchors.get(node.area)![0]).strength(node => node.section ? 0.14 : 0.22))
+    .force("y", forceY<Node>(node => anchors.get(node.area)![1]).strength(node => node.section ? 0.18 : 0.22))
+    // Different areas keep their blobs apart, however many documents they hold.
+    .force("separate", () => {
+      for (let i = 0; i < nodes.length; i++) for (let j = i + 1; j < nodes.length; j++) {
+        const a = nodes[i]!, b = nodes[j]!;
+        if (a.area === b.area) continue;
+        const dx = b.x! - a.x!, dy = b.y! - a.y!, distance = Math.hypot(dx, dy) || 1;
+        const reach = pad(a) + pad(b) + 34;
+        if (distance >= reach) continue;
+        const push = (reach - distance) / distance * 0.4;
+        a.vx! -= dx * push; a.vy! -= dy * push; b.vx! += dx * push; b.vy! += dy * push;
+      }
+    })
+    .stop();
+  for (let tick = 0; tick < 600; tick++) {
+    simulation.tick();
+    for (const node of nodes) {
+      node.x = Math.max(70, Math.min(WIDTH - 70, node.x!));
+      // The bottom margin leaves room for labels and an area name below them.
+      node.y = Math.max(50, Math.min(height - 64, node.y!));
+    }
+  }
+  // Each member adds two deterministic satellites, so a blob's edge is soft rather than a ring of circles.
+  // Labels go on the outer side of an area, away from the sections in the middle.
+  const cluster = (members: Node[], seed: string, width: number, below = false) => {
+    const cx = members.reduce((sum, node) => sum + node.x!, 0) / members.length;
+    const cy = members.reduce((sum, node) => sum + node.y!, 0) / members.length;
+    const blobs = members.flatMap((node, index) => {
+      const next = seededRandom(`${seed}:${index}`);
+      const size = pad(node);
+      const circles = [[node.x!, node.y!, size]];
+      for (let satellite = 0; satellite < 2; satellite++) {
+        const angle = next() * Math.PI * 2, distance = size * (0.35 + next() * 0.25);
+        circles.push([node.x! + Math.cos(angle) * distance, node.y! + Math.sin(angle) * distance, size * (0.55 + next() * 0.15)]);
+      }
+      // Halfway toward the middle of the area, so a ring of members does not leave a hole.
+      if (members.length > 2) circles.push([(node.x! + cx) / 2, (node.y! + cy) / 2, size * 0.9]);
+      return circles.map(circle => circle.map(round));
+    });
+    // The label leans with the blob's edge: a chord across the edge under the label, moved out
+    // until no part of the blob rises above it.
+    const left = Math.min(...blobs.map(([x, , r]) => x! - r!)), right = Math.max(...blobs.map(([x, , r]) => x! + r!));
+    const half = Math.max(4, Math.min(width / 2, (right - left) / 2 - 6));
+    const x0 = Math.max(left + half + 6, Math.min(right - half - 6, members.reduce((sum, node) => sum + node.x!, 0) / members.length));
+    const middle = contour(blobs, x0, below)!;
+    const y1 = contour(blobs, x0 - half, below) ?? middle, y2 = contour(blobs, x0 + half, below) ?? middle;
+    const tilt = Math.max(-0.5, Math.min(0.5, Math.atan2(y2 - y1, 2 * half)));
+    const chord = (x: number) => y1 + (x - x0 + half) * Math.tan(tilt);
+    let gap = 0;
+    for (let step = 0; step <= 8; step++) {
+      const x = x0 - half + step * half / 4;
+      const y = contour(blobs, x, below);
+      if (y !== undefined) gap = Math.max(gap, below ? y - chord(x) : chord(x) - y);
+    }
+    // Below a blob, the name also clears the members' own labels (up to two lines under each node).
+    const labels = Math.max(...members.filter(node => Math.abs(node.x! - x0) < half + 40).map(node => node.y! + node.r + 48), -Infinity);
+    const ly = below ? Math.max(chord(x0) + gap + 15, labels) : chord(x0) - gap - 6;
+    return { blobs, lx: round(x0), ly: round(ly), la: round(tilt * 180 / Math.PI), below };
+  };
+  const groups = [{ members: nodes.slice(0, sections.length), seed: "sections", width: widths.sections, below: false },
+    ...areaKeys.map((key, area) => ({ members: nodes.filter(node => node.area === area), seed: key, width: widths.areas[area]!,
+      below: anchors.get(area)![1] > center[1] + 1 }))];
+  const clusters = groups.map(group => cluster(group.members, group.seed, group.width, group.below));
+  // A name that would sit on another blob moves to the other side of its own blob when that side is clear.
+  const covered = (index: number, item: ReturnType<typeof cluster>) => clusters.some((other, at) => at !== index &&
+    // The blur melts circles together, so a blob reaches well past its circles.
+    [-0.5, -0.25, 0, 0.25, 0.5].some(offset => other.blobs.some(([x, y, r]) =>
+      Math.hypot(item.lx + offset * groups[index]!.width - x!, item.ly - 5 - y!) < r! + 24)));
+  clusters.forEach((item, index) => {
+    if (!covered(index, item)) return;
+    const flipped = cluster(groups[index]!.members, groups[index]!.seed, groups[index]!.width, !groups[index]!.below);
+    if (!covered(index, flipped)) clusters[index] = flipped;
+  });
+  // Fit the drawing's height to what was drawn: blobs, node labels and area names.
+  const top = Math.min(...clusters.flatMap(item => [...item.blobs.map(([, y, r]) => y! - r!), item.below ? Infinity : item.ly - 14]));
+  const bottom = Math.max(...clusters.flatMap(item => [...item.blobs.map(([, y, r]) => y! + r!), item.below ? item.ly + 6 : -Infinity]),
+    ...nodes.map(node => node.y! + node.r + 40));
+  const shift = 16 - top;
+  for (const node of nodes) node.y! += shift;
+  const placed = clusters.map(item => ({ blobs: item.blobs.map(([x, y, r]) => [x!, round(y! + shift), r!]),
+    lx: item.lx, ly: round(item.ly + shift), la: item.la }));
+  return { height: Math.round(bottom - top + 32), nodes, sectionArea: placed[0]!, areas: placed.slice(1) };
+}
+
+/** Source maps for every delivered article with recorded references, keyed by article id. */
+export function createSiteSourceMaps(input: { articles: readonly SiteSourceMapArticle[]; registry: SourcesRegistry;
+  /** Titles read from committed Lark snapshots and notes, by `siteDocumentKey`; others are titled by path. */
+  titles: ReadonlyMap<string, string>; repositoryRemote?: string }): Map<string, SiteSourceMap> {
+  const located = input.articles.map(entry => ({ entry, documents: locate(entry, input.registry, input.titles, input.repositoryRemote) }));
+  const citing = new Map<string, number[]>();
+  located.forEach(({ documents }, index) => documents.forEach(document => citing.set(document.key, [...citing.get(document.key) ?? [], index])));
+  const maps = new Map<string, SiteSourceMap>();
+  located.forEach(({ entry, documents }, articleIndex) => {
+    if (!documents.length) return;
+    const grouping = areasOf(documents);
+    const areaKeys = [...new Set(documents.map(grouping.key))];
+    const areaOf = documents.map(document => areaKeys.indexOf(grouping.key(document)));
+    // An area takes the colour of the type most of its documents have.
+    const areaType = (area: number): SourceType => {
+      const counts = new Map<SourceType, number>();
+      documents.forEach((document, index) => { if (areaOf[index] === area) counts.set(sourceType(document), (counts.get(sourceType(document)) ?? 0) + 1); });
+      return [...counts].sort((left, right) => right[1] - left[1])[0]![0];
+    };
+    const labels = areaKeys.map((_, area): SiteMapText => {
+      const first = documents[areaOf.indexOf(area)]!;
+      const directory = first.directory.slice(0, grouping.depth).join("/");
+      // The innermost directory that says more than the module name.
+      return first.kind === "repo" ? `${first.owner}${directory ? ` · ${directory.split("/").reverse().find(part => part !== first.owner) ?? directory}` : ""}`
+        : first.kind === "other" ? first.owner : { ...KIND_LABELS[first.kind] };
+    });
+    const placed = layout(entry, documents, areaKeys, areaOf, { sections: labelWidth(SECTIONS_LABEL), areas: labels.map(labelWidth) });
+    const areas = areaKeys.map((_, area): SiteSourceMapArea => {
+      const first = documents[areaOf.indexOf(area)]!;
+      return { kind: first.kind, ...placed.areas[area]!, label: labels[area]!,
+        color: TYPE_COLORS[areaType(area)] };
+    });
+    const sharing = new Map<number, number[]>();
+    documents.forEach((document, index) => citing.get(document.key)!.forEach(other => {
+      if (other !== articleIndex) sharing.set(other, [...sharing.get(other) ?? [], index]);
+    }));
+    const sections = entry.article.sections;
+    const rooms = labelRoom(placed.nodes.map(node => ({ x: node.x!, y: node.y! })));
+    maps.set(entry.article.article_id, {
+      w: WIDTH, h: placed.height,
+      sections: sections.map((section, index) => ({ id: section.id, titles: entry.sectionTitles[section.id] ?? {},
+        x: round(placed.nodes[index]!.x!), y: round(placed.nodes[index]!.y!), ...rooms[index]! })),
+      sectionArea: placed.sectionArea, areas,
+      docs: documents.map((document, index) => {
+        const node = placed.nodes[sections.length + index]!;
+        return { title: document.title, path: document.path, area: areaOf[index]!, x: round(node.x!), y: round(node.y!), r: round(node.r),
+          ...rooms[sections.length + index]!, refs: document.refs };
+      }),
+      others: [...sharing].sort(([left, a], [right, b]) => b.length - a.length || left - right).slice(0, 50)
+        .map(([other, docs]) => ({ titles: input.articles[other]!.titles, href: input.articles[other]!.href, docs })),
+    });
+  });
+  return maps;
+}
diff --git a/packages/context-cli/src/project/packageSiteSources.ts b/packages/context-cli/src/project/packageSiteSources.ts
index c8cfa6b7..f69dc421 100644
--- a/packages/context-cli/src/project/packageSiteSources.ts
+++ b/packages/context-cli/src/project/packageSiteSources.ts
@@ -1,4 +1,4 @@
-import { parseRepoContentRef, type ArticleStructureEntry, type SourcesRegistry } from "@c4a/context";
+import { parseRepoContentRef, type ArticleSourceReference, type ArticleStructureEntry, type SourcesRegistry } from "@c4a/context";
 import { repoContentWebUrl } from "./repoContentPages.js";
 
 export interface SiteSource { label: string; href?: string }
@@ -24,40 +24,47 @@ function repoUrl(remote: string): string | undefined {
 }
 const encodedPath = (value: string) => value.split("/").map(encodeURIComponent).join("/");
 
+/** Where one recorded reference points: its list label, its link, and the registered source it belongs to. */
+export interface SiteReferenceSource extends SiteSource {
+  kind: "repo" | "lark" | "note" | "other";
+  /** Repository module, local repository id, Lark title, note id or the raw reference. */
+  owner: string;
+}
+export function siteReferenceSource(reference: ArticleSourceReference, registry: SourcesRegistry, repositoryRemote?: string): SiteReferenceSource {
+  const ref = reference.source_ref;
+  const locator = reference.locator;
+  const region = `L${locator.start_line}–L${locator.end_line}`;
+  const local = parseRepoContentRef(ref);
+  if (local) {
+    const url = !local.worktree ? repoContentWebUrl(repositoryRemote, local.commit, locator.path) : undefined;
+    return { label: `${local.id} · ${locator.path} ${region} · ${local.commit?.slice(0, 7) ?? "unknown revision"}${local.worktree ? " + worktree" : ""}`,
+      ...(url ? { href: `${url}#L${locator.start_line}-L${locator.end_line}` } : {}), kind: "repo", owner: local.id };
+  }
+  const repo = registry.repos.find(entry => ref === `repo:${entry.id}` || ref === `repo:${entry.name}`);
+  if (repo) {
+    const base = repoUrl(repo.remote);
+    const path = [repo.subpath ?? "", locator.path].filter(Boolean).join("/");
+    const safe = !path.startsWith("/") && !path.split("/").some(part => part === ".." || part === ".");
+    const href = base && safe
+      ? `${base}/blob/${encodeURIComponent(repo.ref)}/${encodedPath(path)}#L${locator.start_line}-L${locator.end_line}`
+      : undefined;
+    const revision = /^[a-f0-9]{7,64}$/iu.test(repo.ref) ? repo.ref.slice(0, 7) : repo.ref;
+    return { label: `${repo.module}/${locator.path} ${region} · ${revision}`, ...(href ? { href } : {}), kind: "repo", owner: repo.module };
+  }
+  const doc = registry.larks.find(entry => ref === `lark:${entry.id}` || ref === `lark:${entry.name}`);
+  if (doc) {
+    const href = webUrl(doc.url);
+    return { label: `${doc.title ?? doc.name} · ${locator.path} ${region}`, ...(href ? { href } : {}), kind: "lark", owner: doc.title ?? doc.name };
+  }
+  return { label: `${ref} · ${locator.path} ${region}`, kind: ref.startsWith("note:") ? "note" : "other", owner: ref };
+}
+
 /** Project recorded provenance only; do not infer source files from prose or titles. */
 export function siteArticleSources(article: ArticleStructureEntry | undefined, registry: SourcesRegistry, repositoryRemote?: string): SiteSource[] {
-  const sources: SiteSource[] = [];
-  for (const reference of article?.sections.flatMap(section => section.references) ?? []) {
-    const ref = reference.source_ref;
-    const locator = reference.locator;
-    const region = `L${locator.start_line}–L${locator.end_line}`;
-    const local = parseRepoContentRef(ref);
-    if (local) {
-      const url = !local.worktree ? repoContentWebUrl(repositoryRemote, local.commit, locator.path) : undefined;
-      sources.push({ label: `${local.id} · ${locator.path} ${region} · ${local.commit?.slice(0, 7) ?? "unknown revision"}${local.worktree ? " + worktree" : ""}`,
-        ...(url ? { href: `${url}#L${locator.start_line}-L${locator.end_line}` } : {}) });
-      continue;
-    }
-    const repo = registry.repos.find(entry => ref === `repo:${entry.id}` || ref === `repo:${entry.name}`);
-    if (repo) {
-      const base = repoUrl(repo.remote);
-      const path = [repo.subpath ?? "", locator.path].filter(Boolean).join("/");
-      const safe = !path.startsWith("/") && !path.split("/").some(part => part === ".." || part === ".");
-      const href = base && safe
-        ? `${base}/blob/${encodeURIComponent(repo.ref)}/${encodedPath(path)}#L${locator.start_line}-L${locator.end_line}`
-        : undefined;
-      const revision = /^[a-f0-9]{7,64}$/iu.test(repo.ref) ? repo.ref.slice(0, 7) : repo.ref;
-      sources.push({ label: `${repo.module}/${locator.path} ${region} · ${revision}`, ...(href ? { href } : {}) });
-      continue;
-    }
-    const doc = registry.larks.find(entry => ref === `lark:${entry.id}` || ref === `lark:${entry.name}`);
-    if (doc) {
-      const href = webUrl(doc.url);
-      sources.push({ label: `${doc.title ?? doc.name} · ${locator.path} ${region}`, ...(href ? { href } : {}) });
-      continue;
-    }
-    sources.push({ label: `${ref} · ${locator.path} ${region}` });
-  }
+  const sources = (article?.sections.flatMap(section => section.references) ?? []).map(reference => {
+    const { label, href } = siteReferenceSource(reference, registry, repositoryRemote);
+    return { label, ...(href ? { href } : {}) };
+  });
   return [...new Map(sources.map(source => [JSON.stringify(source), source])).values()];
 }
 
diff --git a/packages/context-cli/src/project/packageSiteTheme.ts b/packages/context-cli/src/project/packageSiteTheme.ts
index a8a67861..919af345 100644
--- a/packages/context-cli/src/project/packageSiteTheme.ts
+++ b/packages/context-cli/src/project/packageSiteTheme.ts
@@ -361,12 +361,202 @@ export default {
         return part('year') + '-' + part('month') + '-' + part('day') + ' ' +
           part('hour') + ':' + part('minute') + ':' + part('second') + ' ' + part('timeZoneName');
       });
+      // The source map: sections in the middle, cited documents in flat blobs by where they come from.
+      // Layout is computed at build time; the page only draws it and follows the pointer.
+      const sourceView = ref('graph');
+      const sourceFocus = ref(null);
+      const allOthers = ref(false);
+      onMounted(() => { try { if (localStorage.getItem('context-source-view') === 'list') sourceView.value = 'list'; } catch {} });
+      const setSourceView = view => {
+        sourceView.value = view; sourceFocus.value = null;
+        try { localStorage.setItem('context-source-view', view); } catch {}
+      };
+      // One element per reader language unless every language reads the same.
+      const localized = (element, values, props) => values.every(value => value === values[0]) ? [h(element, props, values[0])]
+        : readers.value.tags.map((tag, index) => h(element, { ...props, 'data-context-locales': tag, lang: tag }, values[index]));
+      const mapValues = (text, fallback) => readers.value.tags.map(tag => {
+        if (typeof text === 'string') return text;
+        if (text && !(tag in text) && 'zh' in text && 'en' in text) return isChinese(tag) ? text.zh : text.en;
+        return (text && (text[tag] || text[readers.value.primary])) || fallback(tag);
+      });
+      const sectionValues = section => mapValues(section.titles, tag => isChinese(tag) ? '开头' : 'Opening');
+      // Wide (CJK) characters count twice, so labels in any language take about the same room.
+      const wideChar = /[\u1100-\u115f\u2e80-\ua4cf\uac00-\ud7a3\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]/;
+      const labelWidth = text => [...text].reduce((sum, char) => sum + (wideChar.test(char) ? 2 : 1), 0);
+      const cut = (value, size) => {
+        let room = size, text = '';
+        for (const char of value) { room -= wideChar.test(char) ? 2 : 1; if (room < 0) return text.trimEnd() + '…'; text += char; }
+        return text;
+      };
+      // At most two lines; words stay whole and break after - / _, wide characters break anywhere, the rest is cut.
+      const wrap = (value, size) => {
+        const tokens = value.match(/\s+|[\u1100-\u115f\u2e80-\ua4cf\uac00-\ud7a3\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]|[^\s\/_\-\u1100-\u115f\u2e80-\ua4cf\uac00-\ud7a3\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]*[\/_-]+|[^\s\/_\-\u1100-\u115f\u2e80-\ua4cf\uac00-\ud7a3\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]+/g) || [];
+        const lines = [];
+        let line = '';
+        for (let index = 0; index < tokens.length; index++) {
+          const token = tokens[index];
+          if (!line.trim() && !token.trim()) continue;
+          // Closing punctuation never starts a line.
+          if (line && /^[、。，；：！？）」』》〉,.;:!?)\]]$/.test(token)) { line += token; continue; }
+          if (!line || labelWidth(line + token) <= size) { line += token; continue; }
+          if (lines.length) { line += tokens.slice(index).join(''); break; }
+          lines.push(line); line = token.trim() ? token : '';
+        }
+        return [...lines, line].map(text => cut(text.trim(), size)).filter(Boolean);
+      };
+      // A node label stays on one line when it fits the free space on its row (very long names
+      // still wrap), slides sideways into that space as needed, and otherwise wraps to two lines.
+      const placeLabel = (value, node, wrapAt) => {
+        const units = labelWidth(value), room = (node.rl ?? 60) + (node.rr ?? 60) - 6;
+        // Two lines are balanced, so a short tail never sits alone on the second line.
+        const size = units * 6.2 <= room && units <= wrapAt * 1.6 ? units
+          : Math.max(6, Math.min(Math.floor(room / 6.2), Math.ceil(units / 2) + 1, 20));
+        const width = Math.min(units, size) * 6.2;
+        const centre = width <= room ? Math.max(-(node.rl ?? 60) + 3 + width / 2, Math.min((node.rr ?? 60) - 3 - width / 2, 0)) : 0;
+        return { size, dx: Math.max(-width / 2 + 6, Math.min(width / 2 - 6, centre)) };
+      };
+      const svgLabel = (values, node, wrapAt, props) => {
+        const render = value => {
+          const { size, dx } = placeLabel(value, node, wrapAt);
+          return wrap(value, size).map((line, index) => h('tspan', { x: dx, dy: index ? 13 : 0 }, line));
+        };
+        return values.every(value => value === values[0]) ? [h('text', props, render(values[0]))]
+          : readers.value.tags.map((tag, index) => h('text', { ...props, 'data-context-locales': tag, lang: tag }, render(values[index])));
+      };
+      const sourceMapSection = map => {
+        const focus = sourceFocus.value;
+        const links = [];
+        map.docs.forEach((doc, d) => [...new Set(doc.refs.map(ref => ref.s))].forEach(s => links.push([s, d])));
+        const touches = link => focus && (focus.kind === 's' ? link[0] === focus.index : link[1] === focus.index);
+        const near = focus && new Set([focus.kind + focus.index, ...links.filter(touches).map(link => focus.kind === 's' ? 'd' + link[1] : 's' + link[0])]);
+        const dim = key => near && !near.has(key) ? ' is-dim' : '';
+        const refCount = map.docs.reduce((sum, doc) => sum + doc.refs.length, 0);
+        const sectionsOf = doc => [...new Set(doc.refs.map(ref => ref.s))];
+        const regions = doc => [...new Map(doc.refs.map(ref => ['L' + ref.lines[0] + '–L' + ref.lines[1], ref.href])).entries()];
+        const docHref = doc => doc.refs.find(ref => ref.href)?.href;
+        const external = { target: '_blank', rel: 'noopener noreferrer' };
+        const sectionHref = section => '#section-' + encodeURIComponent(section.id);
+        const point = event => {
+          const box = event.currentTarget.closest('.context-source-graph').getBoundingClientRect();
+          return [event.clientX - box.left, event.clientY - box.top, box.width];
+        };
+        const track = (kind, index) => ({
+          onMouseenter: event => { sourceFocus.value = { kind, index, at: point(event) }; },
+          onMousemove: event => { sourceFocus.value = { kind, index, at: point(event) }; },
+          onMouseleave: () => { sourceFocus.value = null; },
+        });
+        const colorOf = area => area < 0 ? '#7c5cff' : map.areas[area].color;
+        // Blur then sharpen alpha: nearby circles melt into one blob with a flat fill. A slightly
+        // larger copy in the area colour underneath, half transparent, reads as a soft outline.
+        // Filter colours resolve where the filter is defined, so each colour has its own filter.
+        const clusters = [-1, ...map.areas.map((_, index) => index)];
+        const goo = (id, color) => h('filter', { id, x: '-30%', y: '-30%', width: '160%', height: '160%' }, [
+          h('feGaussianBlur', { in: 'SourceAlpha', stdDeviation: '12', result: 'blur' }),
+          h('feColorMatrix', { in: 'blur', mode: 'matrix', values: '0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 26 -11', result: 'shape' }),
+          h('feFlood', { style: { floodColor: color }, result: 'color' }),
+          h('feComposite', { in: 'color', in2: 'shape', operator: 'in' }),
+        ]);
+        const blob = (circles, area) => [
+          h('g', { filter: 'url(#context-source-line' + area + ')', opacity: '.55' }, circles.map(c => h('circle', { cx: c[0], cy: c[1], r: c[2] + 1.4 }))),
+          h('g', { filter: 'url(#context-source-blob' + area + ')' }, circles.map(c => h('circle', { cx: c[0], cy: c[1], r: c[2] }))),
+        ];
+        const areaLabel = (cluster, area) => localized('text', mapValues(area < 0 ? { zh: '本文段落', en: 'This article' } : map.areas[area].label, () => '')
+          .map(value => cut(value, 36)), { x: cluster.lx, y: cluster.ly, transform: 'rotate(' + (cluster.la || 0) + ' ' + cluster.lx + ' ' + cluster.ly + ')',
+          'text-anchor': 'middle', class: 'context-source-area-label', style: { fill: colorOf(area) } });
+        const curve = link => {
+          const s = map.sections[link[0]], d = map.docs[link[1]];
+          return 'M' + s.x + ',' + s.y + 'Q' + (s.x + d.x) / 2 + ',' + ((s.y + d.y) / 2 - (d.x - s.x) * .08) + ' ' + d.x + ',' + d.y;
+        };
+        const tip = () => {
+          if (!focus) return null;
+          const [x, y, width] = focus.at;
+          const style = { left: Math.max(8, Math.min(x + 14, width - 300)) + 'px', top: Math.max(8, y - 10) + 'px' };
+          if (focus.kind === 's') {
+            const section = map.sections[focus.index];
+            const docs = links.filter(link => link[0] === focus.index).map(link => map.docs[link[1]].title);
+            return h('div', { class: 'context-source-tip', style }, [h('b', null, localized('span', sectionValues(section))),
+              docs.length ? [both('依据 ' + docs.length + ' 份材料：', 'Based on ' + docs.length + (docs.length === 1 ? ' document: ' : ' documents: ')), h('br'), docs.join(isChinese(locale.value) ? '、' : ', ')]
+                : both('没有记录来源', 'No recorded sources')]);
+          }
+          const doc = map.docs[focus.index];
+          const others = map.others.filter(other => other.docs.includes(focus.index)).length;
+          return h('div', { class: 'context-source-tip', style }, [h('b', null, doc.title),
+            h('span', { class: 'context-source-tip-area' }, localized('span', mapValues(map.areas[doc.area].label, () => ''))), h('br'),
+            regions(doc).map(region => region[0]).join(', '), h('br'),
+            both('用于：', 'Used in: '), ...sectionsOf(doc).flatMap((s, index) => [index ? ', ' : '', ...localized('span', sectionValues(map.sections[s]))]),
+            others ? [h('br'), h('span', { class: 'context-source-tip-area' }, both('另有 ' + others + ' 篇文章也引用它', others + (others === 1 ? ' other article cites it' : ' other articles cite it')))] : null]);
+        };
+        const graph = h('div', { class: 'context-source-graph' }, [
+          h('svg', { viewBox: '0 0 ' + map.w + ' ' + map.h, role: 'img', 'aria-label': chinese.value ? '来源图示' : 'Source map' }, [
+            h('defs', null, clusters.flatMap(area => [goo('context-source-line' + area, colorOf(area)),
+              goo('context-source-blob' + area, 'color-mix(in srgb, ' + colorOf(area) + ' 12%, var(--vp-c-bg))')])),
+            h('g', { class: 'context-source-blobs' }, [...blob(map.sectionArea.blobs, -1), ...map.areas.flatMap((area, index) => blob(area.blobs, index))]),
+            h('g', null, links.map(link => h('path', { class: 'context-source-edge' + (focus ? touches(link) ? ' is-active' : ' is-dim' : ''),
+              d: curve(link) }))),
+            h('g', null, [
+              ...map.sections.map((section, index) => h('a', { href: sectionHref(section), class: 'context-source-node' + dim('s' + index),
+                transform: 'translate(' + section.x + ',' + section.y + ')', ...track('s', index) }, [
+                h('circle', { r: 7.5, style: { fill: colorOf(-1) } }),
+                ...svgLabel(sectionValues(section), section, 12, { y: 21.5, 'text-anchor': 'middle', class: 'context-source-label is-section' }),
+              ])),
+              ...map.docs.map((doc, index) => h(docHref(doc) ? 'a' : 'g', { ...(docHref(doc) ? { href: docHref(doc), ...external } : {}),
+                class: 'context-source-node' + dim('d' + index), transform: 'translate(' + doc.x + ',' + doc.y + ')', ...track('d', index) }, [
+                h('circle', { r: doc.r, style: { fill: colorOf(doc.area) } }),
+                ...svgLabel([doc.title], doc, 18, { y: doc.r + 14, 'text-anchor': 'middle', class: 'context-source-label' }),
+              ])),
+            ]),
+            h('g', null, [...areaLabel(map.sectionArea, -1), ...map.areas.flatMap((area, index) => areaLabel(area, index))]),
+          ]),
+          tip(),
+          h('div', { class: 'context-source-hint' }, both('悬停查看对应关系，点击来源打开引用的原文位置', 'Hover to trace sections and sources; click a source to open the cited lines')),
+        ]);
+        const list = h('div', { class: 'context-source-list' }, map.areas.map((area, a) => {
+          const docs = map.docs.map((doc, d) => [doc, d]).filter(([doc]) => doc.area === a);
+          return h('div', { class: 'context-source-group' }, [
+            h('div', { class: 'context-source-group-title' }, [h('i', { style: { background: area.color } }), ...localized('span', mapValues(area.label, () => '')),
+              h('small', null, both(docs.length + ' 份材料', docs.length + (docs.length === 1 ? ' document' : ' documents')))]),
+            ...docs.map(([doc]) => {
+              const lines = regions(doc);
+              return h('div', { class: 'context-source-item' }, [
+                // Title and path share the first line, cited regions sit at its end, sections below.
+                h('div', { class: 'context-source-item-head' }, [
+                  docHref(doc) ? h('a', { class: 'context-source-item-title', href: docHref(doc), ...external }, doc.title) : h('span', { class: 'context-source-item-title' }, doc.title),
+                  h('span', { class: 'context-source-path', title: doc.path }, doc.path),
+                ]),
+                h('div', { class: 'context-source-regions' }, [...lines.slice(0, 3).map(([label, href]) => href ? h('a', { href, ...external }, label) : h('span', null, label)),
+                  lines.length > 3 ? h('em', { title: lines.slice(3).map(line => line[0]).join(', ') }, '+' + (lines.length - 3)) : null]),
+                h('div', { class: 'context-source-uses' }, sectionsOf(doc).map(s => h('a', { href: sectionHref(map.sections[s]) }, localized('span', sectionValues(map.sections[s]))))),
+              ]);
+            }),
+          ]);
+        }));
+        const others = map.others.length;
+        return h('section', { class: 'context-sources context-source-map' }, [
+          h('div', { class: 'context-sources-header' }, [
+            h('div', null, [h('div', { class: 'context-sources-title' }, both('来源与溯源', 'Sources')),
+              h('div', { class: 'context-source-meta' }, both(map.sections.length + ' 个段落 · 引用 ' + map.docs.length + ' 份材料 · 来自 ' + map.areas.length + ' 处来源 · ' + refCount + ' 处引用',
+                map.sections.length + ' sections · ' + map.docs.length + ' documents · ' + map.areas.length + ' sources · ' + refCount + ' citations'))]),
+            h('div', { class: 'context-source-switch', role: 'tablist' }, [['graph', '图示', 'Map'], ['list', '列表', 'List']].map(([view, zh, en]) =>
+              h('button', { type: 'button', role: 'tab', 'aria-selected': String(sourceView.value === view), class: sourceView.value === view ? 'is-active' : '',
+                onClick: () => setSourceView(view) }, both(zh, en)))),
+          ]),
+          h('div', { class: 'context-source-card' + (sourceView.value === 'list' ? ' is-list' : '') }, [graph, list]),
+          others ? h('div', { class: 'context-source-others' }, [
+            h('span', null, both('另有 ' + others + ' 篇文章引用了相同的材料：', others + (others === 1 ? ' other article cites the same material:' : ' other articles cite the same material:'))),
+            ...(allOthers.value ? map.others : map.others.slice(0, 6)).map(other => h('a', { href: data.site.value.base + other.href.slice(1) },
+              localized('span', mapValues(other.titles, () => '')))),
+            others > 6 && !allOthers.value ? h('button', { type: 'button', onClick: () => { allOthers.value = true; } }, both('查看全部', 'Show all')) : null,
+          ]) : null,
+        ]);
+      };
       const sitePath = () => {
         const base = data.site.value.base;
         return route.path.startsWith(base) ? '/' + route.path.slice(base.length) : route.path;
       };
       watch(() => route.path, () => {
         allSources.value = false;
+        allOthers.value = false;
+        sourceFocus.value = null;
         const path = sitePath();
         const direct = sections.value.find(section => section.href === path);
         const current = sections.value.find(section => section.key === selected.value);
@@ -445,8 +635,9 @@ export default {
         ]),
         'doc-footer-before': () => {
           const sources = data.frontmatter.value.contextSources || [];
+          const sourceMap = data.frontmatter.value.contextSourceMap;
           return h('div', { class: 'context-provenance' }, [
-            sources.length ? h('section', { class: 'context-sources' }, [
+            sourceMap ? sourceMapSection(sourceMap) : sources.length ? h('section', { class: 'context-sources' }, [
               h('div', { class: 'context-sources-header' }, [
                 h('div', { class: 'context-sources-title' }, both('来源与溯源', 'Sources')),
               ]),
@@ -753,6 +944,57 @@ ${readerContentStyles(".vp-doc")}
 .context-sources li + li { margin-top: 6px; }
 .context-sources a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
 .context-sources a:hover { color: var(--vp-c-brand-1); border-color: currentColor; }
+/* Map links are chips and labels; hover changes their colour only. */
+.context-source-map a:hover { border-color: transparent; }
+.context-source-map { padding: 18px 20px 16px; }
+.context-source-map .context-sources-header { align-items: center; margin-bottom: 12px; }
+.context-source-map .context-sources-title { color: var(--vp-c-text-1); font-size: 14px; }
+.context-source-meta { margin-top: 2px; color: var(--vp-c-text-2); font-size: 12px; }
+.context-source-switch { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--vp-c-default-soft); }
+.context-source-switch button { padding: 2px 13px; border-radius: 7px; color: var(--vp-c-text-2); font-size: 12.5px; line-height: 1.8; cursor: pointer; }
+.context-source-switch button.is-active { background: var(--vp-c-bg); color: var(--vp-c-text-1); box-shadow: 0 0 0 1px var(--vp-c-divider); }
+.context-source-card { overflow: hidden; border: 1px solid var(--vp-c-divider); border-radius: 12px; background: var(--vp-c-bg); }
+.context-source-graph { position: relative; }
+.context-source-graph svg { display: block; width: 100%; height: auto; }
+.context-source-card.is-list .context-source-graph, .context-source-card:not(.is-list) .context-source-list { display: none; }
+.context-source-blobs { pointer-events: none; }
+/* Neutral lines and labels; colour belongs to the blobs and nodes. */
+.context-source-edge { fill: none; stroke: color-mix(in srgb, var(--vp-c-text-1) 17%, var(--vp-c-bg)); stroke-width: 1; transition: opacity .12s; }
+.context-source-edge.is-active { stroke: color-mix(in srgb, #7c5cff 60%, var(--vp-c-bg)); stroke-width: 1.6; }
+.context-source-node { cursor: pointer; transition: opacity .12s; }
+.context-source-node circle { stroke: var(--vp-c-bg); stroke-width: 1.5; }
+.context-source-map a.context-source-node, .context-source-map a.context-source-node:hover { border: 0; }
+.context-source-edge.is-dim, .context-source-node.is-dim { opacity: .14; }
+.context-source-label { fill: color-mix(in srgb, var(--vp-c-text-1) 62%, var(--vp-c-bg)); font-size: 11.5px; pointer-events: none; }
+.context-source-area-label { font-size: 12px; font-weight: 600; pointer-events: none; }
+.context-source-hint { margin-top: -4px; padding: 0 14px 10px; color: var(--vp-c-text-3); font-size: 11.5px; }
+.context-source-tip { position: absolute; z-index: 2; min-width: 200px; max-width: 300px; padding: 8px 12px; border: 1px solid var(--vp-c-divider); border-radius: 10px;
+  background: var(--vp-c-bg); color: var(--vp-c-text-1); font-size: 12px; line-height: 1.6; pointer-events: none; }
+.context-source-tip b { display: block; margin-bottom: 2px; font-size: 12.5px; }
+.context-source-tip-area { color: var(--vp-c-text-2); }
+.context-source-list { padding: 4px 18px 14px; }
+.context-source-group { padding: 12px 0 4px; border-bottom: 1px solid var(--vp-c-divider); }
+.context-source-group:last-child { border-bottom: 0; }
+.context-source-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--vp-c-text-1); font-size: 13px; font-weight: 600; }
+.context-source-group-title i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
+.context-source-group-title small { color: var(--vp-c-text-3); font-size: 12px; font-weight: 400; }
+.context-source-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 6px 0 6px 17px; }
+.context-source-item-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
+.context-source-map .context-source-item-title { flex: none; max-width: 60%; overflow: hidden; color: var(--vp-c-text-1); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
+.context-source-regions { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 4px; grid-row: 1; grid-column: 2; white-space: nowrap; }
+.context-source-map .context-source-regions a, .context-source-regions span { padding: 0 7px; border: 0; border-radius: 6px; background: var(--vp-c-default-soft);
+  color: var(--vp-c-text-2); font-family: var(--vp-font-family-mono); font-size: 11px; }
+.context-source-regions em { padding: 0 4px; color: var(--vp-c-text-3); font-style: normal; font-size: 11px; }
+.context-source-path { min-width: 0; overflow: hidden; color: var(--vp-c-text-3); font-family: var(--vp-font-family-mono); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
+.context-source-uses { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / 3; }
+.context-source-map .context-source-uses a { padding: 0 6px; border: 0; border-radius: 6px; background: color-mix(in srgb, #7c5cff 10%, var(--vp-c-bg)); color: color-mix(in srgb, #7c5cff 85%, var(--vp-c-text-1)); font-size: 11.5px; }
+.context-source-others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 12px; }
+.context-source-map .context-source-others a { padding: 0 9px; border: 1px solid var(--vp-c-divider); border-radius: 999px; }
+.context-source-others button { color: var(--vp-c-brand-1); font-size: 12px; cursor: pointer; }
+@media (max-width: 640px) {
+  .context-source-switch, .context-source-card .context-source-graph { display: none !important; }
+  .context-source-card .context-source-list { display: block !important; }
+}
 .vp-doc a.context-source-link { font-weight: inherit; border-bottom: 0; }
 .vp-doc a.context-source-link::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .25em; vertical-align: -.1em; background: currentColor; opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat; transition: opacity .15s; }
 .vp-doc a.context-source-link > code { border-bottom: 1px dotted color-mix(in srgb, var(--vp-c-text-1) 55%, transparent); transition: color .15s, border-color .15s; }
diff --git a/packages/context/docs/guides/package-outputs.md b/packages/context/docs/guides/package-outputs.md
index 57c87985..6b577b47 100644
--- a/packages/context/docs/guides/package-outputs.md
+++ b/packages/context/docs/guides/package-outputs.md
@@ -115,7 +115,18 @@ zoom, full-screen and source controls. Controls appear on hover or keyboard focu
 (and remain visible on touch devices). Layout and source/copy actions are on the
 left, sizing actions on the right. Source view replaces the diagram. Flowcharts default to ELK and can switch to Dagre without changing the article. Offline Review reports use the same
 viewer and include its resources only when a candidate contains Mermaid.
-Article provenance initially shows ten sources; Show more reveals the full list.
+Each article ends with its sources as a map: the article's sections in the
+middle and the documents they cite around them, grouped by where each document
+comes from (a repository directory, Lark documents or notes). Sections are purple;
+sources are coloured by type: repository files green, Skills magenta, Lark
+documents blue and notes orange. Hovering a section
+or document highlights what it is linked to; clicking a document opens the cited
+lines, and clicking a section scrolls to it. A List view shows the same documents
+by group with their cited line ranges, and narrow screens show only the list.
+Below the map, other articles citing the same documents are linked. The map is
+computed while building from the recorded references, so it needs no agent
+step; set `site.sourceMap: false` to show the plain source list instead, which
+initially shows ten sources; Show more reveals the full list.
 Invalid diagrams and diagrams with embedded image/HTML resources retain their
 source with a rendering notice instead of blocking publication. Code samples and raw HTML are
 displayed as content, not executed as Vue components or scripts.
diff --git a/packages/context/docs/reference/project-api.md b/packages/context/docs/reference/project-api.md
index 8c948880..a7aeeb00 100644
--- a/packages/context/docs/reference/project-api.md
+++ b/packages/context/docs/reference/project-api.md
@@ -185,7 +185,8 @@ the same build, beside the KB directory. `<base>` removes one trailing `-kb`
 from the package name, if present. Omit it for KB-only output. It accepts `title`, `description`,
 `lang`, a deployment `base` path, an optional top-bar `titleLink`, and an
 optional `home` presentation. Navigation and language fields are `nav`, `more`,
-`socialLinks`, `locales` and `localePreferenceKey`; see
+`socialLinks`, `locales` and `localePreferenceKey`; `sourceMap: false` replaces
+the per-article source map with a plain source list; see
 [Package Outputs](../guides/package-outputs.md) and
 [Site translation](../guides/site-translation.md). `home`
 accepts `title`, `slogan`, `description`, hero `actions`, and `resources` shown
diff --git a/packages/context/package.json b/packages/context/package.json
index b9ddf4af..146c737b 100644
--- a/packages/context/package.json
+++ b/packages/context/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/context",
   "description": "Declarative SDK for Context knowledge sources, workflows, review, and package outputs",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/context/src/__tests__/packageSite.test.ts b/packages/context/src/__tests__/packageSite.test.ts
index 1d9bcc64..c3cf793f 100644
--- a/packages/context/src/__tests__/packageSite.test.ts
+++ b/packages/context/src/__tests__/packageSite.test.ts
@@ -5,6 +5,9 @@ test("website is opt-in and deployment paths are constrained", () => {
   const base = { name: "sample", template: "src/templates" };
   expect(kbPackage(base).site).toBeUndefined();
   expect(kbPackage({ ...base, site: {} }).site).toEqual({ base: "/", lang: "en-US" });
+  // The source map is on unless a site turns it off; the default adds nothing to the parsed config.
+  expect(kbPackage({ ...base, site: { sourceMap: false } }).site?.sourceMap).toBe(false);
+  expect(() => kbPackage({ ...base, site: { sourceMap: "off" as never } })).toThrow();
   expect(kbPackage({ ...base, site: { base: "/docs/" } }).site?.base).toBe("/docs/");
   expect(kbPackage({ ...base, site: { home: {
     title: "Team knowledge", slogan: "Find the next answer", actions: [{ text: "Browse", link: "/guide/" }],
diff --git a/packages/context/src/packageSite.ts b/packages/context/src/packageSite.ts
index 22727b1d..d582c38e 100644
--- a/packages/context/src/packageSite.ts
+++ b/packages/context/src/packageSite.ts
@@ -83,6 +83,11 @@ export const packageSiteSchema = z.object({
   /** Items appended to the More menu after LLM Docs and Changelog. */
   more: z.array(packageSiteMoreItemSchema).optional(),
   socialLinks: z.array(packageSiteSocialLinkSchema).optional(),
+  /**
+   * Show each article's sources as a map (sections, the documents they cite, grouped by source)
+   * with a list view to switch to. On by default; `false` keeps the plain source list.
+   */
+  sourceMap: z.boolean().optional(),
   /** Shared localStorage key so sites on one origin keep the same reader language. */
   localePreferenceKey: z.string().regex(/^[a-zA-Z0-9:._-]+$/u).optional(),
   /** Trusted presentation code, relative to the workspace; never captured knowledge. */
diff --git a/packages/core/package.json b/packages/core/package.json
index 6c200201..eb140b81 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/core",
   "description": "Shared extraction types, schemas, and utilities for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/dev-cli/package.json b/packages/dev-cli/package.json
index f2c236d6..e4b1b9be 100644
--- a/packages/dev-cli/package.json
+++ b/packages/dev-cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/dev-cli",
   "description": "Developer menu for Context build, verification, link, and release preparation",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "private": true,
   "type": "module",
   "license": "MIT",
diff --git a/packages/extract-contract/package.json b/packages/extract-contract/package.json
index a398662b..37340e35 100644
--- a/packages/extract-contract/package.json
+++ b/packages/extract-contract/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-contract",
   "description": "OpenAPI and GraphQL contract catalog adapter for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract-go/package.json b/packages/extract-go/package.json
index 338116f0..31959ed0 100644
--- a/packages/extract-go/package.json
+++ b/packages/extract-go/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-go",
   "description": "Go extraction plugin and structural index for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract-mdx/package.json b/packages/extract-mdx/package.json
index a6053c11..c65834d7 100644
--- a/packages/extract-mdx/package.json
+++ b/packages/extract-mdx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-mdx",
   "description": "MDX component and example catalog bridge for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract-proto/package.json b/packages/extract-proto/package.json
index 60b505b9..b098c3d4 100644
--- a/packages/extract-proto/package.json
+++ b/packages/extract-proto/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-proto",
   "description": "Protocol Buffers IDL catalog parser for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract-rush/package.json b/packages/extract-rush/package.json
index 87c5217f..cc4dabd7 100644
--- a/packages/extract-rush/package.json
+++ b/packages/extract-rush/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-rush",
   "description": "Rush workspace structural index for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract-sql/package.json b/packages/extract-sql/package.json
index 030ddbfc..19737442 100644
--- a/packages/extract-sql/package.json
+++ b/packages/extract-sql/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-sql",
   "description": "Dialect-bound lightweight SQL evidence adapter for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract-style/package.json b/packages/extract-style/package.json
index e4d07fed..0083a232 100644
--- a/packages/extract-style/package.json
+++ b/packages/extract-style/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-style",
   "description": "Lightweight CSS and SCSS evidence adapter for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract-thrift/package.json b/packages/extract-thrift/package.json
index de89d38e..fd467187 100644
--- a/packages/extract-thrift/package.json
+++ b/packages/extract-thrift/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-thrift",
   "description": "Apache Thrift IDL catalog parser for Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract-ts/package.json b/packages/extract-ts/package.json
index de666b4c..edd0e37d 100644
--- a/packages/extract-ts/package.json
+++ b/packages/extract-ts/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract-ts",
   "description": "TypeScript and JavaScript extraction plugin for the Context ExtractionResult v2 contract",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/extract/package.json b/packages/extract/package.json
index 055245ca..e20d29a6 100644
--- a/packages/extract/package.json
+++ b/packages/extract/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/extract",
   "description": "Language-plugin framework and repository runner for Context code evidence",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "type": "module",
   "license": "MIT",
   "engines": {
diff --git a/packages/tui/package.json b/packages/tui/package.json
index acaf441c..8b8abb51 100644
--- a/packages/tui/package.json
+++ b/packages/tui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@c4a/tui",
   "description": "Shared terminal UI components (Ink + React) for Context development tools",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "private": true,
   "type": "module",
   "license": "MIT",
diff --git a/plugins/context/repo-install/claude/.claude-plugin/plugin.json b/plugins/context/repo-install/claude/.claude-plugin/plugin.json
index f8c0d967..c06834da 100644
--- a/plugins/context/repo-install/claude/.claude-plugin/plugin.json
+++ b/plugins/context/repo-install/claude/.claude-plugin/plugin.json
@@ -1,7 +1,7 @@
 {
   "name": "c4a",
   "description": "Start or continue a project-local knowledge workspace through one graph-routed entry.",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "author": {
     "name": "c4a"
   },
diff --git a/plugins/context/repo-install/codex/.codex-plugin/plugin.json b/plugins/context/repo-install/codex/.codex-plugin/plugin.json
index b77987a7..aac9ca1e 100644
--- a/plugins/context/repo-install/codex/.codex-plugin/plugin.json
+++ b/plugins/context/repo-install/codex/.codex-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "c4a",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "description": "Start or continue a project-local knowledge workspace through one graph-routed entry.",
   "author": { "name": "c4a" },
   "homepage": "https://github.com/context4ai/c4a",
@@ -10,7 +10,7 @@
   "skills": "./skills/",
   "interface": {
     "displayName": "C4A Context",
-    "shortDescription": "Initialize and advance a local, source-linked project knowledge workspace.\nv0.7.86",
+    "shortDescription": "Initialize and advance a local, source-linked project knowledge workspace.\nv0.7.87",
     "longDescription": "Create a Context workspace and use agent-guided next steps to register sources, run extraction, review candidates, build package outputs, and verify health without silently mutating source repositories.",
     "developerName": "c4a",
     "category": "Productivity",
diff --git a/plugins/context/repo-install/cursor/.cursor-plugin/plugin.json b/plugins/context/repo-install/cursor/.cursor-plugin/plugin.json
index eab2d869..4a862d8a 100644
--- a/plugins/context/repo-install/cursor/.cursor-plugin/plugin.json
+++ b/plugins/context/repo-install/cursor/.cursor-plugin/plugin.json
@@ -1,7 +1,7 @@
 {
   "name": "c4a",
   "displayName": "C4A Context",
-  "version": "0.7.86",
+  "version": "0.7.87",
   "description": "Start or continue a project-local knowledge workspace through one graph-routed entry.",
   "author": {
     "name": "Context4AI",