spb/countryatlas

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

added apps/web/.env.example +4 −0

				@@ -0,0 +1,4 @@
		1	+# Server-side API base (FastAPI, loopback). Client code calls same-origin /api/v1/* which Next rewrites here.
		2	+API_URL=http://127.0.0.1:8291
		3	+# Public site URL used for canonical links, OpenGraph and the sitemap.
		4	+NEXT_PUBLIC_SITE_URL=https://www.countryatlas.co

added apps/web/next.config.ts +50 −0

				@@ -0,0 +1,50 @@
		1	+import type { NextConfig } from 'next';
		2	+import { existsSync } from 'node:fs';
		3	+import path from 'node:path';
		4	+
		5	+// Monorepo: a single `.env` may live at the repository root; Next only reads the app directory.
		6	+for (const candidate of [path.resolve(process.cwd(), '../../.env'), path.resolve(process.cwd(), '.env')]) {
		7	+ if (existsSync(candidate)) {
		8	+ try {
		9	+ process.loadEnvFile(candidate);
		10	+ } catch {
		11	+ /* ignore malformed env */
		12	+ }
		13	+ }
		14	+}
		15	+
		16	+const API_URL = process.env.API_URL ?? 'http://127.0.0.1:8291';
		17	+
		18	+const nextConfig: NextConfig = {
		19	+ reactStrictMode: true,
		20	+ poweredByHeader: false,
		21	+ allowedDevOrigins: ['127.0.0.1', 'localhost'],
		22	+ outputFileTracingRoot: path.resolve(__dirname, '../..'),
		23	+ experimental: {
		24	+ optimizePackageImports: ['lucide-react'],
		25	+ },
		26	+ // Browser-side fetches go to the same origin; the FastAPI service is loopback-only (ARCHITECTURE §1, §9).
		27	+ async rewrites() {
		28	+ return [{ source: '/api/v1/:path*', destination: `${API_URL}/api/v1/:path*` }];
		29	+ },
		30	+ async headers() {
		31	+ const PUBLIC_CACHE = { key: 'Cache-Control', value: 'public, s-maxage=600, stale-while-revalidate=3600' };
		32	+ const NO_STORE = { key: 'Cache-Control', value: 'private, no-store' };
		33	+ return [
		34	+ {
		35	+ source: '/(.*)',
		36	+ headers: [
		37	+ { key: 'X-Content-Type-Options', value: 'nosniff' },
		38	+ { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
		39	+ { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
		40	+ { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
		41	+ ],
		42	+ },
		43	+ { source: '/countries/:path*', headers: [PUBLIC_CACHE] },
		44	+ { source: '/api/:path*', headers: [NO_STORE] },
		45	+ { source: '/admin/:path*', headers: [NO_STORE] },
		46	+ ];
		47	+ },
		48	+};
		49	+
		50	+export default nextConfig;

added apps/web/package.json +40 −0

				@@ -0,0 +1,40 @@
		1	+{
		2	+ "name": "@countryatlas/web",
		3	+ "version": "0.1.0",
		4	+ "private": true,
		5	+ "scripts": {
		6	+ "dev": "next dev -p 8290",
		7	+ "build": "next build",
		8	+ "start": "next start -p 8290 -H 0.0.0.0",
		9	+ "typecheck": "tsc -p tsconfig.json --noEmit",
		10	+ "lint": "next lint",
		11	+ "qa": "node qa/screens.mjs",
		12	+ "mock-api": "node qa/mock-api.mjs"
		13	+ },
		14	+ "dependencies": {
		15	+ "d3-geo": "^3.1.1",
		16	+ "d3-scale": "^4.0.2",
		17	+ "d3-shape": "^3.2.0",
		18	+ "lucide-react": "^1.0.0",
		19	+ "next": "16.3.4",
		20	+ "react": "19.2.8",
		21	+ "react-dom": "19.2.8",
		22	+ "server-only": "^0.0.1",
		23	+ "topojson-client": "^3.1.0",
		24	+ "world-atlas": "^2.0.2"
		25	+ },
		26	+ "devDependencies": {
		27	+ "@tailwindcss/postcss": "^4",
		28	+ "@types/d3-geo": "^3.1.1",
		29	+ "@types/d3-scale": "^4.0.9",
		30	+ "@types/d3-shape": "^3.1.7",
		31	+ "@types/geojson": "^7946.0.16",
		32	+ "@types/node": "^24.0.0",
		33	+ "@types/react": "^19",
		34	+ "@types/react-dom": "^19",
		35	+ "@types/topojson-client": "^3.1.5",
		36	+ "@types/topojson-specification": "^1.0.5",
		37	+ "tailwindcss": "^4",
		38	+ "typescript": "^5.9.3"
		39	+ }
		40	+}

added apps/web/postcss.config.mjs +7 −0

				@@ -0,0 +1,7 @@
		1	+const config = {
		2	+ plugins: {
		3	+ '@tailwindcss/postcss': {},
		4	+ },
		5	+};
		6	+
		7	+export default config;

added apps/web/src/app/globals.css +348 −0

				@@ -0,0 +1,348 @@
		1	+@import 'tailwindcss';
		2	+
		3	+/*
		4	+ CountryAtlas design tokens.
		5	+ Editorial, calm, data-dense. Raw values live on :root / .dark; Tailwind utilities read them through
		6	+ `@theme inline`, so `bg-paper`, `text-ink-2`, `border-rule`, `text-up`, `fill-series-1` … follow the theme.
		7	+ Series/sequential colours are the validated dataviz palette (skills/dataviz references/palette.md),
		8	+ re-validated against these surfaces on 2026-09-11 (see apps/web/README.md → Design tokens).
		9	+*/
		10	+@custom-variant dark (&:where(.dark, .dark *));
		11	+
		12	+:root {
		13	+ color-scheme: light;
		14	+ --paper: #fbfaf7; /* page plane */
		15	+ --surface: #ffffff; /* chart surface, sheets, dialogs */
		16	+ --surface-2: #f3f1ec; /* hover wash, chips */
		17	+ --ink: #1a1917;
		18	+ --ink-2: #5c5a55;
		19	+ --ink-3: #8a877f;
		20	+ --rule: #e6e3dc;
		21	+ --rule-strong: #c9c6bd;
		22	+ --accent: #1c5cab;
		23	+ --accent-ink: #ffffff;
		24	+ --accent-soft: #e8f0fb;
		25	+ --up: #006300;
		26	+ --down: #b02a2a;
		27	+ --warn: #9a6a00;
		28	+ --nodata: #d9d6ce;
		29	+ --forecast: #8a877f;
		30	+
		31	+ --series-1: #2a78d6;
		32	+ --series-2: #eb6834;
		33	+ --series-3: #1baf7a;
		34	+ --series-4: #eda100;
		35	+ --series-5: #e87ba4;
		36	+ --series-6: #008300;
		37	+ --series-7: #4a3aa7;
		38	+ --series-8: #e34948;
		39	+
		40	+ --seq-1: #cde2fb;
		41	+ --seq-2: #9ec5f4;
		42	+ --seq-3: #6da7ec;
		43	+ --seq-4: #3987e5;
		44	+ --seq-5: #256abf;
		45	+ --seq-6: #184f95;
		46	+ --seq-7: #0d366b;
		47	+
		48	+ --shadow-sheet: 0 -8px 32px rgba(26, 25, 23, 0.12);
		49	+ --shadow-pop: 0 4px 24px rgba(26, 25, 23, 0.14);
		50	+}
		51	+
		52	+.dark {
		53	+ color-scheme: dark;
		54	+ --paper: #151513;
		55	+ --surface: #1c1c1a;
		56	+ --surface-2: #24241f;
		57	+ --ink: #f2f0ea;
		58	+ --ink-2: #c9c6bd;
		59	+ --ink-3: #8a877f;
		60	+ --rule: #2c2b28;
		61	+ --rule-strong: #3a3935;
		62	+ --accent: #5598e7;
		63	+ --accent-ink: #0d1b2e;
		64	+ --accent-soft: #17304f;
		65	+ --up: #0ca30c;
		66	+ --down: #e66767;
		67	+ --warn: #e0a100;
		68	+ --nodata: #33322f;
		69	+ --forecast: #8a877f;
		70	+
		71	+ --series-1: #3987e5;
		72	+ --series-2: #d95926;
		73	+ --series-3: #199e70;
		74	+ --series-4: #c98500;
		75	+ --series-5: #d55181;
		76	+ --series-6: #008300;
		77	+ --series-7: #9085e9;
		78	+ --series-8: #e66767;
		79	+
		80	+ --seq-1: #0d366b;
		81	+ --seq-2: #184f95;
		82	+ --seq-3: #256abf;
		83	+ --seq-4: #3987e5;
		84	+ --seq-5: #6da7ec;
		85	+ --seq-6: #9ec5f4;
		86	+ --seq-7: #cde2fb;
		87	+
		88	+ --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5);
		89	+ --shadow-pop: 0 4px 24px rgba(0, 0, 0, 0.55);
		90	+}
		91	+
		92	+@theme inline {
		93	+ --color-paper: var(--paper);
		94	+ --color-surface: var(--surface);
		95	+ --color-surface-2: var(--surface-2);
		96	+ --color-ink: var(--ink);
		97	+ --color-ink-2: var(--ink-2);
		98	+ --color-ink-3: var(--ink-3);
		99	+ --color-rule: var(--rule);
		100	+ --color-rule-strong: var(--rule-strong);
		101	+ --color-accent: var(--accent);
		102	+ --color-accent-ink: var(--accent-ink);
		103	+ --color-accent-soft: var(--accent-soft);
		104	+ --color-up: var(--up);
		105	+ --color-down: var(--down);
		106	+ --color-warn: var(--warn);
		107	+ --color-nodata: var(--nodata);
		108	+ --color-forecast: var(--forecast);
		109	+ --color-series-1: var(--series-1);
		110	+ --color-series-2: var(--series-2);
		111	+ --color-series-3: var(--series-3);
		112	+ --color-series-4: var(--series-4);
		113	+ --color-series-5: var(--series-5);
		114	+ --color-series-6: var(--series-6);
		115	+ --color-series-7: var(--series-7);
		116	+ --color-series-8: var(--series-8);
		117	+ --color-seq-1: var(--seq-1);
		118	+ --color-seq-2: var(--seq-2);
		119	+ --color-seq-3: var(--seq-3);
		120	+ --color-seq-4: var(--seq-4);
		121	+ --color-seq-5: var(--seq-5);
		122	+ --color-seq-6: var(--seq-6);
		123	+ --color-seq-7: var(--seq-7);
		124	+
		125	+ --font-ui: var(--font-ui), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
		126	+ --font-display: var(--font-display), 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
		127	+ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
		128	+
		129	+ /* Typographic scale (rem). Body 15px on mobile, 16px from md. */
		130	+ --text-2xs: 0.6875rem;
		131	+ --text-2xs--line-height: 1rem;
		132	+ --text-xs: 0.75rem;
		133	+ --text-xs--line-height: 1.1rem;
		134	+ --text-sm: 0.875rem;
		135	+ --text-sm--line-height: 1.3rem;
		136	+ --text-base: 1rem;
		137	+ --text-base--line-height: 1.55rem;
		138	+ --text-lg: 1.125rem;
		139	+ --text-lg--line-height: 1.6rem;
		140	+ --text-xl: 1.3125rem;
		141	+ --text-xl--line-height: 1.75rem;
		142	+ --text-2xl: 1.625rem;
		143	+ --text-2xl--line-height: 2rem;
		144	+ --text-3xl: 2rem;
		145	+ --text-3xl--line-height: 2.3rem;
		146	+ --text-4xl: 2.5rem;
		147	+ --text-4xl--line-height: 2.75rem;
		148	+ --text-5xl: 3.25rem;
		149	+ --text-5xl--line-height: 3.4rem;
		150	+
		151	+ --shadow-sheet: var(--shadow-sheet);
		152	+ --shadow-pop: var(--shadow-pop);
		153	+
		154	+ --radius-xs: 2px;
		155	+ --radius-sm: 4px;
		156	+ --radius-md: 6px;
		157	+}
		158	+
		159	+@layer base {
		160	+ html {
		161	+ font-family: var(--font-ui);
		162	+ background: var(--paper);
		163	+ color: var(--ink);
		164	+ -webkit-text-size-adjust: 100%;
		165	+ text-rendering: optimizeLegibility;
		166	+ scroll-padding-top: 6.5rem;
		167	+ }
		168	+ html,
		169	+ body {
		170	+ /* Never scroll horizontally; individual scrollers opt in with overflow-x-auto. */
		171	+ overflow-x: clip;
		172	+ max-width: 100%;
		173	+ }
		174	+ body {
		175	+ font-size: 15px;
		176	+ line-height: 1.55;
		177	+ min-height: 100dvh;
		178	+ background: var(--paper);
		179	+ color: var(--ink);
		180	+ }
		181	+ @media (min-width: 48rem) {
		182	+ body {
		183	+ font-size: 16px;
		184	+ }
		185	+ }
		186	+ h1,
		187	+ h2,
		188	+ h3 {
		189	+ text-wrap: balance;
		190	+ }
		191	+ p {
		192	+ text-wrap: pretty;
		193	+ }
		194	+ a {
		195	+ text-underline-offset: 0.15em;
		196	+ }
		197	+ :focus-visible {
		198	+ outline: 2px solid var(--accent);
		199	+ outline-offset: 2px;
		200	+ border-radius: 2px;
		201	+ }
		202	+ ::selection {
		203	+ background: var(--accent-soft);
		204	+ color: var(--ink);
		205	+ }
		206	+ svg {
		207	+ display: block;
		208	+ }
		209	+ button {
		210	+ cursor: pointer;
		211	+ }
		212	+ [hidden] {
		213	+ display: none !important;
		214	+ }
		215	+ @media (prefers-reduced-motion: reduce) {
		216	+ *,
		217	+ *::before,
		218	+ *::after {
		219	+ animation-duration: 0.01ms !important;
		220	+ animation-iteration-count: 1 !important;
		221	+ transition-duration: 0.01ms !important;
		222	+ scroll-behavior: auto !important;
		223	+ }
		224	+ }
		225	+}
		226	+
		227	+@utility tnum {
		228	+ font-variant-numeric: tabular-nums lining-nums;
		229	+ font-feature-settings: 'tnum' 1, 'lnum' 1;
		230	+}
		231	+@utility pnum {
		232	+ font-variant-numeric: proportional-nums lining-nums;
		233	+}
		234	+@utility display {
		235	+ font-family: var(--font-display);
		236	+ font-weight: 500;
		237	+ letter-spacing: -0.01em;
		238	+}
		239	+@utility eyebrow {
		240	+ font-size: var(--text-2xs);
		241	+ line-height: 1rem;
		242	+ letter-spacing: 0.08em;
		243	+ text-transform: uppercase;
		244	+ font-weight: 600;
		245	+ color: var(--ink-3);
		246	+}
		247	+@utility hairline {
		248	+ border-top: 1px solid var(--rule);
		249	+}
		250	+@utility tap {
		251	+ min-height: 44px;
		252	+ min-width: 44px;
		253	+}
		254	+@utility scrollbar-none {
		255	+ scrollbar-width: none;
		256	+ &::-webkit-scrollbar {
		257	+ display: none;
		258	+ }
		259	+}
		260	+@utility safe-bottom {
		261	+ padding-bottom: env(safe-area-inset-bottom, 0px);
		262	+}
		263	+@utility no-data-hatch {
		264	+ background-color: var(--nodata);
		265	+ background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(26, 25, 23, 0.14) 3px 4px);
		266	+}
		267	+@utility link-quiet {
		268	+ color: inherit;
		269	+ text-decoration: none;
		270	+ &:hover {
		271	+ color: var(--accent);
		272	+ }
		273	+}
		274	+@utility container-x {
		275	+ padding-left: 1rem;
		276	+ padding-right: 1rem;
		277	+ @media (min-width: 40rem) {
		278	+ padding-left: 1.5rem;
		279	+ padding-right: 1.5rem;
		280	+ }
		281	+}
		282	+
		283	+/* Chart chrome shared by the SVG kit (class names instead of inline styles so theme swaps repaint). */
		284	+.ca-chart text {
		285	+ font-family: var(--font-ui);
		286	+ font-variant-numeric: tabular-nums;
		287	+ fill: var(--ink-3);
		288	+ font-size: 11px;
		289	+}
		290	+.ca-chart .axis line,
		291	+.ca-chart .grid line {
		292	+ stroke: var(--rule);
		293	+ stroke-width: 1;
		294	+ shape-rendering: crispEdges;
		295	+}
		296	+.ca-chart .baseline {
		297	+ stroke: var(--rule-strong);
		298	+}
		299	+.ca-chart .series-line {
		300	+ fill: none;
		301	+ stroke-width: 2;
		302	+ stroke-linejoin: round;
		303	+ stroke-linecap: round;
		304	+}
		305	+.ca-chart .forecast {
		306	+ stroke-dasharray: 4 4;
		307	+}
		308	+.ca-chart .ring {
		309	+ stroke: var(--surface);
		310	+ stroke-width: 2;
		311	+}
		312	+.ca-chart .label {
		313	+ fill: var(--ink-2);
		314	+ font-size: 11px;
		315	+}
		316	+.ca-chart .label-strong {
		317	+ fill: var(--ink);
		318	+ font-weight: 600;
		319	+}
		320	+.ca-hatch {
		321	+ fill: url(#ca-nodata-hatch);
		322	+}
		323	+
		324	+/* Motion tokens */
		325	+@keyframes ca-sheet-up {
		326	+ from {
		327	+ transform: translateY(24px);
		328	+ opacity: 0;
		329	+ }
		330	+ to {
		331	+ transform: none;
		332	+ opacity: 1;
		333	+ }
		334	+}
		335	+@keyframes ca-fade {
		336	+ from {
		337	+ opacity: 0;
		338	+ }
		339	+ to {
		340	+ opacity: 1;
		341	+ }
		342	+}
		343	+.animate-sheet {
		344	+ animation: ca-sheet-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
		345	+}
		346	+.animate-fade {
		347	+ animation: ca-fade 160ms ease-out;
		348	+}

added apps/web/src/app/icon.svg +1 −0

				@@ -0,0 +1 @@
		1	+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 32 32" fill="none" stroke="#1c5cab" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect width="32" height="32" rx="7" fill="#fbfaf7"/><circle cx="16" cy="16" r="12"/><path d="M5 19.3h22"/><path d="M10.1 26.6 16 7.6l5.9 19"/><path d="M16 7.6c-3 2.9-4.3 7.1-4.3 11.7" opacity="0.55"/><path d="M16 7.6c3 2.9 4.3 7.1 4.3 11.7" opacity="0.55"/></svg>

added apps/web/src/app/layout.tsx +62 −0

				@@ -0,0 +1,62 @@
		1	+import type { Metadata, Viewport } from 'next';
		2	+import './globals.css';
		3	+import { t } from '@/i18n';
		4	+import { fontDisplay, fontUi } from '@/lib/fonts';
		5	+import { SITE_NAME, SITE_URL, TAGLINE } from '@/lib/site';
		6	+import { ProvenanceProvider } from '@/components/data/provenance-context';
		7	+import { ProvenanceSheet } from '@/components/data/provenance-sheet';
		8	+import { MobileTabBar } from '@/components/layout/mobile-tab-bar';
		9	+import { SearchContainer } from '@/components/layout/search-container';
		10	+import { SearchProvider } from '@/components/layout/search-context';
		11	+import { SiteFooter } from '@/components/layout/site-footer';
		12	+import { SiteHeader } from '@/components/layout/site-header';
		13	+import { THEME_BOOT } from '@/components/layout/theme-toggle';
		14	+
		15	+export const metadata: Metadata = {
		16	+ metadataBase: new URL(SITE_URL),
		17	+ title: { default: `${SITE_NAME} — ${TAGLINE}`, template: `%s — ${SITE_NAME}` },
		18	+ description: t('site.description'),
		19	+ applicationName: SITE_NAME,
		20	+ robots: { index: true, follow: true },
		21	+ alternates: { canonical: '/' },
		22	+ openGraph: { type: 'website', siteName: SITE_NAME, url: SITE_URL, title: `${SITE_NAME} — ${TAGLINE}`, description: t('site.description') },
		23	+ twitter: { card: 'summary_large_image', title: `${SITE_NAME} — ${TAGLINE}`, description: t('site.description') },
		24	+ icons: { icon: [{ url: '/icon.svg', type: 'image/svg+xml' }, { url: '/icon.png', sizes: '512x512', type: 'image/png' }], apple: [{ url: '/apple-icon.png', sizes: '180x180' }] },
		25	+};
		26	+
		27	+export const viewport: Viewport = {
		28	+ width: 'device-width',
		29	+ initialScale: 1,
		30	+ viewportFit: 'cover',
		31	+ themeColor: [
		32	+ { media: '(prefers-color-scheme: light)', color: '#fbfaf7' },
		33	+ { media: '(prefers-color-scheme: dark)', color: '#151513' },
		34	+ ],
		35	+};
		36	+
		37	+export default function RootLayout({ children }: { children: React.ReactNode }) {
		38	+ return (
		39	+ <html lang="en" className={`${fontUi.variable} ${fontDisplay.variable} h-full antialiased`} suppressHydrationWarning>
		40	+ <head>
		41	+ <script dangerouslySetInnerHTML={{ __html: THEME_BOOT }} />
		42	+ </head>
		43	+ <body className="flex min-h-full flex-col pb-[calc(56px+env(safe-area-inset-bottom,0px))] md:pb-0">
		44	+ <a href="#main" className="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-[200] focus:rounded-sm focus:bg-accent focus:px-3 focus:py-2 focus:text-sm focus:text-accent-ink">
		45	+ {t('site.skip')}
		46	+ </a>
		47	+ <ProvenanceProvider>
		48	+ <SearchProvider>
		49	+ <SiteHeader />
		50	+ <main id="main" className="container-x mx-auto w-full max-w-[1400px] flex-1">
		51	+ {children}
		52	+ </main>
		53	+ <SiteFooter />
		54	+ <MobileTabBar />
		55	+ <SearchContainer />
		56	+ <ProvenanceSheet />
		57	+ </SearchProvider>
		58	+ </ProvenanceProvider>
		59	+ </body>
		60	+ </html>
		61	+ );
		62	+}

added apps/web/src/app/manifest.ts +19 −0

				@@ -0,0 +1,19 @@
		1	+import type { MetadataRoute } from 'next';
		2	+import { SITE_NAME, TAGLINE } from '@/lib/site';
		3	+
		4	+export default function manifest(): MetadataRoute.Manifest {
		5	+ return {
		6	+ name: SITE_NAME,
		7	+ short_name: SITE_NAME,
		8	+ description: TAGLINE,
		9	+ start_url: '/',
		10	+ display: 'standalone',
		11	+ background_color: '#fbfaf7',
		12	+ theme_color: '#1c5cab',
		13	+ icons: [
		14	+ { src: '/icon.svg', type: 'image/svg+xml', sizes: 'any' },
		15	+ { src: '/icon.png', type: 'image/png', sizes: '512x512' },
		16	+ { src: '/apple-icon.png', type: 'image/png', sizes: '180x180' },
		17	+ ],
		18	+ };
		19	+}

added apps/web/src/components/brand/Logo.tsx +53 −0

				@@ -0,0 +1,53 @@
		1	+import { cn } from '@/lib/cn';
		2	+import { t } from '@/i18n';
		3	+
		4	+/**
		5	+ * CountryAtlas brand.
		6	+ * Mark: a globe ring whose equator doubles as the crossbar of an "A" — two meridian-like legs rise to a
		7	+ * single apex, so the glyph reads as globe + atlas + the letter A at once. Pure geometry, strokes only,
		8	+ * `currentColor` → works on light/dark and in monochrome. Wordmark: "Country" regular + "Atlas" semibold.
		9	+ *
		10	+ * Usage: <Logo variant="full" /> (header), <Logo variant="mark" size={24} /> (favicons, OG), <Logo variant="wordmark" />.
		11	+ */
		12	+export function LogoMark({ size = 28, className, title, strokeWidth = 2 }: { size?: number; className?: string; title?: string; strokeWidth?: number }) {
		13	+ return (
		14	+ <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={cn('shrink-0', className)} role={title ? 'img' : undefined} aria-hidden={title ? undefined : true} aria-label={title}>
		15	+ {title ? <title>{title}</title> : null}
		16	+ {/* globe ring */}
		17	+ <circle cx="16" cy="16" r="13" />
		18	+ {/* equator = crossbar of the A, clipped to the ring */}
		19	+ <path d="M4.1 19.5h23.8" />
		20	+ {/* the A: two legs to a single apex */}
		21	+ <path d="M9.6 27.2 16 6.8l6.4 20.4" />
		22	+ {/* inner meridian hint */}
		23	+ <path d="M16 6.8c-3.2 3.1-4.6 7.7-4.6 12.7" opacity="0.55" />
		24	+ <path d="M16 6.8c3.2 3.1 4.6 7.7 4.6 12.7" opacity="0.55" />
		25	+ </svg>
		26	+ );
		27	+}
		28	+
		29	+export function Wordmark({ className }: { className?: string }) {
		30	+ return (
		31	+ <span className={cn('select-none whitespace-nowrap font-ui text-[1.0625rem] tracking-[-0.02em] text-ink', className)}>
		32	+ <span className="font-normal">Country</span>
		33	+ <span className="font-semibold">Atlas</span>
		34	+ </span>
		35	+ );
		36	+}
		37	+
		38	+export function Logo({ variant = 'full', size = 26, className }: { variant?: 'full' | 'mark' | 'wordmark'; size?: number; className?: string }) {
		39	+ if (variant === 'mark') return <LogoMark size={size} className={className} title={t('brand.logoAlt')} />;
		40	+ if (variant === 'wordmark') return <Wordmark className={className} />;
		41	+ return (
		42	+ <span className={cn('inline-flex items-center gap-2', className)}>
		43	+ <LogoMark size={size} className="text-accent" />
		44	+ <Wordmark />
		45	+ </span>
		46	+ );
		47	+}
		48	+
		49	+/** Raw SVG string of the mark (for favicons / OG rasterisation); `color` is a CSS colour. */
		50	+export function logoMarkSvg({ size = 512, color = '#1c5cab', background, radius = 0 }: { size?: number; color?: string; background?: string; radius?: number } = {}): string {
		51	+ const bg = background ? `<rect width="32" height="32" rx="${radius}" fill="${background}"/>` : '';
		52	+ return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 32 32" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${bg}<circle cx="16" cy="16" r="13"/><path d="M4.1 19.5h23.8"/><path d="M9.6 27.2 16 6.8l6.4 20.4"/><path d="M16 6.8c-3.2 3.1-4.6 7.7-4.6 12.7" opacity="0.55"/><path d="M16 6.8c3.2 3.1 4.6 7.7 4.6 12.7" opacity="0.55"/></svg>`;
		53	+}

added apps/web/src/components/charts/chart-frame.tsx +136 −0

				@@ -0,0 +1,136 @@
		1	+'use client';
		2	+import { Table2 } from 'lucide-react';
		3	+import { useId, useState, type ReactNode } from 'react';
		4	+import { t } from '@/i18n';
		5	+import { cn } from '@/lib/cn';
		6	+import type { Provenance } from '@/lib/types';
		7	+import type { ProvenancePayload } from '@/components/data/provenance-context';
		8	+import { SourceLine } from './source-line';
		9	+
		10	+export interface TableColumn {
		11	+ key: string;
		12	+ label: string;
		13	+ numeric?: boolean;
		14	+}
		15	+export interface TableData {
		16	+ columns: TableColumn[];
		17	+ rows: Array<Record<string, string>>;
		18	+}
		19	+
		20	+/**
		21	+ * Wraps any chart: optional heading, the chart, a source attribution line (clickable → provenance),
		22	+ * and the accessible data-table toggle. `summary` is the auto-generated text summary announced to AT.
		23	+ */
		24	+export function ChartFrame({
		25	+ title,
		26	+ subtitle,
		27	+ summary,
		28	+ provenance,
		29	+ payload,
		30	+ table,
		31	+ actions,
		32	+ legend,
		33	+ note,
		34	+ children,
		35	+ className,
		36	+ minHeight,
		37	+}: {
		38	+ title?: ReactNode;
		39	+ subtitle?: ReactNode;
		40	+ summary: string;
		41	+ provenance?: Provenance | null;
		42	+ payload?: ProvenancePayload | null;
		43	+ table?: TableData;
		44	+ actions?: ReactNode;
		45	+ legend?: ReactNode;
		46	+ note?: ReactNode;
		47	+ children: ReactNode;
		48	+ className?: string;
		49	+ /** Reserve height to avoid layout shift while the chart mounts. */
		50	+ minHeight?: number;
		51	+}) {
		52	+ const [showTable, setShowTable] = useState(false);
		53	+ const id = useId();
		54	+ return (
		55	+ <figure className={cn('min-w-0', className)} aria-describedby={`${id}-sum`}>
		56	+ {title || actions ? (
		57	+ <figcaption className="mb-2 flex items-start justify-between gap-3">
		58	+ <div className="min-w-0">
		59	+ {title ? <div className="text-sm font-semibold text-ink">{title}</div> : null}
		60	+ {subtitle ? <div className="text-xs text-ink-2">{subtitle}</div> : null}
		61	+ </div>
		62	+ {actions ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
		63	+ </figcaption>
		64	+ ) : null}
		65	+ {legend}
		66	+ <div style={minHeight ? { minHeight } : undefined}>{children}</div>
		67	+ <p id={`${id}-sum`} className="sr-only">
		68	+ {summary}
		69	+ </p>
		70	+ <div className="mt-1.5 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
		71	+ <div className="min-w-0 flex-1">
		72	+ <SourceLine provenance={provenance} payload={payload} />
		73	+ {note ? <p className="text-2xs text-ink-3">{note}</p> : null}
		74	+ </div>
		75	+ {table ? (
		76	+ <button
		77	+ type="button"
		78	+ onClick={() => setShowTable((s) => !s)}
		79	+ aria-expanded={showTable}
		80	+ aria-controls={`${id}-table`}
		81	+ className="inline-flex min-h-[32px] items-center gap-1 rounded-sm px-1.5 text-2xs text-ink-3 hover:bg-surface-2 hover:text-ink"
		82	+ >
		83	+ <Table2 size={12} aria-hidden />
		84	+ {showTable ? t('common.hideTable') : t('common.viewTable')}
		85	+ </button>
		86	+ ) : null}
		87	+ </div>
		88	+ {table && showTable ? (
		89	+ <div id={`${id}-table`} className="mt-2 max-h-72 overflow-auto border-y border-rule">
		90	+ <table className="w-full text-xs tnum">
		91	+ <caption className="sr-only">{t('chart.table.caption')}</caption>
		92	+ <thead className="sticky top-0 bg-paper">
		93	+ <tr>
		94	+ {table.columns.map((c) => (
		95	+ <th key={c.key} scope="col" className={cn('px-2 py-1.5 text-left font-medium text-ink-2', c.numeric && 'text-right')}>
		96	+ {c.label}
		97	+ </th>
		98	+ ))}
		99	+ </tr>
		100	+ </thead>
		101	+ <tbody className="divide-y divide-rule">
		102	+ {table.rows.map((r, i) => (
		103	+ <tr key={i}>
		104	+ {table.columns.map((c) => (
		105	+ <td key={c.key} className={cn('px-2 py-1', c.numeric && 'text-right')}>
		106	+ {r[c.key] ?? t('common.na')}
		107	+ </td>
		108	+ ))}
		109	+ </tr>
		110	+ ))}
		111	+ </tbody>
		112	+ </table>
		113	+ </div>
		114	+ ) : null}
		115	+ </figure>
		116	+ );
		117	+}
		118	+
		119	+/** Legend for ≥ 2 series (a single series needs none — the title names it). */
		120	+export function Legend({ items }: { items: Array<{ label: string; color: string; dashed?: boolean; shape?: 'line' | 'rect' }> }) {
		121	+ if (items.length < 2) return null;
		122	+ return (
		123	+ <ul className="mb-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-2" aria-label={t('common.legend')}>
		124	+ {items.map((it) => (
		125	+ <li key={it.label} className="inline-flex items-center gap-1.5">
		126	+ {it.shape === 'rect' ? (
		127	+ <span aria-hidden className="inline-block h-2.5 w-2.5 rounded-xs" style={{ background: it.color }} />
		128	+ ) : (
		129	+ <span aria-hidden className="inline-block h-0.5 w-4 rounded-full" style={{ background: it.color, ...(it.dashed ? { backgroundImage: `repeating-linear-gradient(90deg, ${it.color} 0 3px, transparent 3px 6px)`, backgroundColor: 'transparent' } : {}) }} />
		130	+ )}
		131	+ <span>{it.label}</span>
		132	+ </li>
		133	+ ))}
		134	+ </ul>
		135	+ );
		136	+}

added apps/web/src/components/charts/choropleth-view.tsx +137 −0

				@@ -0,0 +1,137 @@
		1	+'use client';
		2	+import { useRouter } from 'next/navigation';
		3	+import { useCallback, useId, useState } from 'react';
		4	+import { t } from '@/i18n';
		5	+import { cn } from '@/lib/cn';
		6	+import { formatValue } from '@/lib/format';
		7	+import { MAP_HEIGHT, MAP_WIDTH } from '@/lib/map-geo';
		8	+import { routes } from '@/lib/site';
		9	+import type { FormatSpec as Spec } from '@/lib/types';
		10	+import { seqVar } from './palette';
		11	+
		12	+export interface ChoroplethFeature {
		13	+ iso3: string | null;
		14	+ name: string;
		15	+ slug: string | null;
		16	+ flag: string | null;
		17	+ d: string;
		18	+ value: number | null;
		19	+ cls: number | null;
		20	+}
		21	+
		22	+/** Map a class index (0..k-1) onto the 7-step sequential ramp. */
		23	+function stepFor(cls: number, k: number): number {
		24	+ if (k <= 1) return 4;
		25	+ const start = k >= 6 ? 1 : 2;
		26	+ const end = 7;
		27	+ return Math.round(start + (cls / (k - 1)) * (end - start));
		28	+}
		29	+
		30	+/**
		31	+ * Interactive SVG world map: hover (mouse) shows the floating label; on touch the first tap selects and
		32	+ * shows the label with an "Open" link, a click with a mouse navigates. Explicit hatched fill for no data.
		33	+ */
		34	+export function ChoroplethView({ features, sphere, legend, k, spec, summary, title, height, compact, className }: { features: ChoroplethFeature[]; sphere: string; legend: Array<{ cls: number; label: string }>; k: number; spec: Spec; summary: string; title: string; height?: number; compact?: boolean; className?: string }) {
		35	+ const router = useRouter();
		36	+ const id = useId();
		37	+ const [active, setActive] = useState<{ f: ChoroplethFeature; x: number; y: number; sticky: boolean } | null>(null);
		38	+
		39	+ const place = useCallback((e: React.PointerEvent<SVGPathElement>, f: ChoroplethFeature, sticky: boolean) => {
		40	+ const box = e.currentTarget.ownerSVGElement?.parentElement?.getBoundingClientRect();
		41	+ if (!box) return;
		42	+ setActive({ f, x: e.clientX - box.left, y: e.clientY - box.top, sticky });
		43	+ }, []);
		44	+
		45	+ const open = (f: ChoroplethFeature) => {
		46	+ if (f.slug) router.push(routes.country(f.slug));
		47	+ };
		48	+
		49	+ return (
		50	+ <figure className={cn('min-w-0', className)}>
		51	+ <div className="relative w-full" style={{ aspectRatio: `${MAP_WIDTH} / ${MAP_HEIGHT}`, maxHeight: height }} onPointerLeave={() => setActive((a) => (a?.sticky ? a : null))}>
		52	+ <svg viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`} className="h-full w-full" role="img" aria-label={summary}>
		53	+ <title>{title}</title>
		54	+ <desc>{summary}</desc>
		55	+ <defs>
		56	+ <pattern id={`${id}-hatch`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
		57	+ <rect width="6" height="6" fill="var(--nodata)" />
		58	+ <line x1="0" y1="0" x2="0" y2="6" stroke="var(--rule-strong)" strokeWidth="1.5" />
		59	+ </pattern>
		60	+ </defs>
		61	+ <path d={sphere} fill="var(--surface)" stroke="var(--rule)" strokeWidth={1} />
		62	+ <g stroke="var(--surface)" strokeWidth={0.6} strokeLinejoin="round">
		63	+ {features.map((f, i) => {
		64	+ const hasData = f.cls != null;
		65	+ const isActive = active?.f === f;
		66	+ return (
		67	+ <path
		68	+ key={f.iso3 ?? `${f.name}-${i}`}
		69	+ d={f.d}
		70	+ fill={hasData ? seqVar(stepFor(f.cls!, k)) : `url(#${id}-hatch)`}
		71	+ className={cn(f.slug && 'cursor-pointer', 'transition-[fill-opacity] duration-100')}
		72	+ fillOpacity={isActive ? 0.75 : 1}
		73	+ tabIndex={f.slug ? 0 : -1}
		74	+ role={f.slug ? 'link' : undefined}
		75	+ aria-label={`${f.name}: ${formatValue(f.value, spec)}`}
		76	+ onPointerMove={(e) => {
		77	+ if (e.pointerType === 'mouse') place(e, f, false);
		78	+ }}
		79	+ onPointerDown={(e) => {
		80	+ if (e.pointerType !== 'mouse') {
		81	+ e.preventDefault();
		82	+ place(e, f, true);
		83	+ }
		84	+ }}
		85	+ onClick={(e) => {
		86	+ // Mouse: navigate. Touch: the label carries the link (first tap selects).
		87	+ if ((e.nativeEvent as PointerEvent).pointerType === 'mouse' || (e as unknown as { detail: number }).detail === 0) open(f);
		88	+ }}
		89	+ onKeyDown={(e) => {
		90	+ if (e.key === 'Enter' && f.slug) open(f);
		91	+ }}
		92	+ onFocus={(e) => {
		93	+ const b = e.currentTarget.getBBox();
		94	+ setActive({ f, x: (b.x + b.width / 2) / MAP_WIDTH * (e.currentTarget.ownerSVGElement?.clientWidth ?? MAP_WIDTH), y: (b.y / MAP_HEIGHT) * (e.currentTarget.ownerSVGElement?.clientHeight ?? MAP_HEIGHT), sticky: false });
		95	+ }}
		96	+ >
		97	+ <title>{`${f.name}: ${formatValue(f.value, spec)}`}</title>
		98	+ </path>
		99	+ );
		100	+ })}
		101	+ </g>
		102	+ </svg>
		103	+ {active ? (
		104	+ <div className="pointer-events-none absolute z-10 rounded-sm border border-rule bg-surface px-2.5 py-1.5 text-xs shadow-pop" style={{ left: Math.min(active.x + 10, Math.max(0, (typeof window !== 'undefined' ? 0 : 0) + active.x + 10)), top: active.y - 44, maxWidth: 220 }}>
		105	+ <div className="flex items-center gap-1.5 font-medium text-ink">
		106	+ {active.f.flag ? <span aria-hidden>{active.f.flag}</span> : null}
		107	+ <span className="truncate">{active.f.name}</span>
		108	+ </div>
		109	+ <div className="tnum text-ink-2">{formatValue(active.f.value, spec)}</div>
		110	+ {active.sticky && active.f.slug ? (
		111	+ <button type="button" className="pointer-events-auto mt-1 text-accent underline" onClick={() => open(active.f)}>
		112	+ {t('metric.open', { name: active.f.name })} →
		113	+ </button>
		114	+ ) : null}
		115	+ </div>
		116	+ ) : null}
		117	+ </div>
		118	+ <figcaption className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-2xs text-ink-2">
		119	+ {!compact ? <span className="mr-1 font-medium text-ink">{title}</span> : null}
		120	+ <ul className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
		121	+ {legend.map((l) => (
		122	+ <li key={l.cls} className="inline-flex items-center gap-1 tnum">
		123	+ <span aria-hidden className="inline-block h-2.5 w-3.5 rounded-xs" style={{ background: seqVar(stepFor(l.cls, k)) }} />
		124	+ {l.label}
		125	+ </li>
		126	+ ))}
		127	+ <li className="inline-flex items-center gap-1">
		128	+ <span aria-hidden className="no-data-hatch inline-block h-2.5 w-3.5 rounded-xs" />
		129	+ {t('chart.legend.noData')}
		130	+ </li>
		131	+ </ul>
		132	+ <span className="ml-auto hidden text-ink-3 md:inline">{t('chart.map.hoverHint')}</span>
		133	+ <span className="ml-auto text-ink-3 md:hidden">{t('chart.map.tapHint')}</span>
		134	+ </figcaption>
		135	+ </figure>
		136	+ );
		137	+}

added apps/web/src/components/charts/choropleth.tsx +70 −0

				@@ -0,0 +1,70 @@
		1	+import { t } from '@/i18n';
		2	+import { formatValue } from '@/lib/format';
		3	+import { classIndex, isoLookupFromCountries, worldPaths } from '@/lib/map-geo';
		4	+import type { CountrySummary, MapResponse } from '@/lib/types';
		5	+import { ChoroplethView, type ChoroplethFeature } from './choropleth-view';
		6	+
		7	+/**
		8	+ * Server component: joins the world geometry with `/indicators/{slug}/map` values and the country list
		9	+ * (for slugs and the ISO-numeric lookup), computes 5–7 quantile classes from the API legend, and hands
		10	+ * plain data to the interactive client view. Sequential single-hue ramp (light → dark = low → high).
		11	+ */
		12	+export function Choropleth({
		13	+ map,
		14	+ countries,
		15	+ height,
		16	+ compact = false,
		17	+ className,
		18	+ title,
		19	+}: {
		20	+ map: MapResponse;
		21	+ countries: CountrySummary[];
		22	+ height?: number;
		23	+ compact?: boolean;
		24	+ className?: string;
		25	+ title?: string;
		26	+}) {
		27	+ const { paths, sphere } = worldPaths();
		28	+ const byId = new Map(countries.map((c) => [c.id, c]));
		29	+ // Registry numeric → ISO3 lookup (when the API exposes iso_numeric on the summary); static table otherwise.
		30	+ const numeric = isoLookupFromCountries(countries as Array<{ id: string; iso_numeric?: string | null }>);
		31	+ const breaks = (map.legend?.breaks ?? []).slice(0, 6);
		32	+ const k = breaks.length + 1; // classes
		33	+ const features: ChoroplethFeature[] = paths.map((p) => {
		34	+ // Prefer registry numeric lookup when the static table has no code.
		35	+ const iso3 = p.iso3 ?? (p.numeric ? numeric.get(p.numeric) ?? null : null);
		36	+ const c = iso3 ? byId.get(iso3) : undefined;
		37	+ const v = iso3 ? map.values[iso3] : undefined;
		38	+ return {
		39	+ iso3,
		40	+ name: c?.name ?? p.name,
		41	+ slug: c?.slug ?? null,
		42	+ flag: c?.flag ?? null,
		43	+ d: p.d,
		44	+ value: typeof v === 'number' ? v : null,
		45	+ cls: typeof v === 'number' ? classIndex(v, breaks) : null,
		46	+ };
		47	+ });
		48	+ const spec = map.indicator;
		49	+ const legendItems = Array.from({ length: k }, (_, i) => {
		50	+ const lo = i === 0 ? map.legend.min : breaks[i - 1]!;
		51	+ const hi = i === k - 1 ? map.legend.max : breaks[i]!;
		52	+ return { cls: i, label: `${formatValue(lo, spec)} – ${formatValue(hi, spec)}` };
		53	+ });
		54	+ const year = map.year_used ?? map.year ?? '';
		55	+ const summary = t('chart.summary.map', { name: spec.name, year, n: map.n, min: formatValue(map.legend.min, spec), max: formatValue(map.legend.max, spec) });
		56	+ return (
		57	+ <ChoroplethView
		58	+ features={features}
		59	+ sphere={sphere}
		60	+ legend={legendItems}
		61	+ k={k}
		62	+ spec={{ format: spec.format, unit: spec.unit, unit_short: spec.unit_short, precision: spec.precision, name: spec.name }}
		63	+ summary={summary}
		64	+ title={title ?? t('chart.map.legend', { name: spec.name, year })}
		65	+ height={height}
		66	+ compact={compact}
		67	+ className={className}
		68	+ />
		69	+ );
		70	+}

added apps/web/src/components/charts/dna-radial.tsx +71 −0

				@@ -0,0 +1,71 @@
		1	+import { t } from '@/i18n';
		2	+import { cn } from '@/lib/cn';
		3	+import { isNum } from '@/lib/format';
		4	+import type { DNAResponse, DnaDimension } from '@/lib/types';
		5	+import { CHART } from './palette';
		6	+
		7	+export const DNA_DIMS: DnaDimension[] = ['income', 'demographics', 'urbanization', 'trade', 'energy', 'emissions', 'innovation', 'education', 'public_spending'];
		8	+
		9	+/**
		10	+ * Radial "fingerprint": 9 dimensions, 0–100 percentile rank, drawn as a filled polygon on a 100-radius
		11	+ * ring with 25/50/75 guide rings and labelled spokes. Server-rendered SVG in a square viewBox; a missing
		12	+ * dimension collapses to the centre and is marked in the legend.
		13	+ */
		14	+export function DnaRadial({ dna, name, size = 320, className, compact = false }: { dna: Pick<DNAResponse, 'dims' | 'year_ref'> | null; name: string; size?: number; className?: string; compact?: boolean }) {
		15	+ const dims = DNA_DIMS.map((d) => ({ key: d, label: t(`country.dna.${d}` as const), value: dna?.dims?.[d] ?? null }));
		16	+ const present = dims.filter((d) => isNum(d.value));
		17	+ if (!dna || present.length === 0) return <p className="text-sm text-ink-3">{t('country.dna.none')}</p>;
		18	+
		19	+ const R = 100;
		20	+ const pad = compact ? 16 : 44;
		21	+ const cx = R + pad;
		22	+ const cy = R + pad;
		23	+ const W = 2 * (R + pad);
		24	+ const angle = (i: number) => -Math.PI / 2 + (i / dims.length) * 2 * Math.PI;
		25	+ const pt = (i: number, r: number): [number, number] => [cx + r * Math.cos(angle(i)), cy + r * Math.sin(angle(i))];
		26	+ const poly = dims.map((d, i) => pt(i, isNum(d.value) ? (d.value / 100) * R : 0));
		27	+ const summary = t('chart.summary.dna', { name, dims: present.map((d) => `${d.label} ${Math.round(d.value as number)}`).join(', ') });
		28	+
		29	+ return (
		30	+ <figure className={cn('min-w-0', className)}>
		31	+ <svg viewBox={`0 0 ${W} ${W}`} width="100%" style={{ maxWidth: size, aspectRatio: '1 / 1', margin: '0 auto' }} role="img" aria-label={summary} className="ca-chart">
		32	+ <title>{t('country.dna.title')}</title>
		33	+ <desc>{summary}</desc>
		34	+ {[25, 50, 75, 100].map((r) => (
		35	+ <circle key={r} cx={cx} cy={cy} r={(r / 100) * R} fill="none" stroke={CHART.rule} strokeWidth={r === 100 ? 1 : 0.75} />
		36	+ ))}
		37	+ {dims.map((_, i) => {
		38	+ const [x, y] = pt(i, R);
		39	+ return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke={CHART.rule} strokeWidth={0.75} />;
		40	+ })}
		41	+ <polygon points={poly.map((p) => p.join(',')).join(' ')} fill={CHART.accent} fillOpacity={0.16} stroke={CHART.accent} strokeWidth={2} strokeLinejoin="round" />
		42	+ {poly.map(([x, y], i) => (
		43	+ <circle key={i} cx={x} cy={y} r={isNum(dims[i]!.value) ? 4 : 0} fill={CHART.accent} stroke={CHART.surface} strokeWidth={2} />
		44	+ ))}
		45	+ {!compact
		46	+ ? dims.map((d, i) => {
		47	+ const [x, y] = pt(i, R + 22);
		48	+ const a = angle(i);
		49	+ const anchor = Math.abs(Math.cos(a)) < 0.2 ? 'middle' : Math.cos(a) > 0 ? 'start' : 'end';
		50	+ return (
		51	+ <text key={d.key} x={x} y={y} textAnchor={anchor} dy="0.32em" className={isNum(d.value) ? 'label' : ''} style={{ fontSize: 10, fill: isNum(d.value) ? CHART.ink2 : CHART.ink3 }}>
		52	+ {d.label}
		53	+ {isNum(d.value) ? ` ${Math.round(d.value)}` : ' —'}
		54	+ </text>
		55	+ );
		56	+ })
		57	+ : null}
		58	+ </svg>
		59	+ {compact ? (
		60	+ <figcaption className="mt-2 grid grid-cols-3 gap-x-3 gap-y-1 text-2xs text-ink-2">
		61	+ {dims.map((d) => (
		62	+ <span key={d.key} className="flex justify-between gap-1">
		63	+ <span className="truncate">{d.label}</span>
		64	+ <span className="tnum text-ink">{isNum(d.value) ? Math.round(d.value) : '—'}</span>
		65	+ </span>
		66	+ ))}
		67	+ </figcaption>
		68	+ ) : null}
		69	+ </figure>
		70	+ );
		71	+}

added apps/web/src/components/charts/line-chart.tsx +302 −0

				@@ -0,0 +1,302 @@
		1	+'use client';
		2	+import { area as d3Area, line as d3Line, stack as d3Stack } from 'd3-shape';
		3	+import { useCallback, useMemo, useState, type PointerEvent } from 'react';
		4	+import { t } from '@/i18n';
		5	+import { formatPeriod, formatTick, formatValue } from '@/lib/format';
		6	+import type { FormatSpec as Spec, Provenance } from '@/lib/types';
		7	+import type { ProvenancePayload } from '@/components/data/provenance-context';
		8	+import { ChartFrame, Legend, type TableData } from './chart-frame';
		9	+import { CHART, MARK, seriesVar } from './palette';
		10	+import { DEFAULT_MARGIN, extent, periodToX, splitForecast, xYearScale, yScale, yearTicks, type Margin, type SeriesPoint } from './scales';
		11	+import { summarizeMulti, summarizeSeries } from './summary';
		12	+import { ChartTooltip, TooltipRow } from './tooltip';
		13	+import { useMeasure } from './use-measure';
		14	+
		15	+export interface LineSeries {
		16	+ id: string;
		17	+ name: string;
		18	+ points: SeriesPoint[];
		19	+ /** Fixed colour slot (0-based). Defaults to the array index — colour follows the entity, never its rank. */
		20	+ colorIndex?: number;
		21	+ color?: string;
		22	+}
		23	+
		24	+export interface LineChartProps {
		25	+ series: LineSeries[];
		26	+ spec: Spec;
		27	+ /** Subject for the accessible summary ("Canada's GDP per capita"). */
		28	+ subject?: string;
		29	+ variant?: 'line' | 'area' | 'stacked';
		30	+ log?: boolean;
		31	+ height?: number;
		32	+ margin?: Partial<Margin>;
		33	+ title?: React.ReactNode;
		34	+ subtitle?: React.ReactNode;
		35	+ provenance?: Provenance | null;
		36	+ payload?: ProvenancePayload | null;
		37	+ actions?: React.ReactNode;
		38	+ /** Direct end-labels for ≤ 4 series. */
		39	+ endLabels?: boolean;
		40	+ /** Draw a highlighted marker on the latest actual point. */
		41	+ endDot?: boolean;
		42	+ className?: string;
		43	+ defaultWidth?: number;
		44	+}
		45	+
		46	+interface XY {
		47	+ x: number;
		48	+ y: number;
		49	+ p: SeriesPoint;
		50	+}
		51	+
		52	+/**
		53	+ * Multi-series line / area / stacked-area chart. Dashed segments for `is_forecast`, optional log scale,
		54	+ * crosshair + one tooltip listing every series at the nearest X (pointer events → touch friendly).
		55	+ * Index=100 transformations are data-side (pass already-indexed points).
		56	+ */
		57	+export function LineChart({
		58	+ series,
		59	+ spec,
		60	+ subject,
		61	+ variant = 'line',
		62	+ log = false,
		63	+ height = 240,
		64	+ margin: marginIn,
		65	+ title,
		66	+ subtitle,
		67	+ provenance,
		68	+ payload,
		69	+ actions,
		70	+ endLabels = true,
		71	+ endDot = true,
		72	+ className,
		73	+ defaultWidth = 640,
		74	+}: LineChartProps) {
		75	+ const { ref, width } = useMeasure<HTMLDivElement>(defaultWidth);
		76	+ const margin: Margin = { ...DEFAULT_MARGIN, ...marginIn };
		77	+ if (endLabels && series.length > 1 && series.length <= 4) margin.right = Math.max(margin.right, 72);
		78	+ const [hover, setHover] = useState<number | null>(null); // x-value (fractional year)
		79	+
		80	+ const model = useMemo(() => {
		81	+ const clean = series.map((s) => ({ ...s, points: s.points.filter((p) => p.value != null && Number.isFinite(p.value)) }));
		82	+ const allX = clean.flatMap((s) => s.points.map(periodToX));
		83	+ const xDom = extent(allX) ?? [2000, 2024];
		84	+ const innerW = Math.max(10, width - margin.left - margin.right);
		85	+ const innerH = Math.max(10, height - margin.top - margin.bottom);
		86	+ const x = xYearScale(xDom, [0, innerW]);
		87	+
		88	+ let stacks: Array<Array<[number, number, number]>> | null = null; // per series: [x, y0, y1]
		89	+ let yDom: [number, number];
		90	+ if (variant === 'stacked') {
		91	+ // Build a wide table keyed by x.
		92	+ const keys = clean.map((s) => s.id);
		93	+ const xs = Array.from(new Set(allX)).sort((a, b) => a - b);
		94	+ const table = xs.map((xv) => {
		95	+ const row: Record<string, number> = { __x: xv };
		96	+ for (const s of clean) {
		97	+ const p = s.points.find((q) => periodToX(q) === xv);
		98	+ row[s.id] = p?.value ?? 0;
		99	+ }
		100	+ return row;
		101	+ });
		102	+ const st = d3Stack<Record<string, number>>().keys(keys)(table);
		103	+ stacks = st.map((layer) => layer.map((d) => [d.data.__x!, d[0], d[1]] as [number, number, number]));
		104	+ const top = Math.max(0, ...stacks.flat().map((d) => d[2]));
		105	+ yDom = [0, top];
		106	+ } else {
		107	+ yDom = extent(clean.flatMap((s) => s.points.map((p) => p.value))) ?? [0, 1];
		108	+ }
		109	+ const y = yScale(yDom, [innerH, 0], { log, includeZero: variant !== 'line' || !log });
		110	+ const xTicks = yearTicks(xDom, Math.max(2, Math.floor(innerW / 90)));
		111	+ const yTicks = y.ticks(4);
		112	+ const pathFor = d3Line<XY>()
		113	+ .x((d) => d.x)
		114	+ .y((d) => d.y);
		115	+ const areaFor = d3Area<XY>()
		116	+ .x((d) => d.x)
		117	+ .y0(() => y(Math.max(0, y.domain()[0]!)))
		118	+ .y1((d) => d.y);
		119	+
		120	+ const layers = clean.map((s, i) => {
		121	+ const color = s.color ?? seriesVar(s.colorIndex ?? i);
		122	+ const runs = splitForecast(s.points).map((r) => ({
		123	+ forecast: r.forecast,
		124	+ xy: r.points.map((p) => ({ x: x(periodToX(p)), y: y(p.value!), p })),
		125	+ }));
		126	+ const all = s.points.map((p) => ({ x: x(periodToX(p)), y: y(p.value!), p }));
		127	+ const actual = s.points.filter((p) => !p.is_forecast);
		128	+ const last = actual[actual.length - 1] ?? null;
		129	+ return { s, color, runs, all, last: last ? { x: x(periodToX(last)), y: y(last.value!), p: last } : null };
		130	+ });
		131	+
		132	+ const stackPaths =
		133	+ stacks &&
		134	+ stacks.map((layer, i) => {
		135	+ const a = d3Area<[number, number, number]>()
		136	+ .x((d) => x(d[0]))
		137	+ .y0((d) => y(d[1]))
		138	+ .y1((d) => y(d[2]));
		139	+ return { d: a(layer) ?? '', color: clean[i]!.color ?? seriesVar(clean[i]!.colorIndex ?? i) };
		140	+ });
		141	+
		142	+ return { clean, x, y, innerW, innerH, xTicks, yTicks, pathFor, areaFor, layers, stackPaths, xDom };
		143	+ }, [series, width, height, margin.left, margin.right, margin.top, margin.bottom, variant, log]);
		144	+
		145	+ const onMove = useCallback(
		146	+ (e: PointerEvent<SVGRectElement>) => {
		147	+ const rect = e.currentTarget.getBoundingClientRect();
		148	+ const px = e.clientX - rect.left;
		149	+ const xv = model.x.invert(px);
		150	+ // snap to nearest existing x
		151	+ let best: number | null = null;
		152	+ let bestD = Infinity;
		153	+ for (const s of model.clean)
		154	+ for (const p of s.points) {
		155	+ const d = Math.abs(periodToX(p) - xv);
		156	+ if (d < bestD) {
		157	+ bestD = d;
		158	+ best = periodToX(p);
		159	+ }
		160	+ }
		161	+ setHover(best);
		162	+ },
		163	+ [model],
		164	+ );
		165	+
		166	+ const hoverRows = useMemo(() => {
		167	+ if (hover == null) return null;
		168	+ return model.layers
		169	+ .map((l) => {
		170	+ const p = l.s.points.find((q) => periodToX(q) === hover);
		171	+ return p ? { name: l.s.name, color: l.color, p } : null;
		172	+ })
		173	+ .filter((r): r is { name: string; color: string; p: SeriesPoint } => !!r);
		174	+ }, [hover, model]);
		175	+
		176	+ const summary =
		177	+ series.length === 1 ? summarizeSeries(subject ?? series[0]!.name, series[0]!.points, spec) : summarizeMulti(series.map((s) => s.name), series.map((s) => s.points));
		178	+
		179	+ const table: TableData = useMemo(() => {
		180	+ const xs = Array.from(new Set(model.clean.flatMap((s) => s.points.map((p) => p.period)))).sort();
		181	+ return {
		182	+ columns: [{ key: 'period', label: t('common.period') }, ...model.clean.map((s) => ({ key: s.id, label: s.name, numeric: true }))],
		183	+ rows: xs.map((period) => {
		184	+ const row: Record<string, string> = { period: formatPeriod(period, spec.frequency ?? 'A') };
		185	+ for (const s of model.clean) {
		186	+ const p = s.points.find((q) => q.period === period);
		187	+ row[s.id] = p ? `${formatValue(p.value, spec)}${p.is_forecast ? ' *' : ''}` : t('common.na');
		188	+ }
		189	+ return row;
		190	+ }),
		191	+ };
		192	+ }, [model, spec]);
		193	+
		194	+ const hasForecast = series.some((s) => s.points.some((p) => p.is_forecast));
		195	+ const hoverX = hover != null ? model.x(hover) : null;
		196	+ const legendItems = model.layers.map((l) => ({ label: l.s.name, color: l.color, shape: variant === 'line' ? ('line' as const) : ('rect' as const) }));
		197	+ const empty = model.clean.every((s) => s.points.length === 0);
		198	+
		199	+ return (
		200	+ <ChartFrame
		201	+ title={title}
		202	+ subtitle={subtitle}
		203	+ summary={summary}
		204	+ provenance={provenance}
		205	+ payload={payload}
		206	+ table={empty ? undefined : table}
		207	+ actions={actions}
		208	+ legend={<Legend items={legendItems} />}
		209	+ note={hasForecast ? t('chart.forecastNote') : undefined}
		210	+ className={className}
		211	+ minHeight={height}
		212	+ >
		213	+ <div ref={ref} className="relative w-full" style={{ height }}>
		214	+ {empty ? (
		215	+ <div className="grid h-full place-items-center text-sm text-ink-3">{t('chart.noData')}</div>
		216	+ ) : (
		217	+ <svg className="ca-chart" width={width} height={height} viewBox={`0 0 ${width} ${height}`} role="img" aria-label={summary}>
		218	+ <title>{typeof title === 'string' ? title : (spec.name ?? subject ?? '')}</title>
		219	+ <desc>{summary}</desc>
		220	+ <g transform={`translate(${margin.left},${margin.top})`}>
		221	+ <g className="grid">
		222	+ {model.yTicks.map((tk) => (
		223	+ <line key={tk} x1={0} x2={model.innerW} y1={model.y(tk)} y2={model.y(tk)} />
		224	+ ))}
		225	+ </g>
		226	+ <g className="axis">
		227	+ <line className="baseline" x1={0} x2={model.innerW} y1={model.innerH} y2={model.innerH} />
		228	+ {model.xTicks.map((yr) => (
		229	+ <text key={yr} x={model.x(yr)} y={model.innerH + 16} textAnchor="middle">
		230	+ {yr}
		231	+ </text>
		232	+ ))}
		233	+ {model.yTicks.map((tk) => (
		234	+ <text key={tk} x={-6} y={model.y(tk)} dy="0.32em" textAnchor="end">
		235	+ {formatTick(tk, spec)}
		236	+ </text>
		237	+ ))}
		238	+ </g>
		239	+
		240	+ {variant === 'stacked' && model.stackPaths
		241	+ ? model.stackPaths.map((sp, i) => <path key={i} d={sp.d} fill={sp.color} fillOpacity={0.85} stroke={CHART.surface} strokeWidth={MARK.gap} />)
		242	+ : null}
		243	+
		244	+ {variant !== 'stacked'
		245	+ ? model.layers.map((l) => (
		246	+ <g key={l.s.id}>
		247	+ {variant === 'area' ? <path d={model.areaFor(l.all) ?? ''} fill={l.color} fillOpacity={MARK.areaOpacity} /> : null}
		248	+ {l.runs.map((r, i) => (
		249	+ <path key={i} className={`series-line${r.forecast ? ' forecast' : ''}`} d={model.pathFor(r.xy) ?? ''} stroke={l.color} />
		250	+ ))}
		251	+ {endDot && l.last ? (
		252	+ <g>
		253	+ <circle className="ring" cx={l.last.x} cy={l.last.y} r={MARK.dotR + MARK.ringW / 2} fill={l.color} />
		254	+ </g>
		255	+ ) : null}
		256	+ {endLabels && series.length > 1 && series.length <= 4 && l.last ? (
		257	+ <text className="label" x={l.last.x + 8} y={l.last.y} dy="0.32em">
		258	+ {l.s.name}
		259	+ </text>
		260	+ ) : null}
		261	+ </g>
		262	+ ))
		263	+ : null}
		264	+
		265	+ {series.length === 1 && model.layers[0]?.last ? (
		266	+ <text className="label label-strong" x={Math.min(model.layers[0].last.x + 8, model.innerW - 4)} y={model.layers[0].last.y} dy="0.32em" textAnchor={model.layers[0].last.x + 60 > model.innerW ? 'end' : 'start'} dx={model.layers[0].last.x + 60 > model.innerW ? -10 : 0}>
		267	+ {formatValue(model.layers[0].last.p.value, spec)}
		268	+ </text>
		269	+ ) : null}
		270	+
		271	+ {hoverX != null ? <line x1={hoverX} x2={hoverX} y1={0} y2={model.innerH} stroke={CHART.ruleStrong} strokeWidth={1} /> : null}
		272	+ {hoverRows?.map((r) => {
		273	+ const l = model.layers.find((ly) => ly.s.name === r.name)!;
		274	+ return <circle key={r.name} className="ring" cx={model.x(periodToX(r.p))} cy={model.y(r.p.value!)} r={MARK.dotR} fill={l.color} />;
		275	+ })}
		276	+
		277	+ <rect x={0} y={0} width={model.innerW} height={model.innerH} fill="transparent" style={{ touchAction: 'pan-y' }} onPointerMove={onMove} onPointerDown={onMove} onPointerLeave={() => setHover(null)} />
		278	+ </g>
		279	+ </svg>
		280	+ )}
		281	+ {hover != null && hoverRows && hoverRows.length > 0 && hoverX != null ? (
		282	+ <ChartTooltip x={margin.left + hoverX} y={margin.top} width={width}>
		283	+ <div className="mb-0.5 text-2xs text-ink-3">
		284	+ {formatPeriod(hoverRows[0]!.p.period, spec.frequency ?? 'A')}
		285	+ {hoverRows.some((r) => r.p.is_forecast) ? ` · ${t('chart.tooltipForecast')}` : ''}
		286	+ </div>
		287	+ {hoverRows.map((r) => (
		288	+ <TooltipRow key={r.name} color={series.length > 1 ? r.color : undefined} label={series.length > 1 ? r.name : (spec.name ?? '')} value={formatValue(r.p.value, spec)} />
		289	+ ))}
		290	+ </ChartTooltip>
		291	+ ) : null}
		292	+ </div>
		293	+ </ChartFrame>
		294	+ );
		295	+}
		296	+
		297	+export function AreaChart(props: Omit<LineChartProps, 'variant'>) {
		298	+ return <LineChart {...props} variant="area" />;
		299	+}
		300	+export function StackedArea(props: Omit<LineChartProps, 'variant' | 'log'>) {
		301	+ return <LineChart {...props} variant="stacked" />;
		302	+}

added apps/web/src/components/charts/palette.ts +43 −0

				@@ -0,0 +1,43 @@
		1	+/**
		2	+ * Chart colour roles — all CSS custom properties so light/dark swap without re-render.
		3	+ * Categorical slots are assigned in FIXED order (dataviz rule: colour follows the entity, never its rank;
		4	+ * never cycle past 8 — fold to "Other" or facet).
		5	+ */
		6	+export const SERIES_MAX = 8;
		7	+
		8	+export function seriesVar(index: number): string {
		9	+ const i = Math.min(Math.max(index, 0), SERIES_MAX - 1) + 1;
		10	+ return `var(--series-${i})`;
		11	+}
		12	+
		13	+/** Sequential (choropleth) class fill, k ∈ 1..7 light→dark. */
		14	+export function seqVar(step: number): string {
		15	+ const i = Math.min(Math.max(step, 1), 7);
		16	+ return `var(--seq-${i})`;
		17	+}
		18	+
		19	+export const CHART = {
		20	+ ink: 'var(--ink)',
		21	+ ink2: 'var(--ink-2)',
		22	+ ink3: 'var(--ink-3)',
		23	+ rule: 'var(--rule)',
		24	+ ruleStrong: 'var(--rule-strong)',
		25	+ surface: 'var(--surface)',
		26	+ accent: 'var(--accent)',
		27	+ accentSoft: 'var(--accent-soft)',
		28	+ up: 'var(--up)',
		29	+ down: 'var(--down)',
		30	+ nodata: 'var(--nodata)',
		31	+ forecast: 'var(--forecast)',
		32	+} as const;
		33	+
		34	+/** Mark specs (dataviz marks-and-anatomy): thin marks, 2px lines, ≥8px end dots, 24px max bar thickness. */
		35	+export const MARK = {
		36	+ line: 2,
		37	+ dotR: 4,
		38	+ ringW: 2,
		39	+ barMax: 24,
		40	+ barRadius: 4,
		41	+ gap: 2,
		42	+ areaOpacity: 0.12,
		43	+} as const;

added apps/web/src/components/charts/population-pyramid.tsx +58 −0

				@@ -0,0 +1,58 @@
		1	+import { t } from '@/i18n';
		2	+import { fixed, isNum } from '@/lib/format';
		3	+import { seriesVar } from './palette';
		4	+
		5	+/**
		6	+ * Age structure as a single stacked bar (0–14 / 15–64 / 65+ shares, % of population). Ordinal colouring
		7	+ * (one hue, three lightness steps via the sequential ramp) because the categories are ordered.
		8	+ * A 2 px surface gap separates segments; labels inside only when the segment is wide enough.
		9	+ */
		10	+export function PopulationPyramid({
		11	+ shares,
		12	+ name,
		13	+ year,
		14	+ className,
		15	+}: {
		16	+ shares: { young: number | null; working: number | null; old: number | null };
		17	+ name: string;
		18	+ year?: number | null;
		19	+ className?: string;
		20	+}) {
		21	+ const parts = [
		22	+ { key: 'young', label: '0–14', value: shares.young, color: 'var(--seq-2)' },
		23	+ { key: 'working', label: '15–64', value: shares.working, color: 'var(--seq-4)' },
		24	+ { key: 'old', label: '65+', value: shares.old, color: 'var(--seq-6)' },
		25	+ ];
		26	+ const valid = parts.filter((p) => isNum(p.value));
		27	+ if (valid.length === 0) return <p className="text-sm text-ink-3">{t('chart.noData')}</p>;
		28	+ const total = valid.reduce((a, p) => a + (p.value as number), 0) || 100;
		29	+ const summary = t('chart.summary.pyramid', { name, parts: valid.map((p) => `${p.label}: ${fixed(p.value as number, 1)} %`).join(', ') });
		30	+ return (
		31	+ <figure className={className}>
		32	+ <div className="flex h-6 w-full overflow-hidden rounded-xs" role="img" aria-label={summary} style={{ gap: 2 }}>
		33	+ {valid.map((p) => {
		34	+ const pct = ((p.value as number) / total) * 100;
		35	+ return (
		36	+ <div key={p.key} className="relative h-full" style={{ width: `${pct}%`, background: p.color }} title={`${p.label}: ${fixed(p.value as number, 1)} %`}>
		37	+ {pct > 14 ? (
		38	+ <span className="tnum absolute inset-0 grid place-items-center text-2xs font-medium" style={{ color: p.key === 'young' ? 'var(--ink)' : '#fff' }}>
		39	+ {fixed(p.value as number, 0)} %
		40	+ </span>
		41	+ ) : null}
		42	+ </div>
		43	+ );
		44	+ })}
		45	+ </div>
		46	+ <figcaption className="mt-1.5 flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-2">
		47	+ {valid.map((p) => (
		48	+ <span key={p.key} className="inline-flex items-center gap-1.5">
		49	+ <span aria-hidden className="inline-block h-2.5 w-2.5 rounded-xs" style={{ background: p.color }} />
		50	+ {p.label} <span className="tnum text-ink">{fixed(p.value as number, 1)} %</span>
		51	+ </span>
		52	+ ))}
		53	+ {year ? <span className="text-ink-3">{year}</span> : null}
		54	+ </figcaption>
		55	+ {seriesVar(0) ? null : null}
		56	+ </figure>
		57	+ );
		58	+}

added apps/web/src/components/charts/ranked-bars.tsx +108 −0

				@@ -0,0 +1,108 @@
		1	+import Link from 'next/link';
		2	+import { t } from '@/i18n';
		3	+import { cn } from '@/lib/cn';
		4	+import { formatValue, isNum, ordinal } from '@/lib/format';
		5	+import { routes } from '@/lib/site';
		6	+import type { FormatSpec as Spec, Provenance } from '@/lib/types';
		7	+import { MARK } from './palette';
		8	+
		9	+export interface RankedBarRow {
		10	+ id: string;
		11	+ label: string;
		12	+ flag?: string | null;
		13	+ href?: string | null;
		14	+ value: number | null;
		15	+ rank?: number | null;
		16	+ /** Secondary text shown right of the value (e.g. change). */
		17	+ hint?: string | null;
		18	+}
		19	+
		20	+/**
		21	+ * Horizontal ranked bars rendered as HTML (server component, fully responsive, no SVG text scaling).
		22	+ * One series → one colour (slot 1); `highlightId` marks the country of interest with the accent and bold label.
		23	+ * Bars ≤ 24 px thick, 4 px rounded data-end, square at the baseline; value labelled at the tip (text tokens).
		24	+ */
		25	+export function RankedBars({
		26	+ rows,
		27	+ spec,
		28	+ highlightId,
		29	+ showRank = true,
		30	+ className,
		31	+ provenance,
		32	+ ariaLabel,
		33	+ linkRows = true,
		34	+}: {
		35	+ rows: RankedBarRow[];
		36	+ spec: Spec;
		37	+ highlightId?: string | null;
		38	+ showRank?: boolean;
		39	+ className?: string;
		40	+ provenance?: Provenance | null;
		41	+ ariaLabel?: string;
		42	+ linkRows?: boolean;
		43	+}) {
		44	+ const values = rows.map((r) => r.value).filter(isNum);
		45	+ const max = values.length ? Math.max(...values.map(Math.abs)) : 0;
		46	+ const top = rows[0];
		47	+ const summary = top ? t('chart.summary.bars', { top: top.label, value: formatValue(top.value, spec), n: rows.length }) : t('chart.noData');
		48	+ if (rows.length === 0) return <p className="text-sm text-ink-3">{t('chart.noData')}</p>;
		49	+ return (
		50	+ <div className={cn('min-w-0', className)} role="img" aria-label={ariaLabel ?? summary}>
		51	+ <ol className="divide-y divide-rule">
		52	+ {rows.map((r, i) => {
		53	+ const pct = isNum(r.value) && max > 0 ? Math.max(0, (Math.abs(r.value) / max) * 100) : 0;
		54	+ const hl = highlightId && r.id === highlightId;
		55	+ const label = (
		56	+ <span className={cn('flex min-w-0 items-center gap-1.5 truncate text-sm', hl ? 'font-semibold text-ink' : 'text-ink')}>
		57	+ {r.flag ? (
		58	+ <span aria-hidden className="text-base leading-none">
		59	+ {r.flag}
		60	+ </span>
		61	+ ) : null}
		62	+ <span className="truncate">{r.label}</span>
		63	+ </span>
		64	+ );
		65	+ return (
		66	+ <li key={r.id} className="grid grid-cols-[minmax(0,11rem)_1fr] items-center gap-x-3 py-1.5 sm:grid-cols-[minmax(0,13rem)_1fr]">
		67	+ <div className="flex min-w-0 items-center gap-2">
		68	+ {showRank ? <span className="tnum w-6 shrink-0 text-right text-xs text-ink-3">{r.rank ?? i + 1}</span> : null}
		69	+ {linkRows && r.href ? (
		70	+ <Link href={r.href} className="link-quiet min-w-0 truncate">
		71	+ {label}
		72	+ </Link>
		73	+ ) : (
		74	+ label
		75	+ )}
		76	+ </div>
		77	+ <div className="flex min-w-0 items-center gap-2">
		78	+ <div className="h-4 min-w-0 flex-1" style={{ maxHeight: MARK.barMax }}>
		79	+ <div
		80	+ className={cn('h-full rounded-r-sm', hl ? 'bg-accent' : 'bg-series-1')}
		81	+ style={{ width: `${pct}%`, minWidth: isNum(r.value) ? 2 : 0, borderRadius: `0 ${MARK.barRadius}px ${MARK.barRadius}px 0`, opacity: hl ? 1 : 0.85 }}
		82	+ />
		83	+ </div>
		84	+ <span className={cn('tnum shrink-0 text-right text-sm', hl ? 'font-semibold text-ink' : 'text-ink')} style={{ minWidth: '4.5rem' }}>
		85	+ {formatValue(r.value, spec)}
		86	+ </span>
		87	+ {r.hint ? <span className="tnum hidden shrink-0 text-xs text-ink-3 sm:inline">{r.hint}</span> : null}
		88	+ </div>
		89	+ </li>
		90	+ );
		91	+ })}
		92	+ </ol>
		93	+ {provenance ? (
		94	+ <p className="mt-1.5 text-2xs text-ink-2">
		95	+ <span className="text-ink-3">{t('common.source')}: </span>
		96	+ {[provenance.source_name, provenance.dataset].filter(Boolean).join(' — ')} · {provenance.series_code}
		97	+ </p>
		98	+ ) : null}
		99	+ </div>
		100	+ );
		101	+}
		102	+
		103	+/** Convenience: a country row for RankedBars from a ranking row. */
		104	+export function rankedRowFromCountry(c: { id: string; slug: string | null; name: string | null; flag: string | null }, value: number | null, rank?: number | null, hint?: string | null): RankedBarRow {
		105	+ return { id: c.id, label: c.name ?? c.id, flag: c.flag, href: c.slug ? routes.country(c.slug) : null, value, rank, hint };
		106	+}
		107	+
		108	+export { ordinal };

added apps/web/src/components/charts/scales.ts +133 −0

Large diff (133 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/charts/scatter.tsx +118 −0

Large diff (118 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/charts/slope-chart.tsx +70 −0

Large diff (70 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/charts/small-multiples.tsx +21 −0

Large diff (21 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/charts/source-line.tsx +37 −0

Large diff (37 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/charts/sparkline.tsx +52 −0

Large diff (52 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/charts/summary.ts +22 −0

Large diff (22 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/charts/tooltip.tsx +45 −0

Large diff (45 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/charts/use-measure.ts +25 −0

Large diff (25 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/mobile-tab-bar.tsx +46 −0

Large diff (46 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/nav-links.tsx +25 −0

Large diff (25 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/search-container.tsx +23 −0

Large diff (23 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/search-context.tsx +39 −0

Large diff (39 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/search-dialog.tsx +224 −0

Large diff (224 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/search-trigger.tsx +33 −0

Large diff (33 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/site-footer.tsx +86 −0

Large diff (86 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/site-header.tsx +39 −0

Large diff (39 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/components/layout/theme-toggle.tsx +41 −0

Large diff (41 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/i18n/en.ts +368 −0

Large diff (368 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/i18n/index.ts +28 −0

Large diff (28 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/api.ts +155 −0

Large diff (155 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/client-api.ts +29 −0

Large diff (29 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/cn.ts +4 −0

Large diff (4 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/fonts.system.ts +3 −0

Large diff (3 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/fonts.ts +8 −0

Large diff (8 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/format.ts +258 −0

Large diff (258 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/iso-numeric.ts +48 −0

Large diff (48 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/map-geo.ts +69 −0

Large diff (69 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/regions.ts +39 −0

Large diff (39 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/site.ts +32 −0

Large diff (32 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/topics.ts +76 −0

Large diff (76 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/src/lib/types.ts +575 −0

Large diff (575 lines) is not loaded by default to keep the page fast.Load diff

added apps/web/tsconfig.json +22 −0

Large diff (22 lines) is not loaded by default to keep the page fast.Load diff

added docs/sources-research.md +316 −0

Large diff (316 lines) is not loaded by default to keep the page fast.Load diff

added package.json +15 −0

Large diff (15 lines) is not loaded by default to keep the page fast.Load diff

added pnpm-lock.yaml +1220 −0

Large diff (1,220 lines) is not loaded by default to keep the page fast.Load diff

added pnpm-workspace.yaml +2 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

modified pyproject.toml +2 −0

Large diff (11 lines) is not loaded by default to keep the page fast.Load diff

modified registry/indicators.yaml +15 −10

Large diff (115 lines) is not loaded by default to keep the page fast.Load diff

added registry/insights.yaml +103 −0

Large diff (103 lines) is not loaded by default to keep the page fast.Load diff

added registry/similarity.yaml +88 −0

Large diff (88 lines) is not loaded by default to keep the page fast.Load diff

added registry/sources/bis.yaml +13 −0

Large diff (13 lines) is not loaded by default to keep the page fast.Load diff

added registry/sources/eurostat.yaml +119 −0

Large diff (119 lines) is not loaded by default to keep the page fast.Load diff

added registry/sources/fred.yaml +44 −0

Large diff (44 lines) is not loaded by default to keep the page fast.Load diff

added registry/sources/ilo.yaml +9 −0

Large diff (9 lines) is not loaded by default to keep the page fast.Load diff

added registry/sources/imf.yaml +25 −0

Large diff (25 lines) is not loaded by default to keep the page fast.Load diff

added registry/sources/oecd.yaml +105 −0

Large diff (105 lines) is not loaded by default to keep the page fast.Load diff

added registry/sources/owid.yaml +8 −0

Large diff (8 lines) is not loaded by default to keep the page fast.Load diff

added registry/sources/who.yaml +34 −0

Large diff (34 lines) is not loaded by default to keep the page fast.Load diff

modified registry/topics.yaml +8 −9

Large diff (55 lines) is not loaded by default to keep the page fast.Load diff

added scripts/run_connector.py +81 −0

Large diff (81 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/cache.py +61 −0

Large diff (61 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/common.py +380 −0

Large diff (380 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/db.py +250 −0

Large diff (250 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/errors.py +36 −0

Large diff (36 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/formatting.py +117 −0

Large diff (117 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/main.py +207 −0

Large diff (207 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/provenance.py +97 −0

Large diff (97 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/ratelimit.py +42 −0

Large diff (42 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/__init__.py +0 −0

Large diff (0 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/admin.py +186 −0

Large diff (186 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/changes.py +42 −0

Large diff (42 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/compare.py +142 −0

Large diff (142 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/countries.py +425 −0

Large diff (425 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/download.py +144 −0

Large diff (144 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/health.py +36 −0

Large diff (36 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/home.py +104 −0

Large diff (104 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/indicators.py +339 −0

Large diff (339 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/methodology.py +101 −0

Large diff (101 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/rankings.py +184 −0

Large diff (184 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/regions.py +153 −0

Large diff (153 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/search.py +186 −0

Large diff (186 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/series.py +33 −0

Large diff (33 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/routers/sources.py +68 −0

Large diff (68 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/api/schemas.py +570 −0

Large diff (570 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/cli.py +295 −0

Large diff (295 lines) is not loaded by default to keep the page fast.Load diff

modified src/countryatlas/connectors/__init__.py +90 −0

Large diff (90 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/_series.py +104 −0

Large diff (104 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/_util.py +65 −0

Large diff (65 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/bis.py +186 −0

Large diff (186 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/eurostat.py +253 −0

Large diff (253 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/fred.py +287 −0

Large diff (287 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/ilo.py +176 −0

Large diff (176 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/imf.py +206 −0

Large diff (206 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/oecd.py +239 −0

Large diff (239 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/owid.py +258 −0

Large diff (258 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/who.py +219 −0

Large diff (219 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/connectors/worldbank.py +232 −0

Large diff (232 lines) is not loaded by default to keep the page fast.Load diff

modified src/countryatlas/pipeline/__init__.py +66 −0

Large diff (66 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/build.py +448 −0

Large diff (448 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/changes.py +366 −0

Large diff (366 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/derived.py +236 −0

Large diff (236 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/export.py +106 −0

Large diff (106 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/fetch.py +228 −0

Large diff (228 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/format.py +90 −0

Large diff (90 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/insights.py +222 −0

Large diff (222 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/scheduler.py +116 −0

Large diff (116 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/similarity.py +195 −0

Large diff (195 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/staging.py +221 −0

Large diff (221 lines) is not loaded by default to keep the page fast.Load diff

added src/countryatlas/pipeline/validate.py +200 −0

Large diff (200 lines) is not loaded by default to keep the page fast.Load diff

modified src/countryatlas/registry/__init__.py +35 −0

Large diff (46 lines) is not loaded by default to keep the page fast.Load diff

added tests/api/__init__.py +0 −0

Large diff (0 lines) is not loaded by default to keep the page fast.Load diff

added tests/api/conftest.py +66 −0

Large diff (66 lines) is not loaded by default to keep the page fast.Load diff

added tests/api/test_countries.py +153 −0

Large diff (153 lines) is not loaded by default to keep the page fast.Load diff

added tests/api/test_indicators.py +96 −0

Large diff (96 lines) is not loaded by default to keep the page fast.Load diff

added tests/api/test_infra.py +199 −0

Large diff (199 lines) is not loaded by default to keep the page fast.Load diff

added tests/api/test_misc_routers.py +117 −0

Large diff (117 lines) is not loaded by default to keep the page fast.Load diff

added tests/api/test_rankings_compare_series.py +102 −0

Large diff (102 lines) is not loaded by default to keep the page fast.Load diff

added tests/conftest.py +23 −0

Large diff (23 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/__init__.py +0 −0

Large diff (0 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/_helpers.py +56 −0

Large diff (56 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/conftest.py +32 −0

Large diff (32 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/test_bis.py +102 −0

Large diff (102 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/test_eurostat.py +126 −0

Large diff (126 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/test_fred.py +148 −0

Large diff (148 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/test_ilo.py +77 −0

Large diff (77 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/test_imf.py +88 −0

Large diff (88 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/test_oecd.py +127 −0

Large diff (127 lines) is not loaded by default to keep the page fast.Load diff

added tests/connectors/test_who.py +89 −0

Large diff (89 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/__init__.py +0 −0

Large diff (0 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/bis/WS_CBPOL_M.csv +62 −0

Large diff (62 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/bis/WS_SPP_R_628.csv +37 −0

Large diff (37 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/bis/WS_SPP_R_771.csv +11 −0

Large diff (11 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/eurostat/rd_e_gerdtot_sample.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/eurostat/une_rt_a_sample.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/fred/obs_CPIAUCSL.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/fred/obs_FEDFUNDS.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/fred/obs_MORTGAGE30US_m.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/fred/obs_QCAR628BIS.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/fred/series_CPIAUCSL.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/fred/series_FEDFUNDS.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/fred/series_MORTGAGE30US.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/fred/series_QCAR628BIS.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/ilo/DF_UNE_2EAP_SEX_AGE_RT.csv +25 −0

Large diff (25 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/ilo/dataflow.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/imf/weo_NGDPD_sample.csv +9 −0

Large diff (9 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/imf/weo_NGDP_RPCH_sample.csv +29 −0

Large diff (29 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/make_fixture_db.py +362 −0

Large diff (362 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/oecd/house_prices_RHP_sample.csv +29 −0

Large diff (29 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/oecd/kei_PRVM_sample.csv +14 −0

Large diff (14 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/owid_co2_subset.csv +151 −0

Large diff (151 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/owid_grapher_median-age.csv +65 −0

Large diff (65 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/wb_NY.GDP.PCAP.CD.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/wb_retired.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/who/Indicator_M_Est_tob_curr.json +1 −0

Large diff (2 lines) is not loaded by default to keep the page fast.Load diff

added tests/fixtures/who/M_Est_tob_curr.json +680 −0

Large diff (681 lines) is not loaded by default to keep the page fast.Load diff

added tests/test_build.py +142 −0

Large diff (142 lines) is not loaded by default to keep the page fast.Load diff

added tests/test_changes.py +69 −0

Large diff (69 lines) is not loaded by default to keep the page fast.Load diff

added tests/test_owid.py +48 −0

Large diff (48 lines) is not loaded by default to keep the page fast.Load diff

added tests/test_registry.py +51 −0

Large diff (51 lines) is not loaded by default to keep the page fast.Load diff

added tests/test_validate.py +55 −0

Large diff (55 lines) is not loaded by default to keep the page fast.Load diff

added tests/test_worldbank.py +60 −0

Large diff (61 lines) is not loaded by default to keep the page fast.Load diff