From 2a70b197e9c0cd0a432be5fe0e54382f4b24ca97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Vila=C3=A7a=20de=20Jesus?=
 <matheus@codeatlas.com.br>
Date: Sat, 17 Oct 2026 11:58:24 -0300
Subject: [PATCH 1/3] chore: start #325


From deebb4da5e2cc1d7e9a49e437dbd7f52d3c81d70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Vila=C3=A7a=20de=20Jesus?=
 <matheus@codeatlas.com.br>
Date: Sat, 17 Oct 2026 12:07:51 -0300
Subject: [PATCH 2/3] feat(i18n): split the message catalog per group (#325)

---
 .changeset/i18n-per-group-catalog.md          |   5 +
 AGENTS.md                                     |   5 +-
 packages/ui/scripts/size-lib.ts               |  71 ++++
 packages/ui/scripts/size-limit.ts             |  69 +---
 packages/ui/size-limit.json                   |   4 +-
 .../ui/src/lib/charts/HeatmapChart.svelte     |   5 +-
 .../ui/src/lib/components/Alert/Alert.svelte  |   5 +-
 .../components/AlertDialog/AlertDialog.svelte |   5 +-
 .../src/lib/components/AppForm/AppForm.svelte |   5 +-
 .../src/lib/components/AppList/AppList.svelte |   5 +-
 .../components/AppSettings/AppSettings.svelte |   5 +-
 .../lib/components/AppShell/BottomNav.svelte  |   5 +-
 .../src/lib/components/AppShell/Panel.svelte  |   5 +-
 .../components/AppShell/PanelNavItem.svelte   |   5 +-
 .../AppShell/PanelResizeHandle.svelte         |   5 +-
 .../src/lib/components/AppShell/Rail.svelte   |   5 +-
 .../components/AudioPlayer/AudioPlayer.svelte |   5 +-
 .../src/lib/components/Avatar/Avatar.svelte   |   5 +-
 .../ui/src/lib/components/Badge/Badge.svelte  |   5 +-
 .../components/Breadcrumb/Breadcrumb.svelte   |   5 +-
 .../src/lib/components/Button/Button.svelte   |   5 +-
 .../lib/components/Button/IconButton.svelte   |   5 +-
 .../ui/src/lib/components/Chip/Chip.svelte    |   5 +-
 .../components/CodeSnippet/CodeSnippet.svelte |   5 +-
 .../lib/components/Combobox/Combobox.svelte   |   6 +-
 .../CommandPalette/CommandPalette.svelte      |   5 +-
 .../ConversationItem/ConversationItem.svelte  |   5 +-
 .../components/CopyButton/CopyButton.svelte   |   5 +-
 .../lib/components/DataTable/DataTable.svelte |   5 +-
 .../DataTable/DataTableColumnToggle.svelte    |   5 +-
 .../DataTable/DataTableFacetedFilter.svelte   |   5 +-
 .../DataTable/DataTablePagination.svelte      |   5 +-
 .../DataTable/DataTableToolbar.svelte         |   5 +-
 .../src/lib/components/Date/Calendar.svelte   |   5 +-
 .../lib/components/Date/CalendarBody.svelte   |   5 +-
 .../src/lib/components/Date/DatePicker.svelte |   5 +-
 .../components/Date/DateRangePicker.svelte    |   5 +-
 .../lib/components/Date/RangeCalendar.svelte  |   5 +-
 .../src/lib/components/Dialog/Dialog.svelte   |   5 +-
 .../ui/src/lib/components/Docs/Callout.svelte |   5 +-
 .../src/lib/components/Docs/CodeTabs.svelte   |   5 +-
 .../ui/src/lib/components/Docs/DocsNav.svelte |   5 +-
 .../src/lib/components/Docs/DocsSearch.svelte |   5 +-
 .../src/lib/components/Docs/DocsShell.svelte  |   5 +-
 .../components/Docs/TableOfContents.svelte    |   5 +-
 .../src/lib/components/Drawer/Drawer.svelte   |   5 +-
 .../lib/components/ErrorPage/ErrorPage.svelte |   5 +-
 .../components/ExportMenu/ExportMenu.svelte   |   5 +-
 .../ExternalLink/ExternalLink.svelte          |   5 +-
 .../components/FileUpload/FileUpload.svelte   |   5 +-
 .../InstallPrompt/InstallPrompt.svelte        |   5 +-
 .../src/lib/components/KpiCard/KpiCard.svelte |   5 +-
 .../lib/components/Lightbox/Lightbox.svelte   |   5 +-
 .../lib/components/LiveList/LiveList.svelte   |   5 +-
 .../LoadingBoundary/LoadingBoundary.svelte    |   5 +-
 .../lib/components/MediaGrid/MediaGrid.svelte |   5 +-
 .../MessageBubble/MessageBubble.svelte        |   5 +-
 .../components/MobilePane/MobilePane.svelte   |   5 +-
 .../components/MotionStage/MotionStage.svelte |   5 +-
 .../NotificationBell/NotificationBell.svelte  |   5 +-
 .../components/NumberField/NumberField.svelte |   5 +-
 .../components/Pagination/Pagination.svelte   |   5 +-
 .../src/lib/components/Select/Select.svelte   |   5 +-
 .../ui/src/lib/components/Sheet/Sheet.svelte  |   5 +-
 .../components/SiteHeader/SiteHeader.svelte   |   6 +-
 .../lib/components/SkipLink/SkipLink.svelte   |   5 +-
 .../src/lib/components/Slider/Slider.svelte   |   5 +-
 .../src/lib/components/Spinner/Spinner.svelte |   5 +-
 .../src/lib/components/Stepper/Stepper.svelte |   5 +-
 .../ui/src/lib/components/Table/Table.svelte  |   5 +-
 .../components/ThemeToggle/ThemeToggle.svelte |   5 +-
 .../src/lib/components/Toast/ToastItem.svelte |   5 +-
 .../src/lib/components/Toast/Toaster.svelte   |   5 +-
 .../components/VirtualList/VirtualList.svelte |   5 +-
 packages/ui/src/lib/forms/CepField.svelte     |   5 +-
 packages/ui/src/lib/forms/PhoneField.svelte   |   5 +-
 packages/ui/src/lib/i18n/all.ts               | 120 +++++++
 packages/ui/src/lib/i18n/catalog.ts           | 114 ++++--
 packages/ui/src/lib/i18n/en.ts                | 337 ------------------
 packages/ui/src/lib/i18n/groups/alert.ts      |  10 +
 .../ui/src/lib/i18n/groups/alertDialog.ts     |  12 +
 packages/ui/src/lib/i18n/groups/appForm.ts    |  12 +
 packages/ui/src/lib/i18n/groups/appList.ts    |  18 +
 .../ui/src/lib/i18n/groups/appSettings.ts     |  12 +
 packages/ui/src/lib/i18n/groups/appShell.ts   |  28 ++
 .../ui/src/lib/i18n/groups/audioPlayer.ts     |  24 ++
 packages/ui/src/lib/i18n/groups/avatar.ts     |  10 +
 packages/ui/src/lib/i18n/groups/badge.ts      |  12 +
 packages/ui/src/lib/i18n/groups/breadcrumb.ts |  12 +
 packages/ui/src/lib/i18n/groups/button.ts     |  12 +
 packages/ui/src/lib/i18n/groups/calendar.ts   |  18 +
 packages/ui/src/lib/i18n/groups/charts.ts     |  12 +
 packages/ui/src/lib/i18n/groups/chat.ts       |  40 +++
 packages/ui/src/lib/i18n/groups/chip.ts       |  10 +
 .../ui/src/lib/i18n/groups/codeSnippet.ts     |  14 +
 packages/ui/src/lib/i18n/groups/combobox.ts   |  20 ++
 .../ui/src/lib/i18n/groups/commandPalette.ts  |  22 ++
 packages/ui/src/lib/i18n/groups/common.ts     |  30 ++
 packages/ui/src/lib/i18n/groups/copyButton.ts |  14 +
 packages/ui/src/lib/i18n/groups/dataTable.ts  |  34 ++
 packages/ui/src/lib/i18n/groups/dialog.ts     |  10 +
 packages/ui/src/lib/i18n/groups/docs.ts       |  72 ++++
 packages/ui/src/lib/i18n/groups/drawer.ts     |  10 +
 packages/ui/src/lib/i18n/groups/errorPage.ts  |  42 +++
 packages/ui/src/lib/i18n/groups/exportMenu.ts |  18 +
 .../ui/src/lib/i18n/groups/externalLink.ts    |  11 +
 packages/ui/src/lib/i18n/groups/fileUpload.ts |  14 +
 packages/ui/src/lib/i18n/groups/forms.ts      |  14 +
 .../ui/src/lib/i18n/groups/installPrompt.ts   |  20 ++
 packages/ui/src/lib/i18n/groups/kit.ts        |  10 +
 packages/ui/src/lib/i18n/groups/kpiCard.ts    |  10 +
 packages/ui/src/lib/i18n/groups/lightbox.ts   |  18 +
 packages/ui/src/lib/i18n/groups/liveList.ts   |  24 ++
 packages/ui/src/lib/i18n/groups/mediaGrid.ts  |  22 ++
 packages/ui/src/lib/i18n/groups/mobilePane.ts |  10 +
 .../ui/src/lib/i18n/groups/motionStage.ts     |  12 +
 .../src/lib/i18n/groups/notificationBell.ts   |  18 +
 .../ui/src/lib/i18n/groups/numberField.ts     |  12 +
 packages/ui/src/lib/i18n/groups/pagination.ts |  12 +
 packages/ui/src/lib/i18n/groups/select.ts     |  12 +
 packages/ui/src/lib/i18n/groups/sheet.ts      |  12 +
 packages/ui/src/lib/i18n/groups/skipLink.ts   |  10 +
 packages/ui/src/lib/i18n/groups/slider.ts     |  10 +
 packages/ui/src/lib/i18n/groups/spinner.ts    |  10 +
 packages/ui/src/lib/i18n/groups/stepper.ts    |  13 +
 packages/ui/src/lib/i18n/groups/table.ts      |  11 +
 .../ui/src/lib/i18n/groups/themeToggle.ts     |  10 +
 packages/ui/src/lib/i18n/groups/toast.ts      |  12 +
 .../ui/src/lib/i18n/groups/virtualList.ts     |  18 +
 packages/ui/src/lib/i18n/index.ts             |  12 +-
 packages/ui/src/lib/i18n/pt-BR.ts             | 328 -----------------
 packages/ui/src/lib/i18n/state.svelte.ts      |  50 ++-
 packages/ui/src/lib/i18n/use-t.svelte.ts      |  11 +
 .../ui/src/lib/kit/create-error-handler.ts    |   5 +-
 packages/ui/src/lib/kit/error-html.ts         |   5 +-
 .../ui/src/lib/kit/navigation-progress.svelte |   5 +-
 .../ui/src/lib/kit/use-breadcrumbs.svelte.ts  |   5 +-
 .../ui/src/lib/utils/use-list-state.svelte.ts |   5 +-
 packages/ui/tests/i18n-register.test.ts       |   3 +-
 packages/ui/tests/i18n-split.test.ts          |  59 +++
 packages/ui/tests/i18n.test.ts                |  20 +-
 .../src/content/docs/getting-started/i18n.mdx |   2 +-
 142 files changed, 1502 insertions(+), 943 deletions(-)
 create mode 100644 .changeset/i18n-per-group-catalog.md
 create mode 100644 packages/ui/scripts/size-lib.ts
 create mode 100644 packages/ui/src/lib/i18n/all.ts
 delete mode 100644 packages/ui/src/lib/i18n/en.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/alert.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/alertDialog.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/appForm.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/appList.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/appSettings.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/appShell.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/audioPlayer.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/avatar.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/badge.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/breadcrumb.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/button.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/calendar.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/charts.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/chat.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/chip.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/codeSnippet.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/combobox.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/commandPalette.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/common.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/copyButton.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/dataTable.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/dialog.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/docs.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/drawer.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/errorPage.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/exportMenu.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/externalLink.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/fileUpload.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/forms.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/installPrompt.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/kit.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/kpiCard.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/lightbox.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/liveList.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/mediaGrid.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/mobilePane.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/motionStage.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/notificationBell.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/numberField.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/pagination.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/select.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/sheet.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/skipLink.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/slider.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/spinner.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/stepper.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/table.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/themeToggle.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/toast.ts
 create mode 100644 packages/ui/src/lib/i18n/groups/virtualList.ts
 delete mode 100644 packages/ui/src/lib/i18n/pt-BR.ts
 create mode 100644 packages/ui/src/lib/i18n/use-t.svelte.ts
 create mode 100644 packages/ui/tests/i18n-split.test.ts

diff --git a/.changeset/i18n-per-group-catalog.md b/.changeset/i18n-per-group-catalog.md
new file mode 100644
index 00000000..b6ada24d
--- /dev/null
+++ b/.changeset/i18n-per-group-catalog.md
@@ -0,0 +1,5 @@
+---
+"@codeatlasdev/ui": minor
+---
+
+i18n: the message catalog is split per group and each component bundles only its own strings. `root: Button only` drops from 27.89 to 23.91 kB gzip and `AppShellLayout` from 39.88 to 36.07 kB. `Messages`, `getMessages`, `useT`, `I18nProvider`, `setLocale` and `registerLocale` behave as before; `useT()` and `getMessages()` still return the full catalog, which is bundled only when you import them.
diff --git a/AGENTS.md b/AGENTS.md
index e69cd10f..494d4326 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -728,8 +728,9 @@ setLocale("es");
 - The client `$state` behind `setLocale` is module-level: all islands on the same page share the language and re-render on change. `locale.value` reads it; inside a provider use `useLocale()`.
 - **An explicit prop always wins** over the catalog: `<TableOfContents label="In this article" />`. Text props (`label`, `placeholder`, `confirmLabel`, `emptyText`, `ofLabel`…) no longer have a default; without the prop, the component uses the catalog.
 - **Override phrases** without creating a locale: `<I18nProvider locale="pt-BR" messages={{ docs: { toc: "In this article" } }}>` or `setLocale("pt-BR", { … })`. Deep-merged over the catalog; a new `setLocale` call replaces the previous overrides.
-- Catalog: `packages/ui/src/lib/i18n/en.ts` (source of truth, grouped by component, e.g. `docs.search.placeholder`) and `pt-BR.ts` (typed as `Messages`: a missing key is a type error). Strings with a value are functions: `notificationBell.label(unread)`. Registry and `getMessages(locale, override?)` live in the rune-free `catalog.ts`.
-- New text in a component: add the key to `en.ts` **and** `pt-BR.ts`, call `const t = useT();` at the top level of `<script>` (or of a `.svelte.ts` helper called at component init; `useT` reads Svelte context, so it cannot run in event handlers or module scope), read `t().group.key` in markup/`$derived`, and use `label ?? t().group.key` when there is a prop. Never import a global `t`.
+- Catalog: one module per group in `packages/ui/src/lib/i18n/groups/<name>.ts` (e.g. `docs`, `dialog`), each a `defineGroup("docs", { en: {…}, "pt-BR": {…} })`. `en` is the source of truth; `pt-BR` is typed against it (a missing key is a type error). Strings with a value are functions: `notificationBell.label(unread)`. Groups are registered in `all.ts` (the `Messages` type, `getMessages`, public `useT()`); the rune-free `catalog.ts` holds `defineGroup`, `getGroup(group, locale, override?)` and the `registerLocale` registry.
+- **A component pays only for its own strings.** The built-in locales travel inside each group and a component imports only the groups it reads, so tree-shaking drops the rest. Never import `all.ts`, `getMessages` or the public `useT()` inside the package: they name every group and ship the whole catalog (`tests/i18n-split.test.ts` fails if Button's bundle contains another component's text).
+- New text in a component: add the key to the group's `en` **and** `pt-BR` (new group: new file in `groups/` plus one line in `all.ts`), then in `<script>` `import { group } from "../../i18n/groups/<name>.js"` and call `const t = useMessages(group);` at the top level (or in a `.svelte.ts` helper called at component init; `useMessages` reads Svelte context, so it cannot run in event handlers or module scope). Read `t().group.key` in markup/`$derived`, and use `label ?? t().group.key` when there is a prop. Several groups: `useMessages(a, b)`. Never import a global `t`.
 - In browser tests, call `setLocale("pt-BR")` where the test checks Portuguese text and `setLocale("en")` in `afterEach`; the default is English. SSR tests (`*.ssr.test.ts`, `bun run test:ssr`) wrap the tree in `I18nProvider`.
 - The date/number `locale` (`DatePicker locale="pt-BR"`, masks) is independent of the UI language.
 
diff --git a/packages/ui/scripts/size-lib.ts b/packages/ui/scripts/size-lib.ts
new file mode 100644
index 00000000..08fcc0c2
--- /dev/null
+++ b/packages/ui/scripts/size-lib.ts
@@ -0,0 +1,71 @@
+// Shared by size-limit.ts and the bundle-content tests: bundle an entry of dist/ the way a consumer's
+// bundler would (esbuild, ESM, minified, tree-shaken, Svelte runtime included).
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { gzipSync } from "node:zlib";
+import { build, type Plugin } from "esbuild";
+import { compile, compileModule } from "svelte/compiler";
+
+export const dist = join(import.meta.dir, "..", "dist");
+
+export interface Entry {
+	name: string;
+	/** JS entry contents (resolved from dist) or a CSS file path under dist. */
+	js?: string;
+	css?: string;
+	/** Skipped when this path under dist does not exist (an entry that has not landed yet). */
+	requires?: string;
+}
+
+/** Compiles .svelte and .svelte.js/.ts files from dist the way vite-plugin-svelte would. */
+export const sveltePlugin: Plugin = {
+	name: "svelte",
+	setup(b) {
+		b.onLoad({ filter: /\.svelte$/ }, ({ path }) => {
+			const r = compile(readFileSync(path, "utf8"), {
+				filename: path,
+				generate: "client",
+				css: "external",
+			});
+			return { contents: r.js.code, loader: "js", resolveDir: dirname(path) };
+		});
+		b.onLoad({ filter: /\.svelte\.(js|ts)$/ }, ({ path }) => {
+			const r = compileModule(readFileSync(path, "utf8"), { filename: path, generate: "client" });
+			return { contents: r.js.code, loader: "js", resolveDir: dirname(path) };
+		});
+	},
+};
+
+/** Gzip size, plus the package modules that ended up in the bundle (for the tree-shaking guard). */
+export async function measure(
+	e: Entry
+): Promise<{ gzip: number; modules: string[]; code: string }> {
+	const res = await build({
+		metafile: true,
+		stdin: e.css
+			? { contents: `@import "./${e.css}";`, resolveDir: dist, loader: "css" }
+			: { contents: e.js ?? "", resolveDir: dist, loader: "js" },
+		bundle: true,
+		minify: true,
+		format: "esm",
+		write: false,
+		outdir: "out",
+		treeShaking: true,
+		conditions: ["svelte", "browser", "import", "default"],
+		mainFields: ["svelte", "browser", "module", "main"],
+		plugins: [sveltePlugin],
+		logLevel: "error",
+		// Remote/relative assets (fonts) are not part of the byte budget.
+		external: e.css ? ["*.woff2"] : [],
+		// esm-env picks its production build from the "development" condition being absent.
+	});
+	// A CSS bundle yields one .css file; JS bundles yield one .js (esbuild extracts no css for stdin js).
+	const out = res.outputFiles.find((f) => f.path.endsWith(e.css ? ".css" : ".js"));
+	if (!out) throw new Error(`no output for ${e.name}`);
+	const meta =
+		res.metafile.outputs[
+			Object.keys(res.metafile.outputs).find((k) => k.endsWith(e.css ? ".css" : ".js")) ?? ""
+		];
+	const modules = Object.keys(meta?.inputs ?? {}).filter((k) => k.startsWith("dist/"));
+	return { gzip: gzipSync(out.contents, { level: 9 }).length, modules, code: out.text };
+}
diff --git a/packages/ui/scripts/size-limit.ts b/packages/ui/scripts/size-limit.ts
index 5df854bd..f0573179 100644
--- a/packages/ui/scripts/size-limit.ts
+++ b/packages/ui/scripts/size-limit.ts
@@ -7,28 +7,16 @@
 // with the Svelte runtime and @floating-ui included (that is what ships). The metric is gzip bytes.
 // The ratchet only moves down: --update never raises a limit, raise one by hand in a PR that explains why.
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { gzipSync } from "node:zlib";
-import { build, type Plugin } from "esbuild";
-import { compile, compileModule } from "svelte/compiler";
+import { join } from "node:path";
+import { dist, type Entry, measure } from "./size-lib.js";
 
 const root = join(import.meta.dir, "..");
-const dist = join(root, "dist");
 const limitsFile = join(root, "size-limit.json");
 const HEADROOM = 1.05;
 
-interface Entry {
-	name: string;
-	/** JS entry contents (resolved from dist) or a CSS file path under dist. */
-	js?: string;
-	css?: string;
-	/** Skipped when this path under dist does not exist (an entry that has not landed yet). */
-	requires?: string;
-}
-
 // Divider has no package dependencies, so "Divider only" is the Svelte client runtime plus ~250 B
 // of ours: the floor any Svelte component costs. "Button only" minus that floor is what the
-// package adds (Spinner, the i18n catalogs, clsx).
+// package adds (Spinner, its own i18n groups, clsx).
 const ENTRIES: Entry[] = [
 	{
 		name: "floor: Divider only",
@@ -41,57 +29,6 @@ const ENTRIES: Entry[] = [
 	{ name: "styles/global.css", css: "styles/global.css" },
 ];
 
-/** Compiles .svelte and .svelte.js/.ts files from dist the way vite-plugin-svelte would. */
-const sveltePlugin: Plugin = {
-	name: "svelte",
-	setup(b) {
-		b.onLoad({ filter: /\.svelte$/ }, ({ path }) => {
-			const r = compile(readFileSync(path, "utf8"), {
-				filename: path,
-				generate: "client",
-				css: "external",
-			});
-			return { contents: r.js.code, loader: "js", resolveDir: dirname(path) };
-		});
-		b.onLoad({ filter: /\.svelte\.(js|ts)$/ }, ({ path }) => {
-			const r = compileModule(readFileSync(path, "utf8"), { filename: path, generate: "client" });
-			return { contents: r.js.code, loader: "js", resolveDir: dirname(path) };
-		});
-	},
-};
-
-/** Gzip size, plus the package modules that ended up in the bundle (for the tree-shaking guard). */
-async function measure(e: Entry): Promise<{ gzip: number; modules: string[] }> {
-	const res = await build({
-		metafile: true,
-		stdin: e.css
-			? { contents: `@import "./${e.css}";`, resolveDir: dist, loader: "css" }
-			: { contents: e.js ?? "", resolveDir: dist, loader: "js" },
-		bundle: true,
-		minify: true,
-		format: "esm",
-		write: false,
-		outdir: "out",
-		treeShaking: true,
-		conditions: ["svelte", "browser", "import", "default"],
-		mainFields: ["svelte", "browser", "module", "main"],
-		plugins: [sveltePlugin],
-		logLevel: "error",
-		// Remote/relative assets (fonts) are not part of the byte budget.
-		external: e.css ? ["*.woff2"] : [],
-		// esm-env picks its production build from the "development" condition being absent.
-	});
-	// A CSS bundle yields one .css file; JS bundles yield one .js (esbuild extracts no css for stdin js).
-	const out = res.outputFiles.find((f) => f.path.endsWith(e.css ? ".css" : ".js"));
-	if (!out) throw new Error(`no output for ${e.name}`);
-	const meta =
-		res.metafile.outputs[
-			Object.keys(res.metafile.outputs).find((k) => k.endsWith(e.css ? ".css" : ".js")) ?? ""
-		];
-	const modules = Object.keys(meta?.inputs ?? {}).filter((k) => k.startsWith("dist/"));
-	return { gzip: gzipSync(out.contents, { level: 9 }).length, modules };
-}
-
 /** Importing `Button` must not drag in other components, stores or the theme engine. */
 // announce: Button announces when `loading` ends (screen readers).
 const BUTTON_ALLOWED =
diff --git a/packages/ui/size-limit.json b/packages/ui/size-limit.json
index 2a439b15..f51cf635 100644
--- a/packages/ui/size-limit.json
+++ b/packages/ui/size-limit.json
@@ -1,7 +1,7 @@
 {
 	"floor: Divider only": 18863,
-	"root: Button only": 28600,
-	"root: AppShellLayout": 40900,
+	"root: Button only": 25709,
+	"root: AppShellLayout": 38786,
 	"styles/core.css": 14160,
 	"styles/global.css": 17100,
 	"./seo": 32190
diff --git a/packages/ui/src/lib/charts/HeatmapChart.svelte b/packages/ui/src/lib/charts/HeatmapChart.svelte
index 1aaed54b..ca7ed4eb 100644
--- a/packages/ui/src/lib/charts/HeatmapChart.svelte
+++ b/packages/ui/src/lib/charts/HeatmapChart.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../i18n/state.svelte.js';
+  import { charts } from '../i18n/groups/charts.js';
+  import { useMessages } from '../i18n/state.svelte.js';
 	// ─── HeatmapChart — calendar or matrix heatmap ───────────────────────────────
 	import type { EChartsOption } from "echarts";
 	import ChartCanvas from "./ChartCanvas.svelte";
@@ -7,7 +8,7 @@
 	import { chartPalette, withAlpha } from "./palette.js";
 	import { chartTokens } from "./tokens.js";
 	import type { CalendarHeatmapPoint, MatrixHeatmapPoint } from "./types.js";
-  const msg = useT();
+  const msg = useMessages(charts);
 
 	interface Props {
 		variant: "calendar" | "matrix";
diff --git a/packages/ui/src/lib/components/Alert/Alert.svelte b/packages/ui/src/lib/components/Alert/Alert.svelte
index a1b8e393..0ff8f439 100644
--- a/packages/ui/src/lib/components/Alert/Alert.svelte
+++ b/packages/ui/src/lib/components/Alert/Alert.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { alert } from '../../i18n/groups/alert.js';
   import type { Snippet } from 'svelte';
   import { CheckCircle2, AlertTriangle, XCircle, Info, X } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(alert);
 
   interface Props {
     severity: 'success' | 'warning' | 'error' | 'info';
diff --git a/packages/ui/src/lib/components/AlertDialog/AlertDialog.svelte b/packages/ui/src/lib/components/AlertDialog/AlertDialog.svelte
index e9b3cb74..996eb364 100644
--- a/packages/ui/src/lib/components/AlertDialog/AlertDialog.svelte
+++ b/packages/ui/src/lib/components/AlertDialog/AlertDialog.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { alertDialog } from '../../i18n/groups/alertDialog.js';
   import type { Snippet } from 'svelte';
   import { createIds, createPresence } from '../../primitives/index.js';
   import { modalLayer } from '../Dialog/modal-layer.js';
   import Button from '../Button/Button.svelte';
   import '../Dialog/dialog.css';
-  const t = useT();
+  const t = useMessages(alertDialog);
 
   /**
    * AlertDialog: confirmation that requires an explicit answer (role="alertdialog").
diff --git a/packages/ui/src/lib/components/AppForm/AppForm.svelte b/packages/ui/src/lib/components/AppForm/AppForm.svelte
index 57f749ff..58771aeb 100644
--- a/packages/ui/src/lib/components/AppForm/AppForm.svelte
+++ b/packages/ui/src/lib/components/AppForm/AppForm.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appForm } from '../../i18n/groups/appForm.js';
   /**
    * AppForm: page-level form layout.
    *
@@ -33,7 +34,7 @@
   import Button from '../Button/Button.svelte';
   import { provideSectionHeadingLevel } from '../PageShell/heading-context.js';
   import { ArrowLeft } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(appForm);
 
   interface Props {
     title?:       string;
diff --git a/packages/ui/src/lib/components/AppList/AppList.svelte b/packages/ui/src/lib/components/AppList/AppList.svelte
index d2c979aa..68930d04 100644
--- a/packages/ui/src/lib/components/AppList/AppList.svelte
+++ b/packages/ui/src/lib/components/AppList/AppList.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appList } from '../../i18n/groups/appList.js';
   /**
    * AppList: fullscreen CRUD/list layout.
    *
@@ -42,7 +43,7 @@
   import TextField from '../TextField/TextField.svelte';
   import Pagination from '../Pagination/Pagination.svelte';
   import { Search } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(appList);
 
   type ListCtx<T> = UseListStateReturn<T>;
 
diff --git a/packages/ui/src/lib/components/AppSettings/AppSettings.svelte b/packages/ui/src/lib/components/AppSettings/AppSettings.svelte
index 95800350..2aa11269 100644
--- a/packages/ui/src/lib/components/AppSettings/AppSettings.svelte
+++ b/packages/ui/src/lib/components/AppSettings/AppSettings.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appSettings } from '../../i18n/groups/appSettings.js';
   /**
    * AppSettings: settings/preferences page layout.
    *
@@ -45,7 +46,7 @@
   import type { IconComponent } from '../../types.js';
   import type { Snippet } from 'svelte';
   import { provideSectionHeadingLevel } from '../PageShell/heading-context.js';
-  const t = useT();
+  const t = useMessages(appSettings);
   // The page <h1> is rendered above; titles inside the page default to <h2>.
   provideSectionHeadingLevel();
 
diff --git a/packages/ui/src/lib/components/AppShell/BottomNav.svelte b/packages/ui/src/lib/components/AppShell/BottomNav.svelte
index 1aeb2535..ec039ca1 100644
--- a/packages/ui/src/lib/components/AppShell/BottomNav.svelte
+++ b/packages/ui/src/lib/components/AppShell/BottomNav.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appShell } from '../../i18n/groups/appShell.js';
   import type { NavModule } from './types.js';
-  const t = useT();
+  const t = useMessages(appShell);
 
   interface Props {
     modules: NavModule[];
diff --git a/packages/ui/src/lib/components/AppShell/Panel.svelte b/packages/ui/src/lib/components/AppShell/Panel.svelte
index 9cccc3cf..8b9819da 100644
--- a/packages/ui/src/lib/components/AppShell/Panel.svelte
+++ b/packages/ui/src/lib/components/AppShell/Panel.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appShell } from '../../i18n/groups/appShell.js';
   import type { NavItem, NavModule, NavSection } from './types.js';
   import { isNavSection } from './types.js';
   import NavList from './NavList.svelte';
   import SectionGroup from './SectionGroup.svelte';
   import PanelResizeHandle from './PanelResizeHandle.svelte';
   import { readShellScroll, saveShellScroll } from './shell-state.js';
-  const t = useT();
+  const t = useMessages(appShell);
 
   interface Props {
     modules:           NavModule[];
diff --git a/packages/ui/src/lib/components/AppShell/PanelNavItem.svelte b/packages/ui/src/lib/components/AppShell/PanelNavItem.svelte
index 22a5fa20..e47b884e 100644
--- a/packages/ui/src/lib/components/AppShell/PanelNavItem.svelte
+++ b/packages/ui/src/lib/components/AppShell/PanelNavItem.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { getContext } from 'svelte';
   import { GripVertical } from '@lucide/svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appShell } from '../../i18n/groups/appShell.js';
   import type { NavExtras, NavItem } from './types.js';
-  const t = useT();
+  const t = useMessages(appShell);
   const extras = getContext<NavExtras | undefined>('appshell-nav-extras');
 
   interface Props {
diff --git a/packages/ui/src/lib/components/AppShell/PanelResizeHandle.svelte b/packages/ui/src/lib/components/AppShell/PanelResizeHandle.svelte
index 62f9e24a..1058e9de 100644
--- a/packages/ui/src/lib/components/AppShell/PanelResizeHandle.svelte
+++ b/packages/ui/src/lib/components/AppShell/PanelResizeHandle.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appShell } from '../../i18n/groups/appShell.js';
   import { PANEL_MAX_WIDTH, PANEL_MIN_WIDTH, clampPanelWidth } from './types.js';
-  const t = useT();
+  const t = useMessages(appShell);
 
   interface Props {
     /** Current panel width in px. */
diff --git a/packages/ui/src/lib/components/AppShell/Rail.svelte b/packages/ui/src/lib/components/AppShell/Rail.svelte
index 823e3bc8..aa26d74b 100644
--- a/packages/ui/src/lib/components/AppShell/Rail.svelte
+++ b/packages/ui/src/lib/components/AppShell/Rail.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appShell } from '../../i18n/groups/appShell.js';
   import type { Snippet } from 'svelte';
   import type { NavModule } from './types.js';
-  const t = useT();
+  const t = useMessages(appShell);
 
   interface Props {
     modules:     NavModule[];
diff --git a/packages/ui/src/lib/components/AudioPlayer/AudioPlayer.svelte b/packages/ui/src/lib/components/AudioPlayer/AudioPlayer.svelte
index 2a3bf9d9..08b06098 100644
--- a/packages/ui/src/lib/components/AudioPlayer/AudioPlayer.svelte
+++ b/packages/ui/src/lib/components/AudioPlayer/AudioPlayer.svelte
@@ -9,8 +9,9 @@
   import { Pause, Play } from '@lucide/svelte';
   import IconButton from '../Button/IconButton.svelte';
   import Spinner from '../Spinner/Spinner.svelte';
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { audioPlayer } from '../../i18n/groups/audioPlayer.js';
+  const t = useMessages(audioPlayer);
 
   /**
    * AudioPlayer: a voice-message player with a waveform scrubber (the native `<audio controls>` is
diff --git a/packages/ui/src/lib/components/Avatar/Avatar.svelte b/packages/ui/src/lib/components/Avatar/Avatar.svelte
index 10db3c53..ffabec9e 100644
--- a/packages/ui/src/lib/components/Avatar/Avatar.svelte
+++ b/packages/ui/src/lib/components/Avatar/Avatar.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { avatar } from '../../i18n/groups/avatar.js';
+  const t = useMessages(avatar);
 
   /**
    * Avatar: user identity display component.
diff --git a/packages/ui/src/lib/components/Badge/Badge.svelte b/packages/ui/src/lib/components/Badge/Badge.svelte
index d19fb504..4bdc4f48 100644
--- a/packages/ui/src/lib/components/Badge/Badge.svelte
+++ b/packages/ui/src/lib/components/Badge/Badge.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { badge } from '../../i18n/groups/badge.js';
   import type { Snippet } from 'svelte';
-  const t = useT();
+  const t = useMessages(badge);
 
   interface Props {
     count?: number;
diff --git a/packages/ui/src/lib/components/Breadcrumb/Breadcrumb.svelte b/packages/ui/src/lib/components/Breadcrumb/Breadcrumb.svelte
index d80fe4b6..efc388d4 100644
--- a/packages/ui/src/lib/components/Breadcrumb/Breadcrumb.svelte
+++ b/packages/ui/src/lib/components/Breadcrumb/Breadcrumb.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { breadcrumb } from '../../i18n/groups/breadcrumb.js';
+  const t = useMessages(breadcrumb);
 	export interface BreadcrumbItem {
 		label: string;
 		href?: string;
diff --git a/packages/ui/src/lib/components/Button/Button.svelte b/packages/ui/src/lib/components/Button/Button.svelte
index ea0684fb..031a3461 100644
--- a/packages/ui/src/lib/components/Button/Button.svelte
+++ b/packages/ui/src/lib/components/Button/Button.svelte
@@ -2,9 +2,10 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
   import Spinner from '../Spinner/Spinner.svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { button } from '../../i18n/groups/button.js';
   import { announce } from '../../utils/announce.js';
-  const t = useT();
+  const t = useMessages(button);
 
   type Variant = 'filled' | 'glass' | 'outlined' | 'ghost' | 'destructive';
   type Size = 'sm' | 'md' | 'lg';
diff --git a/packages/ui/src/lib/components/Button/IconButton.svelte b/packages/ui/src/lib/components/Button/IconButton.svelte
index 9161fc60..748e3b72 100644
--- a/packages/ui/src/lib/components/Button/IconButton.svelte
+++ b/packages/ui/src/lib/components/Button/IconButton.svelte
@@ -2,10 +2,11 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import Spinner from '../Spinner/Spinner.svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { button } from '../../i18n/groups/button.js';
   import { announce } from '../../utils/announce.js';
   import { devWarn } from '../../utils/dev-warn.js';
-  const t = useT();
+  const t = useMessages(button);
 
   type Variant = 'glass' | 'filled' | 'text';
   type Size = 'sm' | 'md' | 'lg';
diff --git a/packages/ui/src/lib/components/Chip/Chip.svelte b/packages/ui/src/lib/components/Chip/Chip.svelte
index f24642de..df60b879 100644
--- a/packages/ui/src/lib/components/Chip/Chip.svelte
+++ b/packages/ui/src/lib/components/Chip/Chip.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { chip } from '../../i18n/groups/chip.js';
   import type { IconComponent as IconType } from '../../types.js';
   import { X } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(chip);
 
   interface Props {
     label: string;
diff --git a/packages/ui/src/lib/components/CodeSnippet/CodeSnippet.svelte b/packages/ui/src/lib/components/CodeSnippet/CodeSnippet.svelte
index 8b26f52a..87351f1c 100644
--- a/packages/ui/src/lib/components/CodeSnippet/CodeSnippet.svelte
+++ b/packages/ui/src/lib/components/CodeSnippet/CodeSnippet.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { codeSnippet } from '../../i18n/groups/codeSnippet.js';
   import { Copy, Check } from '@lucide/svelte';
   import { copyToClipboard } from '../../utils/index.js';
   import { getHighlighter } from '../../utils/highlighter.js';
-  const t = useT();
+  const t = useMessages(codeSnippet);
 
   interface Props {
     code: string;
diff --git a/packages/ui/src/lib/components/Combobox/Combobox.svelte b/packages/ui/src/lib/components/Combobox/Combobox.svelte
index 18451200..f77d8fb6 100644
--- a/packages/ui/src/lib/components/Combobox/Combobox.svelte
+++ b/packages/ui/src/lib/components/Combobox/Combobox.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import { focusTextField, primeKeyboard } from '../../actions/autofocus.js';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { chip } from '../../i18n/groups/chip.js';
+  import { combobox } from '../../i18n/groups/combobox.js';
   import { uid } from '../../utils/index.js';
   import { createListbox } from '../../primitives/index.js';
   import FloatingLayer from '../Popover/FloatingLayer.svelte';
   import { ChevronDown, Check, X } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(chip, combobox);
 
   export interface ComboboxOption {
     value: string;
diff --git a/packages/ui/src/lib/components/CommandPalette/CommandPalette.svelte b/packages/ui/src/lib/components/CommandPalette/CommandPalette.svelte
index 7d3a1d85..6f97d24f 100644
--- a/packages/ui/src/lib/components/CommandPalette/CommandPalette.svelte
+++ b/packages/ui/src/lib/components/CommandPalette/CommandPalette.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { focusTextField } from '../../actions/autofocus.js';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { commandPalette } from '../../i18n/groups/commandPalette.js';
   import { createPresence } from '../../primitives/index.js';
   import { modalLayer } from '../Dialog/modal-layer.js';
   import '../Dialog/dialog.css';
@@ -9,7 +10,7 @@
   import type { NavModule, NavItem } from '../AppShell/types.js';
   import { isNavSection } from '../AppShell/types.js';
   import { announce } from '../../utils/announce.js';
-  const t = useT();
+  const t = useMessages(commandPalette);
 
   /** A result returned by the `search` callback (server-side / async results). */
   export interface CommandResult {
diff --git a/packages/ui/src/lib/components/ConversationItem/ConversationItem.svelte b/packages/ui/src/lib/components/ConversationItem/ConversationItem.svelte
index 531152d8..d7b4495e 100644
--- a/packages/ui/src/lib/components/ConversationItem/ConversationItem.svelte
+++ b/packages/ui/src/lib/components/ConversationItem/ConversationItem.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { BellOff, Pin } from '@lucide/svelte';
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { chat } from '../../i18n/groups/chat.js';
+  const t = useMessages(chat);
 
   /**
    * ConversationItem: one row of an inbox. Avatar, then title and time on the first line, preview
diff --git a/packages/ui/src/lib/components/CopyButton/CopyButton.svelte b/packages/ui/src/lib/components/CopyButton/CopyButton.svelte
index 8bbaed62..13d1460d 100644
--- a/packages/ui/src/lib/components/CopyButton/CopyButton.svelte
+++ b/packages/ui/src/lib/components/CopyButton/CopyButton.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { copyButton } from '../../i18n/groups/copyButton.js';
   import { Copy, Check } from '@lucide/svelte';
   import { onDestroy } from 'svelte';
   import Button from '../Button/Button.svelte';
@@ -8,7 +9,7 @@
   import { toast } from '../../stores/toast.svelte.js';
   import { announce } from '../../utils/announce.js';
   import type { HTMLAttributes } from 'svelte/elements';
-  const t = useT();
+  const t = useMessages(copyButton);
 
   interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class' | 'children' | 'onclick' | 'oncopy' | 'aria-label'> {
     value: string;
diff --git a/packages/ui/src/lib/components/DataTable/DataTable.svelte b/packages/ui/src/lib/components/DataTable/DataTable.svelte
index 20e0f20a..9a05d707 100644
--- a/packages/ui/src/lib/components/DataTable/DataTable.svelte
+++ b/packages/ui/src/lib/components/DataTable/DataTable.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" generics="TData extends RowData">
-  import { useLocale, useT } from '../../i18n/state.svelte.js';
+  import { dataTable } from '../../i18n/groups/dataTable.js';
+  import { useLocale, useMessages } from '../../i18n/state.svelte.js';
   import { tableMessages } from './table-messages.js';
   import type { Snippet } from 'svelte';
   import {
@@ -18,7 +19,7 @@
   import DataTableColumnResize from './DataTableColumnResize.svelte';
   import DataTableToolbar from './DataTableToolbar.svelte';
   import DataTablePagination from './DataTablePagination.svelte';
-  const t = useT();
+  const t = useMessages(dataTable);
   const locale = useLocale();
   const tm = $derived(tableMessages(locale()));
 
diff --git a/packages/ui/src/lib/components/DataTable/DataTableColumnToggle.svelte b/packages/ui/src/lib/components/DataTable/DataTableColumnToggle.svelte
index 987f3b7f..773e6ed0 100644
--- a/packages/ui/src/lib/components/DataTable/DataTableColumnToggle.svelte
+++ b/packages/ui/src/lib/components/DataTable/DataTableColumnToggle.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" generics="TData extends RowData">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { dataTable } from '../../i18n/groups/dataTable.js';
   import { createListbox } from '../../primitives/index.js';
   import { uid } from '../../utils/index.js';
   import FloatingLayer from '../Popover/FloatingLayer.svelte';
@@ -7,7 +8,7 @@
   import { SlidersHorizontal, Check } from '@lucide/svelte';
   import type { CaTable } from './table-hook.svelte.js';
   import type { RowData } from '@tanstack/svelte-table';
-  const t = useT();
+  const t = useMessages(dataTable);
 
   interface Props {
     table: CaTable<TData>;
diff --git a/packages/ui/src/lib/components/DataTable/DataTableFacetedFilter.svelte b/packages/ui/src/lib/components/DataTable/DataTableFacetedFilter.svelte
index c8b842f0..ed6e127a 100644
--- a/packages/ui/src/lib/components/DataTable/DataTableFacetedFilter.svelte
+++ b/packages/ui/src/lib/components/DataTable/DataTableFacetedFilter.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { dataTable } from '../../i18n/groups/dataTable.js';
   import { uid } from '../../utils/index.js';
   import FloatingLayer from '../Popover/FloatingLayer.svelte';
   import { createTriggerProps, tabIntoPopup } from '../Popover/trigger.js';
   import { PlusCircle, Check } from '@lucide/svelte';
   import Badge from '../Badge/Badge.svelte';
-  const t = useT();
+  const t = useMessages(dataTable);
 
   interface Props {
     title:             string;
diff --git a/packages/ui/src/lib/components/DataTable/DataTablePagination.svelte b/packages/ui/src/lib/components/DataTable/DataTablePagination.svelte
index ee364893..7244f6cf 100644
--- a/packages/ui/src/lib/components/DataTable/DataTablePagination.svelte
+++ b/packages/ui/src/lib/components/DataTable/DataTablePagination.svelte
@@ -1,9 +1,10 @@
 <script lang="ts" generics="TData extends RowData">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { dataTable } from '../../i18n/groups/dataTable.js';
   import { ChevronLeft, ChevronRight } from '@lucide/svelte';
   import type { CaTable } from './table-hook.svelte.js';
   import type { RowData } from '@tanstack/svelte-table';
-  const t = useT();
+  const t = useMessages(dataTable);
 
   interface Props {
     table: CaTable<TData>;
diff --git a/packages/ui/src/lib/components/DataTable/DataTableToolbar.svelte b/packages/ui/src/lib/components/DataTable/DataTableToolbar.svelte
index ec63755d..e040e717 100644
--- a/packages/ui/src/lib/components/DataTable/DataTableToolbar.svelte
+++ b/packages/ui/src/lib/components/DataTable/DataTableToolbar.svelte
@@ -1,11 +1,12 @@
 <script lang="ts" generics="TData extends RowData">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { dataTable } from '../../i18n/groups/dataTable.js';
   import type { Snippet } from 'svelte';
   import { Search, Download, Loader } from '@lucide/svelte';
   import type { CaTable } from './table-hook.svelte.js';
   import type { RowData } from '@tanstack/svelte-table';
   import DataTableColumnToggle from './DataTableColumnToggle.svelte';
-  const t = useT();
+  const t = useMessages(dataTable);
 
   interface Props {
     table:                CaTable<TData>;
diff --git a/packages/ui/src/lib/components/Date/Calendar.svelte b/packages/ui/src/lib/components/Date/Calendar.svelte
index 9b403c60..2227bf8a 100644
--- a/packages/ui/src/lib/components/Date/Calendar.svelte
+++ b/packages/ui/src/lib/components/Date/Calendar.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { calendar } from '../../i18n/groups/calendar.js';
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
   import CalendarBody from './CalendarBody.svelte';
   import { CalendarState } from './calendar-state.svelte.js';
   import type { WeekStart } from './date-utils.js';
   import './date.css';
-  const t = useT();
+  const t = useMessages(calendar);
 
   interface Props {
     /** Selected date. Bindable. */
diff --git a/packages/ui/src/lib/components/Date/CalendarBody.svelte b/packages/ui/src/lib/components/Date/CalendarBody.svelte
index ce40dd1c..3361c0dd 100644
--- a/packages/ui/src/lib/components/Date/CalendarBody.svelte
+++ b/packages/ui/src/lib/components/Date/CalendarBody.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { calendar } from '../../i18n/groups/calendar.js';
   /**
    * Internal: header + month grids shared by Calendar, RangeCalendar, DatePicker and
    * DateRangePicker. The parent owns the `role="application"` root and the CalendarState.
@@ -8,7 +9,7 @@
   import { ChevronLeft, ChevronRight } from '@lucide/svelte';
   import type { CalendarState } from './calendar-state.svelte.js';
   import { sameDay } from './date-utils.js';
-  const t = useT();
+  const t = useMessages(calendar);
 
   interface Props {
     state: CalendarState;
diff --git a/packages/ui/src/lib/components/Date/DatePicker.svelte b/packages/ui/src/lib/components/Date/DatePicker.svelte
index 1acf77f3..f8b0f760 100644
--- a/packages/ui/src/lib/components/Date/DatePicker.svelte
+++ b/packages/ui/src/lib/components/Date/DatePicker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { calendar } from '../../i18n/groups/calendar.js';
   import { CalendarDays } from '@lucide/svelte';
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
@@ -11,7 +12,7 @@
   import { FieldState } from './field-state.svelte.js';
   import PickerPopover from './PickerPopover.svelte';
   import './date.css';
-  const t = useT();
+  const t = useMessages(calendar);
 
   interface Props {
     label?:        string;
diff --git a/packages/ui/src/lib/components/Date/DateRangePicker.svelte b/packages/ui/src/lib/components/Date/DateRangePicker.svelte
index 4a6f5a83..4a65c0a8 100644
--- a/packages/ui/src/lib/components/Date/DateRangePicker.svelte
+++ b/packages/ui/src/lib/components/Date/DateRangePicker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { calendar } from '../../i18n/groups/calendar.js';
   import { CalendarRange } from '@lucide/svelte';
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
@@ -12,7 +13,7 @@
   import PickerPopover from './PickerPopover.svelte';
   import type { DateRange } from './types.js';
   import './date.css';
-  const t = useT();
+  const t = useMessages(calendar);
 
   interface Props {
     label?:        string;
diff --git a/packages/ui/src/lib/components/Date/RangeCalendar.svelte b/packages/ui/src/lib/components/Date/RangeCalendar.svelte
index a91b6239..c5997dc6 100644
--- a/packages/ui/src/lib/components/Date/RangeCalendar.svelte
+++ b/packages/ui/src/lib/components/Date/RangeCalendar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { calendar } from '../../i18n/groups/calendar.js';
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
   import CalendarBody from './CalendarBody.svelte';
@@ -7,7 +8,7 @@
   import type { WeekStart } from './date-utils.js';
   import type { DateRange } from './types.js';
   import './date.css';
-  const t = useT();
+  const t = useMessages(calendar);
 
   interface Props {
     /** Selected range. Bindable. `start`/`end` are undefined until chosen. */
diff --git a/packages/ui/src/lib/components/Dialog/Dialog.svelte b/packages/ui/src/lib/components/Dialog/Dialog.svelte
index d84574e4..e74a9e18 100644
--- a/packages/ui/src/lib/components/Dialog/Dialog.svelte
+++ b/packages/ui/src/lib/components/Dialog/Dialog.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { dialog } from '../../i18n/groups/dialog.js';
   import type { Snippet } from 'svelte';
   import { X } from '@lucide/svelte';
   import './dialog.css';
@@ -7,7 +8,7 @@
   import { createPresence } from '../../primitives/index.js';
   import { createIds } from '../../primitives/index.js';
   import { modalLayer } from './modal-layer.js';
-  const t = useT();
+  const t = useMessages(dialog);
 
   /**
    * Dialog: second-layer modal.
diff --git a/packages/ui/src/lib/components/Docs/Callout.svelte b/packages/ui/src/lib/components/Docs/Callout.svelte
index 83235e37..f8960f09 100644
--- a/packages/ui/src/lib/components/Docs/Callout.svelte
+++ b/packages/ui/src/lib/components/Docs/Callout.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { docs } from '../../i18n/groups/docs.js';
   import type { Snippet } from 'svelte';
   import Alert from '../Alert/Alert.svelte';
-  const t = useT();
+  const t = useMessages(docs);
 
   /**
    * Callout: aside block for docs prose. Thin vocabulary layer over `Alert`:
diff --git a/packages/ui/src/lib/components/Docs/CodeTabs.svelte b/packages/ui/src/lib/components/Docs/CodeTabs.svelte
index d3a6e3b9..d11f0613 100644
--- a/packages/ui/src/lib/components/Docs/CodeTabs.svelte
+++ b/packages/ui/src/lib/components/Docs/CodeTabs.svelte
@@ -24,14 +24,15 @@
 </script>
 
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { docs } from '../../i18n/groups/docs.js';
   import type { Snippet } from 'svelte';
   import { onMount } from 'svelte';
   import { Check, Copy } from '@lucide/svelte';
   import { copyToClipboard } from '../../utils/clipboard.js';
   import { codeTabsPrefs } from './code-tabs-state.svelte.js';
   import CodeTab from './CodeTab.svelte';
-  const t = useT();
+  const t = useMessages(docs);
 
   /**
    * CodeTabs: language tabs around highlighted code, with copy.
diff --git a/packages/ui/src/lib/components/Docs/DocsNav.svelte b/packages/ui/src/lib/components/Docs/DocsNav.svelte
index 9ac789dc..a1071d70 100644
--- a/packages/ui/src/lib/components/Docs/DocsNav.svelte
+++ b/packages/ui/src/lib/components/Docs/DocsNav.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { docs } from '../../i18n/groups/docs.js';
   import MethodBadge from './MethodBadge.svelte';
   import type { DocsNavGroup } from './types.js';
-  const t = useT();
+  const t = useMessages(docs);
 
   /**
    * DocsNav: sidebar tree: labelled groups of page links, current page marked with
diff --git a/packages/ui/src/lib/components/Docs/DocsSearch.svelte b/packages/ui/src/lib/components/Docs/DocsSearch.svelte
index cb46a787..58616b60 100644
--- a/packages/ui/src/lib/components/Docs/DocsSearch.svelte
+++ b/packages/ui/src/lib/components/Docs/DocsSearch.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { focusTextField } from '../../actions/autofocus.js';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { docs } from '../../i18n/groups/docs.js';
   import { createIds, createPresence } from '../../primitives/index.js';
   import { modalLayer } from '../Dialog/modal-layer.js';
   import { CornerDownLeft, FileText, Hash, Search } from '@lucide/svelte';
@@ -9,7 +10,7 @@
   import '../Dialog/dialog.css';
   import { searchDocs, type DocsSearchResult } from './search.js';
   import type { DocsSearchEntry } from './types.js';
-  const t = useT();
+  const t = useMessages(docs);
 
   /**
    * DocsSearch: full-text search dialog for docs.
diff --git a/packages/ui/src/lib/components/Docs/DocsShell.svelte b/packages/ui/src/lib/components/Docs/DocsShell.svelte
index 9f40bc3b..70016e9b 100644
--- a/packages/ui/src/lib/components/Docs/DocsShell.svelte
+++ b/packages/ui/src/lib/components/Docs/DocsShell.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { primeKeyboard } from '../../actions/autofocus.js';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { docs } from '../../i18n/groups/docs.js';
   import type { Snippet } from 'svelte';
   import { onMount } from 'svelte';
   import { ChevronLeft, ChevronRight, Menu, Search } from '@lucide/svelte';
@@ -13,7 +14,7 @@
   import TableOfContents from './TableOfContents.svelte';
   import { restoreSidebar, saveSidebar, sidebarScript } from './sidebar-scroll.js';
   import type { DocsHeading, DocsNavGroup, DocsPagerLink, DocsSearchEntry, DocsSection } from './types.js';
-  const t = useT();
+  const t = useMessages(docs);
 
   /**
    * DocsShell: page frame for developer docs.
diff --git a/packages/ui/src/lib/components/Docs/TableOfContents.svelte b/packages/ui/src/lib/components/Docs/TableOfContents.svelte
index cafbead0..42a329aa 100644
--- a/packages/ui/src/lib/components/Docs/TableOfContents.svelte
+++ b/packages/ui/src/lib/components/Docs/TableOfContents.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { docs } from '../../i18n/groups/docs.js';
   import { ChevronDown } from '@lucide/svelte';
   import type { DocsHeading } from './types.js';
-  const t = useT();
+  const t = useMessages(docs);
 
   /**
    * TableOfContents: "On this page" index with scrollspy.
diff --git a/packages/ui/src/lib/components/Drawer/Drawer.svelte b/packages/ui/src/lib/components/Drawer/Drawer.svelte
index 0c3697b3..e9a4c400 100644
--- a/packages/ui/src/lib/components/Drawer/Drawer.svelte
+++ b/packages/ui/src/lib/components/Drawer/Drawer.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { drawer } from '../../i18n/groups/drawer.js';
   import type { Snippet } from 'svelte';
   import type { HTMLDialogAttributes } from 'svelte/elements';
   import { createIds, createPresence } from '../../primitives/index.js';
   import { modalLayer } from '../Dialog/modal-layer.js';
   import { X } from '@lucide/svelte';
   import '../Dialog/dialog.css';
-  const t = useT();
+  const t = useMessages(drawer);
 
   /**
    * Drawer: side panel, second layer.
diff --git a/packages/ui/src/lib/components/ErrorPage/ErrorPage.svelte b/packages/ui/src/lib/components/ErrorPage/ErrorPage.svelte
index 69166ef9..3b65abf3 100644
--- a/packages/ui/src/lib/components/ErrorPage/ErrorPage.svelte
+++ b/packages/ui/src/lib/components/ErrorPage/ErrorPage.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { errorPage } from '../../i18n/groups/errorPage.js';
   import Button from '../Button/Button.svelte';
   import { Home, RefreshCw, AlertTriangle, Search, ServerCrash } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(errorPage);
 
   interface Props {
     status?: number;
diff --git a/packages/ui/src/lib/components/ExportMenu/ExportMenu.svelte b/packages/ui/src/lib/components/ExportMenu/ExportMenu.svelte
index 7e60d7f1..ec8c08f8 100644
--- a/packages/ui/src/lib/components/ExportMenu/ExportMenu.svelte
+++ b/packages/ui/src/lib/components/ExportMenu/ExportMenu.svelte
@@ -1,12 +1,13 @@
 <script lang="ts" generics="T extends object">
   import { Download } from '@lucide/svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { exportMenu } from '../../i18n/groups/exportMenu.js';
   import { announce } from '../../utils/announce.js';
   import { downloadFile, toCsv, toJson, type ExportColumn } from '../../utils/export.js';
   import Button from '../Button/Button.svelte';
   import DropdownMenu from '../DropdownMenu/DropdownMenu.svelte';
   import DropdownMenuItem from '../DropdownMenu/DropdownMenuItem.svelte';
-  const t = useT();
+  const t = useMessages(exportMenu);
 
   type Format = 'csv' | 'json';
   interface ExportEvent {
diff --git a/packages/ui/src/lib/components/ExternalLink/ExternalLink.svelte b/packages/ui/src/lib/components/ExternalLink/ExternalLink.svelte
index a0bda4bb..3047d428 100644
--- a/packages/ui/src/lib/components/ExternalLink/ExternalLink.svelte
+++ b/packages/ui/src/lib/components/ExternalLink/ExternalLink.svelte
@@ -2,8 +2,9 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAnchorAttributes } from 'svelte/elements';
   import { ExternalLink as ExternalIcon } from '@lucide/svelte';
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { externalLink } from '../../i18n/groups/externalLink.js';
+  const t = useMessages(externalLink);
 
   /**
    * ExternalLink: a link that leaves the app, opened in a new tab.
diff --git a/packages/ui/src/lib/components/FileUpload/FileUpload.svelte b/packages/ui/src/lib/components/FileUpload/FileUpload.svelte
index fa4b0460..187dd914 100644
--- a/packages/ui/src/lib/components/FileUpload/FileUpload.svelte
+++ b/packages/ui/src/lib/components/FileUpload/FileUpload.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { fileUpload } from '../../i18n/groups/fileUpload.js';
   import { Upload, X, File as FileIcon, Image as ImageIcon } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLInputAttributes } from 'svelte/elements';
-  const t = useT();
+  const t = useMessages(fileUpload);
 
   interface Props
     extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | 'class' | 'children' | 'onchange' | 'list'> {
diff --git a/packages/ui/src/lib/components/InstallPrompt/InstallPrompt.svelte b/packages/ui/src/lib/components/InstallPrompt/InstallPrompt.svelte
index b58b2d8d..1b7ebdbd 100644
--- a/packages/ui/src/lib/components/InstallPrompt/InstallPrompt.svelte
+++ b/packages/ui/src/lib/components/InstallPrompt/InstallPrompt.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import { Download, Share, SquarePlus, X } from '@lucide/svelte';
   import { onMount } from 'svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { installPrompt } from '../../i18n/groups/installPrompt.js';
   import { storageGet, storageSet } from '../../utils/local-storage.js';
   import Button from '../Button/Button.svelte';
 
@@ -39,7 +40,7 @@
     class: className = '',
   }: Props = $props();
 
-  const t = useT();
+  const t = useMessages(installPrompt);
 
   let deferred = $state<BeforeInstallPromptEvent | null>(null);
   let ios = $state(false);
diff --git a/packages/ui/src/lib/components/KpiCard/KpiCard.svelte b/packages/ui/src/lib/components/KpiCard/KpiCard.svelte
index 5f39e0f5..8ea2b286 100644
--- a/packages/ui/src/lib/components/KpiCard/KpiCard.svelte
+++ b/packages/ui/src/lib/components/KpiCard/KpiCard.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { kpiCard } from '../../i18n/groups/kpiCard.js';
   import type { IconComponent } from '../../types.js';
   import Card from '../Card/Card.svelte';
-  const t = useT();
+  const t = useMessages(kpiCard);
 
   interface Props {
     title:   string;
diff --git a/packages/ui/src/lib/components/Lightbox/Lightbox.svelte b/packages/ui/src/lib/components/Lightbox/Lightbox.svelte
index 666507cc..2ee70282 100644
--- a/packages/ui/src/lib/components/Lightbox/Lightbox.svelte
+++ b/packages/ui/src/lib/components/Lightbox/Lightbox.svelte
@@ -17,10 +17,11 @@
 
 <script lang="ts">
 	import { ChevronLeft, ChevronRight, Download, X } from "@lucide/svelte";
-	import { useT } from "../../i18n/state.svelte.js";
+	import { useMessages } from '../../i18n/state.svelte.js';
+	import { lightbox } from '../../i18n/groups/lightbox.js';
 	import { createIds, createPresence } from "../../primitives/index.js";
 	import { modalLayer } from "../Dialog/modal-layer.js";
-	const t = useT();
+	const t = useMessages(lightbox);
 
 	/**
 	 * Lightbox: full-screen media viewer for one image or a gallery of images and videos.
diff --git a/packages/ui/src/lib/components/LiveList/LiveList.svelte b/packages/ui/src/lib/components/LiveList/LiveList.svelte
index eef80fc2..46cb511d 100644
--- a/packages/ui/src/lib/components/LiveList/LiveList.svelte
+++ b/packages/ui/src/lib/components/LiveList/LiveList.svelte
@@ -2,11 +2,12 @@
   import type { Snippet } from 'svelte';
   import { onDestroy, untrack } from 'svelte';
   import { ArrowDown } from '@lucide/svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { liveList } from '../../i18n/groups/liveList.js';
   import { announce } from '../../utils/announce.js';
   import Progress from '../Progress/Progress.svelte';
   import { scrollFocusable } from '../../actions/scroll-focusable.js';
-  const t = useT();
+  const t = useMessages(liveList);
 
   type Status = 'idle' | 'running' | 'done' | 'error';
 
diff --git a/packages/ui/src/lib/components/LoadingBoundary/LoadingBoundary.svelte b/packages/ui/src/lib/components/LoadingBoundary/LoadingBoundary.svelte
index 80b79ef8..bedbb350 100644
--- a/packages/ui/src/lib/components/LoadingBoundary/LoadingBoundary.svelte
+++ b/packages/ui/src/lib/components/LoadingBoundary/LoadingBoundary.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { spinner } from '../../i18n/groups/spinner.js';
   import Skeleton from '../Skeleton/Skeleton.svelte';
-  const t = useT();
+  const t = useMessages(spinner);
 
   /**
    * LoadingBoundary: `<svelte:boundary>` with a loading UI that never flashes.
diff --git a/packages/ui/src/lib/components/MediaGrid/MediaGrid.svelte b/packages/ui/src/lib/components/MediaGrid/MediaGrid.svelte
index c36ba6a9..5ca5430c 100644
--- a/packages/ui/src/lib/components/MediaGrid/MediaGrid.svelte
+++ b/packages/ui/src/lib/components/MediaGrid/MediaGrid.svelte
@@ -27,10 +27,11 @@
 
 <script lang="ts">
   import { FileText, ImageOff, Play } from '@lucide/svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { mediaGrid } from '../../i18n/groups/mediaGrid.js';
   import Lightbox, { type LightboxItem } from '../Lightbox/Lightbox.svelte';
   import Skeleton from '../Skeleton/Skeleton.svelte';
-  const t = useT();
+  const t = useMessages(mediaGrid);
 
   /**
    * MediaGrid: the media tiles of a chat message (images, videos, documents).
diff --git a/packages/ui/src/lib/components/MessageBubble/MessageBubble.svelte b/packages/ui/src/lib/components/MessageBubble/MessageBubble.svelte
index 439005a4..cbe7f4b0 100644
--- a/packages/ui/src/lib/components/MessageBubble/MessageBubble.svelte
+++ b/packages/ui/src/lib/components/MessageBubble/MessageBubble.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { Check, CheckCheck, Clock } from '@lucide/svelte';
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { chat } from '../../i18n/groups/chat.js';
+  const t = useMessages(chat);
 
   type Direction = 'in' | 'out';
   type Grouped = 'single' | 'first' | 'middle' | 'last';
diff --git a/packages/ui/src/lib/components/MobilePane/MobilePane.svelte b/packages/ui/src/lib/components/MobilePane/MobilePane.svelte
index 3befb678..2a3ccf00 100644
--- a/packages/ui/src/lib/components/MobilePane/MobilePane.svelte
+++ b/packages/ui/src/lib/components/MobilePane/MobilePane.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { mobilePane } from '../../i18n/groups/mobilePane.js';
   import type { Snippet } from 'svelte';
   import { ArrowLeft } from '@lucide/svelte';
   import { tick } from 'svelte';
   import { keyboardAware } from '../../actions/keyboard-aware.js';
   import IconButton from '../Button/IconButton.svelte';
   import MobileHeader from '../AppShell/MobileHeader.svelte';
-  const t = useT();
+  const t = useMessages(mobilePane);
 
   /**
    * MobilePane: a full-screen layer above the shell for mobile drill-down
diff --git a/packages/ui/src/lib/components/MotionStage/MotionStage.svelte b/packages/ui/src/lib/components/MotionStage/MotionStage.svelte
index bba98b4a..1312ee9e 100644
--- a/packages/ui/src/lib/components/MotionStage/MotionStage.svelte
+++ b/packages/ui/src/lib/components/MotionStage/MotionStage.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import { onMount, type Snippet } from 'svelte';
   import Button from '../Button/Button.svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { motionStage } from '../../i18n/groups/motionStage.js';
   import { reducedMotion } from '../../stores/reduced-motion.svelte.js';
   import { createStage, type MotionCtx } from './stage.svelte.js';
-  const t = useT();
+  const t = useMessages(motionStage);
 
   /**
    * MotionStage: the frame of a motion demo. It autoplays only while at least half of it is in view
diff --git a/packages/ui/src/lib/components/NotificationBell/NotificationBell.svelte b/packages/ui/src/lib/components/NotificationBell/NotificationBell.svelte
index 5acd9c72..35b24b89 100644
--- a/packages/ui/src/lib/components/NotificationBell/NotificationBell.svelte
+++ b/packages/ui/src/lib/components/NotificationBell/NotificationBell.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { notificationBell } from '../../i18n/groups/notificationBell.js';
   import { Bell } from '@lucide/svelte';
   import { uid } from '../../utils/index.js';
   import FloatingLayer from '../Popover/FloatingLayer.svelte';
   import { createTriggerProps, tabIntoPopup } from '../Popover/trigger.js';
   import Badge from '../Badge/Badge.svelte';
   import type { Snippet } from 'svelte';
-  const t = useT();
+  const t = useMessages(notificationBell);
 
   export interface NotificationItem {
     id: string;
diff --git a/packages/ui/src/lib/components/NumberField/NumberField.svelte b/packages/ui/src/lib/components/NumberField/NumberField.svelte
index 6897f631..f639ee8c 100644
--- a/packages/ui/src/lib/components/NumberField/NumberField.svelte
+++ b/packages/ui/src/lib/components/NumberField/NumberField.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { numberField } from '../../i18n/groups/numberField.js';
   import { Minus, Plus } from '@lucide/svelte';
   import { uid } from '../../utils/index.js';
-  const t = useT();
+  const t = useMessages(numberField);
 
   interface Props {
     value?:       number;
diff --git a/packages/ui/src/lib/components/Pagination/Pagination.svelte b/packages/ui/src/lib/components/Pagination/Pagination.svelte
index ed9e74f6..da149121 100644
--- a/packages/ui/src/lib/components/Pagination/Pagination.svelte
+++ b/packages/ui/src/lib/components/Pagination/Pagination.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { pagination } from '../../i18n/groups/pagination.js';
   import { ChevronLeft, ChevronRight } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(pagination);
 
   interface Props {
     count: number;
diff --git a/packages/ui/src/lib/components/Select/Select.svelte b/packages/ui/src/lib/components/Select/Select.svelte
index 14c9ff52..5efa068b 100644
--- a/packages/ui/src/lib/components/Select/Select.svelte
+++ b/packages/ui/src/lib/components/Select/Select.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { select } from '../../i18n/groups/select.js';
   import { uid } from '../../utils/index.js';
   import { createListbox } from '../../primitives/index.js';
   import FloatingLayer from '../Popover/FloatingLayer.svelte';
   import { ChevronDown, Check } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(select);
 
   interface Option {
     value:     string;
diff --git a/packages/ui/src/lib/components/Sheet/Sheet.svelte b/packages/ui/src/lib/components/Sheet/Sheet.svelte
index 8d7e756f..d48fb55e 100644
--- a/packages/ui/src/lib/components/Sheet/Sheet.svelte
+++ b/packages/ui/src/lib/components/Sheet/Sheet.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { sheet } from '../../i18n/groups/sheet.js';
 	import { X } from "@lucide/svelte";
 	import { createIds, createPresence } from "../../primitives/index.js";
 	import { modalLayer } from "../Dialog/modal-layer.js";
@@ -7,7 +8,7 @@
 	import { Spring } from "svelte/motion";
 	import { reducedMotion } from "../../stores/reduced-motion.svelte";
 	import "../Dialog/dialog.css";
-  const t = useT();
+  const t = useMessages(sheet);
 
 	/**
 	 * Sheet: mobile-first bottom sheet.
diff --git a/packages/ui/src/lib/components/SiteHeader/SiteHeader.svelte b/packages/ui/src/lib/components/SiteHeader/SiteHeader.svelte
index afa1dac6..ec323f35 100644
--- a/packages/ui/src/lib/components/SiteHeader/SiteHeader.svelte
+++ b/packages/ui/src/lib/components/SiteHeader/SiteHeader.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { appShell } from '../../i18n/groups/appShell.js';
+  import { breadcrumb } from '../../i18n/groups/breadcrumb.js';
   import type { Snippet } from 'svelte';
   import { getContext } from 'svelte';
   import { PanelLeft } from '@lucide/svelte';
   import type { SidebarState } from '../AppShell/types.js';
-  const t = useT();
+  const t = useMessages(appShell, breadcrumb);
 
   interface Props {
     trailing?: Snippet;
diff --git a/packages/ui/src/lib/components/SkipLink/SkipLink.svelte b/packages/ui/src/lib/components/SkipLink/SkipLink.svelte
index e2bc5433..5d88e0d3 100644
--- a/packages/ui/src/lib/components/SkipLink/SkipLink.svelte
+++ b/packages/ui/src/lib/components/SkipLink/SkipLink.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { skipLink } from '../../i18n/groups/skipLink.js';
+  const t = useMessages(skipLink);
 
   interface Props {
     /** Fragment id of the main landmark to jump to. Must match the `id` of the `<main>`. */
diff --git a/packages/ui/src/lib/components/Slider/Slider.svelte b/packages/ui/src/lib/components/Slider/Slider.svelte
index 8ddf782c..87064a8b 100644
--- a/packages/ui/src/lib/components/Slider/Slider.svelte
+++ b/packages/ui/src/lib/components/Slider/Slider.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { slider } from '../../i18n/groups/slider.js';
+  const t = useMessages(slider);
 
   /**
    * Slider — single or range value input.
diff --git a/packages/ui/src/lib/components/Spinner/Spinner.svelte b/packages/ui/src/lib/components/Spinner/Spinner.svelte
index 8f5a003d..39c670e4 100644
--- a/packages/ui/src/lib/components/Spinner/Spinner.svelte
+++ b/packages/ui/src/lib/components/Spinner/Spinner.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { spinner } from '../../i18n/groups/spinner.js';
+  const t = useMessages(spinner);
   interface Props {
     size?: number | string;
     class?: string;
diff --git a/packages/ui/src/lib/components/Stepper/Stepper.svelte b/packages/ui/src/lib/components/Stepper/Stepper.svelte
index a12b0e2f..a47eee92 100644
--- a/packages/ui/src/lib/components/Stepper/Stepper.svelte
+++ b/packages/ui/src/lib/components/Stepper/Stepper.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { stepper } from '../../i18n/groups/stepper.js';
   import { Check } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(stepper);
 
   export interface StepItem {
     label: string;
diff --git a/packages/ui/src/lib/components/Table/Table.svelte b/packages/ui/src/lib/components/Table/Table.svelte
index 499b74ea..85160711 100644
--- a/packages/ui/src/lib/components/Table/Table.svelte
+++ b/packages/ui/src/lib/components/Table/Table.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { scrollFocusable } from '../../actions/scroll-focusable.js';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { table } from '../../i18n/groups/table.js';
   import type { Snippet } from 'svelte';
-  const t = useT();
+  const t = useMessages(table);
   interface Props {
     children?:   Snippet;
     class?:      string;
diff --git a/packages/ui/src/lib/components/ThemeToggle/ThemeToggle.svelte b/packages/ui/src/lib/components/ThemeToggle/ThemeToggle.svelte
index ceec1c76..69206270 100644
--- a/packages/ui/src/lib/components/ThemeToggle/ThemeToggle.svelte
+++ b/packages/ui/src/lib/components/ThemeToggle/ThemeToggle.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { themeToggle } from '../../i18n/groups/themeToggle.js';
   import { Moon, Sun } from '@lucide/svelte';
   import { colorScheme } from '../../stores/color-scheme.svelte.js';
-  const t = useT();
+  const t = useMessages(themeToggle);
 
   interface Props {
     /** Accessible name and tooltip. */
diff --git a/packages/ui/src/lib/components/Toast/ToastItem.svelte b/packages/ui/src/lib/components/Toast/ToastItem.svelte
index e6b7e9aa..56b43314 100644
--- a/packages/ui/src/lib/components/Toast/ToastItem.svelte
+++ b/packages/ui/src/lib/components/Toast/ToastItem.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { toast } from '../../i18n/groups/toast.js';
   import type { ToastItem as ToastItemType } from '../../stores/toast.svelte.js';
   import { X, CheckCircle, XCircle, AlertTriangle, Info } from '@lucide/svelte';
-  const t = useT();
+  const t = useMessages(toast);
 
   interface Props {
     item: ToastItemType;
diff --git a/packages/ui/src/lib/components/Toast/Toaster.svelte b/packages/ui/src/lib/components/Toast/Toaster.svelte
index 05e41bde..a6824272 100644
--- a/packages/ui/src/lib/components/Toast/Toaster.svelte
+++ b/packages/ui/src/lib/components/Toast/Toaster.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { toast as toastMessages } from '../../i18n/groups/toast.js';
   import { toast } from '../../stores/toast.svelte.js';
   import ToastItem from './ToastItem.svelte';
-  const t = useT();
+  const t = useMessages(toastMessages);
 </script>
 
 <div class="ca-toaster" role="region" aria-live="polite" aria-label={t().toast.region}>
diff --git a/packages/ui/src/lib/components/VirtualList/VirtualList.svelte b/packages/ui/src/lib/components/VirtualList/VirtualList.svelte
index 3dffe888..37e8fb11 100644
--- a/packages/ui/src/lib/components/VirtualList/VirtualList.svelte
+++ b/packages/ui/src/lib/components/VirtualList/VirtualList.svelte
@@ -1,9 +1,10 @@
 <script lang="ts" generics="T">
   import type { Snippet } from 'svelte';
   import { onDestroy, tick, untrack } from 'svelte';
-  import { useT } from '../../i18n/state.svelte.js';
+  import { useMessages } from '../../i18n/state.svelte.js';
+  import { virtualList } from '../../i18n/groups/virtualList.js';
   import { announce } from '../../utils/announce.js';
-  const t = useT();
+  const t = useMessages(virtualList);
 
   /**
    * VirtualList: a windowed list for long histories, with infinite "load older" at the TOP.
diff --git a/packages/ui/src/lib/forms/CepField.svelte b/packages/ui/src/lib/forms/CepField.svelte
index 615b89c8..032240fe 100644
--- a/packages/ui/src/lib/forms/CepField.svelte
+++ b/packages/ui/src/lib/forms/CepField.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { useT } from '../i18n/state.svelte.js';
+  import { useMessages } from '../i18n/state.svelte.js';
+  import { forms } from '../i18n/groups/forms.js';
   import type { Snippet } from 'svelte';
   import MaskedField from './MaskedField.svelte';
   import { maskCEP } from './masks.js';
   import type { CepAddress } from './types.js';
-  const t = useT();
+  const t = useMessages(forms);
 
   interface Props {
     label?:         string;
diff --git a/packages/ui/src/lib/forms/PhoneField.svelte b/packages/ui/src/lib/forms/PhoneField.svelte
index 9fd1d6f4..bebd3a99 100644
--- a/packages/ui/src/lib/forms/PhoneField.svelte
+++ b/packages/ui/src/lib/forms/PhoneField.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { useT } from '../i18n/state.svelte.js';
+  import { useMessages } from '../i18n/state.svelte.js';
+  import { forms } from '../i18n/groups/forms.js';
   import { untrack, type Snippet } from 'svelte';
   import MaskedField from './MaskedField.svelte';
   import { maskPhoneBR } from './masks.js';
-  const t = useT();
+  const t = useMessages(forms);
 
   interface Props {
     label?:        string;
diff --git a/packages/ui/src/lib/i18n/all.ts b/packages/ui/src/lib/i18n/all.ts
new file mode 100644
index 00000000..71279d8b
--- /dev/null
+++ b/packages/ui/src/lib/i18n/all.ts
@@ -0,0 +1,120 @@
+// ─── Full catalog — opt-in ───────────────────────────────────────────────────
+//
+// Every group at once. Components never import this (they import the groups they read); it backs
+// the public `getMessages` / `useT()` (see `use-t.svelte.ts`) and the `Messages` type. Because it names every group, a
+// bundle that imports it ships the whole catalog: tree-shaking drops it when unused.
+
+import { alert } from "./groups/alert.js";
+import { alertDialog } from "./groups/alertDialog.js";
+import { appForm } from "./groups/appForm.js";
+import { appList } from "./groups/appList.js";
+import { appSettings } from "./groups/appSettings.js";
+import { appShell } from "./groups/appShell.js";
+import { audioPlayer } from "./groups/audioPlayer.js";
+import { avatar } from "./groups/avatar.js";
+import { badge } from "./groups/badge.js";
+import { breadcrumb } from "./groups/breadcrumb.js";
+import { button } from "./groups/button.js";
+import { calendar } from "./groups/calendar.js";
+import { charts } from "./groups/charts.js";
+import { chat } from "./groups/chat.js";
+import { chip } from "./groups/chip.js";
+import { codeSnippet } from "./groups/codeSnippet.js";
+import { combobox } from "./groups/combobox.js";
+import { commandPalette } from "./groups/commandPalette.js";
+import { common } from "./groups/common.js";
+import { copyButton } from "./groups/copyButton.js";
+import { dataTable } from "./groups/dataTable.js";
+import { dialog } from "./groups/dialog.js";
+import { docs } from "./groups/docs.js";
+import { drawer } from "./groups/drawer.js";
+import { errorPage } from "./groups/errorPage.js";
+import { exportMenu } from "./groups/exportMenu.js";
+import { externalLink } from "./groups/externalLink.js";
+import { fileUpload } from "./groups/fileUpload.js";
+import { forms } from "./groups/forms.js";
+import { installPrompt } from "./groups/installPrompt.js";
+import { kit } from "./groups/kit.js";
+import { kpiCard } from "./groups/kpiCard.js";
+import { lightbox } from "./groups/lightbox.js";
+import { liveList } from "./groups/liveList.js";
+import { mediaGrid } from "./groups/mediaGrid.js";
+import { mobilePane } from "./groups/mobilePane.js";
+import { motionStage } from "./groups/motionStage.js";
+import { notificationBell } from "./groups/notificationBell.js";
+import { numberField } from "./groups/numberField.js";
+import { pagination } from "./groups/pagination.js";
+import { select } from "./groups/select.js";
+import { sheet } from "./groups/sheet.js";
+import { skipLink } from "./groups/skipLink.js";
+import { slider } from "./groups/slider.js";
+import { spinner } from "./groups/spinner.js";
+import { stepper } from "./groups/stepper.js";
+import { table } from "./groups/table.js";
+import { themeToggle } from "./groups/themeToggle.js";
+import { toast } from "./groups/toast.js";
+import { virtualList } from "./groups/virtualList.js";
+
+export const groups = {
+	common,
+	alert,
+	alertDialog,
+	appForm,
+	kpiCard,
+	appList,
+	appSettings,
+	appShell,
+	avatar,
+	button,
+	skipLink,
+	badge,
+	breadcrumb,
+	calendar,
+	chip,
+	codeSnippet,
+	combobox,
+	commandPalette,
+	copyButton,
+	externalLink,
+	exportMenu,
+	liveList,
+	dataTable,
+	dialog,
+	docs,
+	drawer,
+	errorPage,
+	fileUpload,
+	forms,
+	installPrompt,
+	lightbox,
+	mobilePane,
+	notificationBell,
+	numberField,
+	pagination,
+	table,
+	select,
+	sheet,
+	slider,
+	spinner,
+	stepper,
+	themeToggle,
+	toast,
+	chat,
+	audioPlayer,
+	motionStage,
+	mediaGrid,
+	virtualList,
+	charts,
+	kit,
+};
+
+// ─── Public full-catalog API ─────────────────────────────────────────────────
+
+import { getGroup, type Locale, type Messages, type MessagesOverride } from "./catalog.js";
+
+const all = Object.values(groups);
+
+/** Messages for a locale, with optional deep overrides. Pure, so safe on the server. */
+export function getMessages(id: Locale, override?: MessagesOverride): Messages {
+	return Object.fromEntries(all.map((g) => [g.id, getGroup(g, id, override)])) as Messages;
+}
diff --git a/packages/ui/src/lib/i18n/catalog.ts b/packages/ui/src/lib/i18n/catalog.ts
index da5a47f2..92182a3f 100644
--- a/packages/ui/src/lib/i18n/catalog.ts
+++ b/packages/ui/src/lib/i18n/catalog.ts
@@ -1,10 +1,14 @@
 // ─── i18n catalog — pure, rune-free, safe on the server ──────────────────────
 //
-// Locale registry + message resolution. No reactive state lives here: the registry is written at
-// startup (`registerLocale`) and only read per request.
+// The catalog is split per group (`groups/<name>.ts`, one `defineGroup` each). A component imports
+// only the groups it reads, so a bundle pays for its own strings and nothing else; the built-in
+// locales (`en`, `pt-BR`) travel inside each group. This module holds no group: it only resolves
+// one group for a locale. The full `Messages` view lives in `all.ts` (opt-in, not tree-shaken in).
+//
+// No reactive state here: the registry is written at startup (`registerLocale`) and only read per
+// request.
 
-import { en } from "./en.js";
-import { ptBR } from "./pt-BR.js";
+import type { groups } from "./all.js";
 
 type Widen<T> = T extends string
 	? string
@@ -12,8 +16,34 @@ type Widen<T> = T extends string
 		? (...args: A) => string
 		: { -readonly [K in keyof T]: Widen<T[K]> };
 
-/** Full message shape (string literals widened so other locales can translate). */
-export type Messages = Widen<typeof en>;
+/** A catalog group: the English source plus the built-in translations. */
+export interface Group<Id extends string = string, M = unknown> {
+	readonly id: Id;
+	readonly en: M;
+	/** Built-in locales by id (includes `en`). */
+	readonly builtin: Readonly<Record<string, M>>;
+}
+
+/** Message shape of a group (string literals widened so other locales can translate). */
+export type GroupMessages<G> = G extends Group<string, infer M> ? Widen<M> : never;
+
+/**
+ * Declares one catalog group. `en` is the source of truth; `pt-BR` must mirror it exactly (a
+ * missing key is a type error). Strings with runtime values are functions so each locale controls
+ * word order and plurals.
+ */
+export function defineGroup<const Id extends string, const M>(
+	id: Id,
+	def: { en: M; "pt-BR": NoInfer<Widen<M>> }
+): Group<Id, Widen<M>> {
+	const en = def.en as Widen<M>;
+	return { id, en, builtin: { en, "pt-BR": def["pt-BR"] } };
+}
+
+/** Full message shape: every group's messages, keyed by group id. */
+export type Messages = {
+	-readonly [K in keyof typeof groups]: GroupMessages<(typeof groups)[K]>;
+};
 
 export type DeepPartial<T> = T extends (...args: never[]) => unknown
 	? T
@@ -42,41 +72,73 @@ function merge<T>(base: T, over: unknown): T {
 	return out as T;
 }
 
-const catalogs = new Map<Locale, Messages>([
-	["en", en as Messages],
-	["pt-BR", ptBR],
-]);
+/** Locales that ship inside every group. */
+const BUILTIN: readonly Locale[] = ["en", "pt-BR"];
+
+/** Locales added with `registerLocale` (partial; merged over English per group on resolve). */
+const registry = new Map<Locale, Record<string, unknown>>();
+
+// Resolved group messages per registry version. `registerLocale` swaps both caches, so a read never
+// sees a stale merge, and an unchanged (group, locale) keeps one object identity (stable `$derived`).
+let plain = new Map<Group, Map<Locale, unknown>>();
+let overridden = new WeakMap<object, WeakMap<Group, Map<Locale, unknown>>>();
+/** Bumped by `registerLocale`; lets reactive readers re-evaluate a cached composite. */
+let version = 0;
 
 /**
  * Registers (or replaces) a locale. `messages` is deep-merged over English, so a partial
  * dictionary is enough: missing keys render in English. Call it at module load, before rendering.
  */
 export function registerLocale(id: Locale, messages: MessagesOverride): void {
-	catalogs.set(id, merge(en as Messages, messages));
+	registry.set(id, messages as Record<string, unknown>);
+	plain = new Map();
+	overridden = new WeakMap();
+	version++;
 }
 
-/** Registered locale ids. */
+/** Registered locale ids (built-ins first). */
 export function getLocales(): Locale[] {
-	return [...catalogs.keys()];
+	return [...new Set([...BUILTIN, ...registry.keys()])];
 }
 
-function resolve(id: Locale): Messages {
-	// `es-MX` → `es`; unknown → English.
-	return catalogs.get(id) ?? catalogs.get(id.split("-")[0]) ?? (en as Messages);
+/** Bumped on every `registerLocale`; part of the cache key of reactive composites. */
+export function catalogVersion(): number {
+	return version;
 }
 
-const merged = new WeakMap<Messages, WeakMap<object, Messages>>();
+function resolveBase<M>(g: Group<string, M>, id: Locale): M {
+	// `es-MX` → `es`; unknown → English.
+	for (const candidate of [id, id.split("-")[0]]) {
+		const reg = registry.get(candidate);
+		if (reg) return merge(g.en, reg[g.id]);
+		const own = g.builtin[candidate];
+		if (own) return own;
+	}
+	return g.en;
+}
 
 /**
- * Messages for a locale, with optional deep overrides. Pure: no global state read or written, so
- * it is safe on the server. Region subtags fall back to the base language, then to English.
+ * Messages of one group for a locale, with optional deep overrides. Pure: no global state read or
+ * written, so it is safe on the server. Region subtags fall back to the base language, then English.
  */
-export function getMessages(id: Locale, override?: MessagesOverride): Messages {
-	const base = resolve(id);
-	if (!override) return base;
-	const byOverride = merged.get(base) ?? new WeakMap<object, Messages>();
-	merged.set(base, byOverride);
-	const out = byOverride.get(override) ?? merge(base, override);
-	byOverride.set(override, out);
+export function getGroup<G extends Group>(
+	g: G,
+	id: Locale,
+	override?: MessagesOverride
+): GroupMessages<G> {
+	const byLocale = plain.get(g) ?? new Map<Locale, unknown>();
+	plain.set(g, byLocale);
+	const base = (byLocale.get(id) ?? resolveBase(g, id)) as GroupMessages<G>;
+	byLocale.set(id, base);
+
+	const part = override && (override as Record<string, unknown>)[g.id];
+	if (!override || part === undefined) return base;
+
+	const byGroup = overridden.get(override) ?? new WeakMap<Group, Map<Locale, unknown>>();
+	overridden.set(override, byGroup);
+	const perLocale = byGroup.get(g) ?? new Map<Locale, unknown>();
+	byGroup.set(g, perLocale);
+	const out = (perLocale.get(id) ?? merge(base, part)) as GroupMessages<G>;
+	perLocale.set(id, out);
 	return out;
 }
diff --git a/packages/ui/src/lib/i18n/en.ts b/packages/ui/src/lib/i18n/en.ts
deleted file mode 100644
index adce2f43..00000000
--- a/packages/ui/src/lib/i18n/en.ts
+++ /dev/null
@@ -1,337 +0,0 @@
-// ─── English catalog — source of truth for every built-in UI string ──────────
-//
-// Group by component. `pt-BR.ts` must mirror this shape exactly (typed `Messages`).
-// Strings with runtime values are functions so each locale controls word order and plurals.
-
-export const en = {
-	common: {
-		close: "Close",
-		back: "Back",
-		copy: "Copy",
-		copied: "Copied",
-		clear: "Clear",
-		search: "Search",
-		loading: "Loading…",
-		dismiss: "Dismiss",
-		new: "New",
-		noResults: "No results",
-		of: "of",
-	},
-	alert: {
-		dismiss: "Dismiss alert",
-	},
-	alertDialog: {
-		confirm: "Confirm",
-		cancel: "Cancel",
-	},
-	appForm: {
-		back: "Back",
-		actions: "Form actions",
-	},
-	kpiCard: {
-		trend: (label: string) => `Trend: ${label}`,
-	},
-	appList: {
-		searchPlaceholder: "Search…",
-		clear: "Clear",
-		selected: (count: number) => `${count} selected`,
-		listContent: "List content",
-		empty: "No results.",
-	},
-	appSettings: {
-		navigation: "Settings navigation",
-		content: "Settings content",
-	},
-	appShell: {
-		moduleNavigation: "Module navigation",
-		sectionNavigation: "Section navigation",
-		unread: (count: number) => `${count} unread`,
-		new: "New",
-		openNavigation: "Open navigation",
-		closeNavigation: "Close navigation",
-		resizePanel: "Resize navigation panel",
-		/** Name of the "…" button of a panel item; `label` is the item label. */
-		itemActions: (label: string) => `Actions for ${label}`,
-		/** Name of the drag handle of a panel item when the list can be reordered. */
-		moveItem: (label: string) => `Move ${label}`,
-	},
-	avatar: {
-		status: { online: "Online", offline: "Offline", away: "Away", busy: "Busy" },
-	},
-	button: {
-		/** Announced when a `loading` button stops loading. */
-		loaded: "Finished loading",
-	},
-	skipLink: {
-		label: "Skip to content",
-	},
-	badge: {
-		new: "New",
-		notifications: (count: number) => `${count} notifications`,
-	},
-	breadcrumb: {
-		label: "Breadcrumb",
-		home: "Home",
-	},
-	calendar: {
-		label: "Date",
-		rangeLabel: "Date range",
-		previousMonth: "Previous month",
-		nextMonth: "Next month",
-		openCalendar: "Open calendar",
-	},
-	chip: {
-		remove: (label: string) => `Remove ${label}`,
-	},
-	codeSnippet: {
-		copy: "Copy",
-		copied: "Copied",
-		copyCode: "Copy code",
-	},
-	combobox: {
-		placeholder: "Select…",
-		searchPlaceholder: "Search…",
-		empty: "No results",
-		selectedValues: "Selected values",
-		selectedCount: (n: number) => `${n} selected`,
-		create: (query: string) => `Create "${query}"`,
-	},
-	commandPalette: {
-		dialog: "Command palette",
-		commands: "Commands",
-		placeholder: "Search…",
-		empty: (query: string) => `No results for "${query}"`,
-		searching: "Searching…",
-		searchFailed: "Search failed",
-		resultCount: (n: number) => `${n} ${n === 1 ? "result" : "results"}`,
-	},
-	copyButton: {
-		label: "Copy",
-		copied: "Copied",
-		failed: "Could not copy",
-	},
-	externalLink: {
-		/** Appended (visually hidden) to every link that opens in a new tab. */
-		newTab: "opens in a new tab",
-	},
-	exportMenu: {
-		label: "Export",
-		csv: "CSV",
-		json: "JSON",
-		exported: (format: string, count: number) =>
-			`Exported ${count} ${count === 1 ? "row" : "rows"} as ${format}`,
-	},
-	liveList: {
-		progress: (done: number, total: number) => `${done} of ${total}`,
-		count: (done: number) => `${done} ${done === 1 ? "item" : "items"}`,
-		newItems: (count: number) => `${count} new`,
-		jumpToLatest: "Jump to latest",
-		received: (count: number) => `${count} new ${count === 1 ? "item" : "items"}`,
-		complete: (count: number) => `Complete: ${count} ${count === 1 ? "item" : "items"}`,
-		failed: "Stopped with an error",
-		empty: "Waiting for results…",
-	},
-	dataTable: {
-		export: "Export CSV",
-		exportShort: "CSV",
-		columns: "Columns",
-		searchPlaceholder: "Search…",
-		noResults: "No results",
-		noResultsSub: "Nothing matches the current search.",
-		clearSearch: "Clear search",
-		noOptions: "No options",
-		clearFilter: "Clear filter",
-		rows: "Rows",
-		rowsPerPage: "Rows per page",
-		previousPage: "Previous page",
-		nextPage: "Next page",
-	},
-	dialog: {
-		close: "Close",
-	},
-	docs: {
-		toc: "On this page",
-		nav: "Pages",
-		navigation: "Navigation",
-		sections: "Sections",
-		skipToContent: "Skip to content",
-		sectionNavigation: "Section navigation",
-		openNavigation: "Open navigation",
-		pager: "Pagination",
-		previous: "Previous",
-		next: "Next",
-		search: {
-			label: "Search the documentation",
-			short: "Search",
-			placeholder: "e.g. send image, webhook, QR code",
-			hint: "Search by endpoint, concept or provider.",
-			close: "Close",
-			results: "Results",
-			empty: (query: string) => `Nothing found for “${query}”.`,
-			failed: "Could not load the search index.",
-			loading: "Loading index…",
-		},
-		language: "Language",
-		toggleTheme: "Toggle theme",
-		copyCode: "Copy code",
-		copy: "Copy",
-		copied: "Copied",
-		callout: {
-			note: "Note",
-			tip: "Tip",
-			caution: "Caution",
-			danger: "Danger",
-		},
-	},
-	drawer: {
-		close: "Close",
-	},
-	errorPage: {
-		defaultMessage: "An unexpected error occurred.",
-		fallbackTitle: "Something went wrong",
-		404: {
-			title: "Page not found",
-			hint: "The page you're looking for doesn't exist or was moved.",
-		},
-		403: { title: "Access denied", hint: "You don't have permission to access this resource." },
-		500: {
-			title: "Internal server error",
-			hint: "Something went wrong on our end. We're looking into it.",
-		},
-		503: {
-			title: "Service unavailable",
-			hint: "The server is temporarily unavailable. Try again shortly.",
-		},
-		goBack: "Go back",
-		home: "Home",
-	},
-	fileUpload: {
-		label: "Drop files here or click to browse",
-		remove: (name: string) => `Remove ${name}`,
-		tooLarge: (name: string, maxMb: string) => `${name}: larger than ${maxMb} MB`,
-	},
-	forms: {
-		phoneIncomplete: "Incomplete phone number",
-		cepNotFound: "ZIP code not found",
-		cepLookupFailed: "Could not look up the ZIP code",
-	},
-	installPrompt: {
-		title: "Install this app",
-		description: "Add it to your home screen for quick access, full screen and offline use.",
-		install: "Install",
-		dismiss: "Dismiss install prompt",
-		iosShare: "Tap Share in the browser toolbar.",
-		iosAdd: 'Choose "Add to Home Screen".',
-	},
-	lightbox: {
-		close: "Close",
-		previous: "Previous",
-		next: "Next",
-		download: "Download",
-		counter: (n: number, total: number) => `${n} / ${total}`,
-	},
-	mobilePane: {
-		back: "Back",
-	},
-	notificationBell: {
-		label: (unread: number) => `Notifications (${unread} unread)`,
-		title: "Notifications",
-		markAll: "Mark all read",
-		clear: "Clear",
-		empty: "No notifications",
-	},
-	numberField: {
-		decrease: "Decrease",
-		increase: "Increase",
-	},
-	pagination: {
-		previous: "Previous page",
-		next: "Next page",
-	},
-	table: {
-		/** Name of the scrollable wrapper (keyboard users tab into it to scroll). */
-		scrollRegion: "Scrollable table",
-	},
-	select: {
-		placeholder: "Select…",
-		required: "required",
-	},
-	sheet: {
-		close: "Close",
-		panel: "Panel",
-	},
-	slider: {
-		value: (value: number | string) => `Value ${value}`,
-	},
-	spinner: {
-		label: "Loading…",
-	},
-	stepper: {
-		label: "Progress",
-		step: (n: number, label: string, done: boolean) =>
-			`Step ${n}: ${label}${done ? " (done)" : ""}`,
-	},
-	themeToggle: {
-		label: "Toggle color scheme",
-	},
-	toast: {
-		region: "Notifications",
-		dismiss: "Dismiss",
-	},
-	chat: {
-		/** `MessageBubble` delivery state, spoken after the time. */
-		status: {
-			pending: "Sending",
-			sent: "Sent",
-			delivered: "Delivered",
-			read: "Read",
-		},
-		/** Accessible name of a bubble: who said it, when. */
-		from: (name: string) => `Message from ${name}`,
-		outgoing: "Your message",
-		incoming: "Message",
-		replyTo: (name: string) => `Replying to ${name}`,
-		reactions: (n: number) => `${n} ${n === 1 ? "reaction" : "reactions"}`,
-		pinned: "Pinned",
-		muted: "Muted",
-		unread: (n: number) => `${n} unread ${n === 1 ? "message" : "messages"}`,
-		typing: "Typing…",
-	},
-	audioPlayer: {
-		label: "Audio message",
-		play: "Play",
-		pause: "Pause",
-		seek: "Seek",
-		position: (now: string, total: string) => `${now} of ${total}`,
-		rate: (r: string) => `Playback speed ${r}`,
-		loading: "Loading audio…",
-		error: "Could not play this audio",
-	},
-	motionStage: {
-		pause: "Pause",
-		replay: "Replay",
-	},
-	mediaGrid: {
-		label: "Media",
-		open: (title: string, n: number, total: number) => `Open ${title}, ${n} of ${total}`,
-		image: "Image",
-		video: "Video",
-		document: "Document",
-		moreCount: (n: number) => `+${n} more`,
-		failed: "Could not load",
-	},
-	virtualList: {
-		loadOlder: "Load older messages",
-		loadingOlder: "Loading older messages…",
-		noMore: "No older messages",
-		end: "End of list",
-		items: (n: number) => `${n} ${n === 1 ? "item" : "items"}`,
-	},
-	charts: {
-		high: "High",
-		low: "Low",
-	},
-	kit: {
-		defaultError: "An unexpected error occurred.",
-	},
-} as const;
diff --git a/packages/ui/src/lib/i18n/groups/alert.ts b/packages/ui/src/lib/i18n/groups/alert.ts
new file mode 100644
index 00000000..347ee9d4
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/alert.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const alert = defineGroup("alert", {
+	en: {
+		dismiss: "Dismiss alert",
+	},
+	"pt-BR": {
+		dismiss: "Dispensar alerta",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/alertDialog.ts b/packages/ui/src/lib/i18n/groups/alertDialog.ts
new file mode 100644
index 00000000..11800035
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/alertDialog.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const alertDialog = defineGroup("alertDialog", {
+	en: {
+		confirm: "Confirm",
+		cancel: "Cancel",
+	},
+	"pt-BR": {
+		confirm: "Confirmar",
+		cancel: "Cancelar",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/appForm.ts b/packages/ui/src/lib/i18n/groups/appForm.ts
new file mode 100644
index 00000000..9dc62282
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/appForm.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const appForm = defineGroup("appForm", {
+	en: {
+		back: "Back",
+		actions: "Form actions",
+	},
+	"pt-BR": {
+		back: "Voltar",
+		actions: "Ações do formulário",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/appList.ts b/packages/ui/src/lib/i18n/groups/appList.ts
new file mode 100644
index 00000000..3bda1a1f
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/appList.ts
@@ -0,0 +1,18 @@
+import { defineGroup } from "../catalog.js";
+
+export const appList = defineGroup("appList", {
+	en: {
+		searchPlaceholder: "Search…",
+		clear: "Clear",
+		selected: (count: number) => `${count} selected`,
+		listContent: "List content",
+		empty: "No results.",
+	},
+	"pt-BR": {
+		searchPlaceholder: "Buscar…",
+		clear: "Limpar",
+		selected: (count) => `${count} ${count === 1 ? "selecionado" : "selecionados"}`,
+		listContent: "Conteúdo da lista",
+		empty: "Nenhum resultado.",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/appSettings.ts b/packages/ui/src/lib/i18n/groups/appSettings.ts
new file mode 100644
index 00000000..a64d2d53
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/appSettings.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const appSettings = defineGroup("appSettings", {
+	en: {
+		navigation: "Settings navigation",
+		content: "Settings content",
+	},
+	"pt-BR": {
+		navigation: "Navegação das configurações",
+		content: "Conteúdo das configurações",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/appShell.ts b/packages/ui/src/lib/i18n/groups/appShell.ts
new file mode 100644
index 00000000..8ea9da98
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/appShell.ts
@@ -0,0 +1,28 @@
+import { defineGroup } from "../catalog.js";
+
+export const appShell = defineGroup("appShell", {
+	en: {
+		moduleNavigation: "Module navigation",
+		sectionNavigation: "Section navigation",
+		unread: (count: number) => `${count} unread`,
+		new: "New",
+		openNavigation: "Open navigation",
+		closeNavigation: "Close navigation",
+		resizePanel: "Resize navigation panel",
+		/** Name of the "…" button of a panel item; `label` is the item label. */
+		itemActions: (label: string) => `Actions for ${label}`,
+		/** Name of the drag handle of a panel item when the list can be reordered. */
+		moveItem: (label: string) => `Move ${label}`,
+	},
+	"pt-BR": {
+		moduleNavigation: "Navegação de módulos",
+		sectionNavigation: "Navegação da seção",
+		unread: (count) => `${count} ${count === 1 ? "não lida" : "não lidas"}`,
+		new: "Novo",
+		openNavigation: "Abrir navegação",
+		closeNavigation: "Fechar navegação",
+		resizePanel: "Redimensionar painel de navegação",
+		itemActions: (label) => `Ações de ${label}`,
+		moveItem: (label) => `Mover ${label}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/audioPlayer.ts b/packages/ui/src/lib/i18n/groups/audioPlayer.ts
new file mode 100644
index 00000000..53d8ca35
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/audioPlayer.ts
@@ -0,0 +1,24 @@
+import { defineGroup } from "../catalog.js";
+
+export const audioPlayer = defineGroup("audioPlayer", {
+	en: {
+		label: "Audio message",
+		play: "Play",
+		pause: "Pause",
+		seek: "Seek",
+		position: (now: string, total: string) => `${now} of ${total}`,
+		rate: (r: string) => `Playback speed ${r}`,
+		loading: "Loading audio…",
+		error: "Could not play this audio",
+	},
+	"pt-BR": {
+		label: "Mensagem de áudio",
+		play: "Reproduzir",
+		pause: "Pausar",
+		seek: "Posição",
+		position: (now: string, total: string) => `${now} de ${total}`,
+		rate: (r: string) => `Velocidade ${r}`,
+		loading: "Carregando áudio…",
+		error: "Não foi possível reproduzir este áudio",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/avatar.ts b/packages/ui/src/lib/i18n/groups/avatar.ts
new file mode 100644
index 00000000..ea044843
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/avatar.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const avatar = defineGroup("avatar", {
+	en: {
+		status: { online: "Online", offline: "Offline", away: "Away", busy: "Busy" },
+	},
+	"pt-BR": {
+		status: { online: "Online", offline: "Offline", away: "Ausente", busy: "Ocupado" },
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/badge.ts b/packages/ui/src/lib/i18n/groups/badge.ts
new file mode 100644
index 00000000..67ce71a3
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/badge.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const badge = defineGroup("badge", {
+	en: {
+		new: "New",
+		notifications: (count: number) => `${count} notifications`,
+	},
+	"pt-BR": {
+		new: "Novo",
+		notifications: (count) => `${count} ${count === 1 ? "notificação" : "notificações"}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/breadcrumb.ts b/packages/ui/src/lib/i18n/groups/breadcrumb.ts
new file mode 100644
index 00000000..38ac56c2
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/breadcrumb.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const breadcrumb = defineGroup("breadcrumb", {
+	en: {
+		label: "Breadcrumb",
+		home: "Home",
+	},
+	"pt-BR": {
+		label: "Trilha de navegação",
+		home: "Início",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/button.ts b/packages/ui/src/lib/i18n/groups/button.ts
new file mode 100644
index 00000000..ab867ea8
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/button.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const button = defineGroup("button", {
+	en: {
+		/** Announced when a `loading` button stops loading. */
+		loaded: "Finished loading",
+	},
+	"pt-BR": {
+		/** Announced when a `loading` button stops loading. */
+		loaded: "Carregamento concluído",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/calendar.ts b/packages/ui/src/lib/i18n/groups/calendar.ts
new file mode 100644
index 00000000..f7cdae68
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/calendar.ts
@@ -0,0 +1,18 @@
+import { defineGroup } from "../catalog.js";
+
+export const calendar = defineGroup("calendar", {
+	en: {
+		label: "Date",
+		rangeLabel: "Date range",
+		previousMonth: "Previous month",
+		nextMonth: "Next month",
+		openCalendar: "Open calendar",
+	},
+	"pt-BR": {
+		label: "Data",
+		rangeLabel: "Período",
+		previousMonth: "Mês anterior",
+		nextMonth: "Próximo mês",
+		openCalendar: "Abrir calendário",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/charts.ts b/packages/ui/src/lib/i18n/groups/charts.ts
new file mode 100644
index 00000000..24826324
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/charts.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const charts = defineGroup("charts", {
+	en: {
+		high: "High",
+		low: "Low",
+	},
+	"pt-BR": {
+		high: "Alto",
+		low: "Baixo",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/chat.ts b/packages/ui/src/lib/i18n/groups/chat.ts
new file mode 100644
index 00000000..85095ceb
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/chat.ts
@@ -0,0 +1,40 @@
+import { defineGroup } from "../catalog.js";
+
+export const chat = defineGroup("chat", {
+	en: {
+		/** `MessageBubble` delivery state, spoken after the time. */
+		status: {
+			pending: "Sending",
+			sent: "Sent",
+			delivered: "Delivered",
+			read: "Read",
+		},
+		/** Accessible name of a bubble: who said it, when. */
+		from: (name: string) => `Message from ${name}`,
+		outgoing: "Your message",
+		incoming: "Message",
+		replyTo: (name: string) => `Replying to ${name}`,
+		reactions: (n: number) => `${n} ${n === 1 ? "reaction" : "reactions"}`,
+		pinned: "Pinned",
+		muted: "Muted",
+		unread: (n: number) => `${n} unread ${n === 1 ? "message" : "messages"}`,
+		typing: "Typing…",
+	},
+	"pt-BR": {
+		status: {
+			pending: "Enviando",
+			sent: "Enviada",
+			delivered: "Entregue",
+			read: "Lida",
+		},
+		from: (name: string) => `Mensagem de ${name}`,
+		outgoing: "Sua mensagem",
+		incoming: "Mensagem",
+		replyTo: (name: string) => `Respondendo a ${name}`,
+		reactions: (n: number) => `${n} ${n === 1 ? "reação" : "reações"}`,
+		pinned: "Fixada",
+		muted: "Silenciada",
+		unread: (n: number) => `${n} ${n === 1 ? "mensagem não lida" : "mensagens não lidas"}`,
+		typing: "Digitando…",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/chip.ts b/packages/ui/src/lib/i18n/groups/chip.ts
new file mode 100644
index 00000000..64f13d2c
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/chip.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const chip = defineGroup("chip", {
+	en: {
+		remove: (label: string) => `Remove ${label}`,
+	},
+	"pt-BR": {
+		remove: (label) => `Remover ${label}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/codeSnippet.ts b/packages/ui/src/lib/i18n/groups/codeSnippet.ts
new file mode 100644
index 00000000..04a1acee
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/codeSnippet.ts
@@ -0,0 +1,14 @@
+import { defineGroup } from "../catalog.js";
+
+export const codeSnippet = defineGroup("codeSnippet", {
+	en: {
+		copy: "Copy",
+		copied: "Copied",
+		copyCode: "Copy code",
+	},
+	"pt-BR": {
+		copy: "Copiar",
+		copied: "Copiado",
+		copyCode: "Copiar código",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/combobox.ts b/packages/ui/src/lib/i18n/groups/combobox.ts
new file mode 100644
index 00000000..c74c4bb7
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/combobox.ts
@@ -0,0 +1,20 @@
+import { defineGroup } from "../catalog.js";
+
+export const combobox = defineGroup("combobox", {
+	en: {
+		placeholder: "Select…",
+		searchPlaceholder: "Search…",
+		empty: "No results",
+		selectedValues: "Selected values",
+		selectedCount: (n: number) => `${n} selected`,
+		create: (query: string) => `Create "${query}"`,
+	},
+	"pt-BR": {
+		placeholder: "Selecione…",
+		searchPlaceholder: "Buscar…",
+		empty: "Nenhum resultado",
+		selectedValues: "Valores selecionados",
+		selectedCount: (n) => `${n} selecionado${n === 1 ? "" : "s"}`,
+		create: (query) => `Criar "${query}"`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/commandPalette.ts b/packages/ui/src/lib/i18n/groups/commandPalette.ts
new file mode 100644
index 00000000..8be19f8b
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/commandPalette.ts
@@ -0,0 +1,22 @@
+import { defineGroup } from "../catalog.js";
+
+export const commandPalette = defineGroup("commandPalette", {
+	en: {
+		dialog: "Command palette",
+		commands: "Commands",
+		placeholder: "Search…",
+		empty: (query: string) => `No results for "${query}"`,
+		searching: "Searching…",
+		searchFailed: "Search failed",
+		resultCount: (n: number) => `${n} ${n === 1 ? "result" : "results"}`,
+	},
+	"pt-BR": {
+		dialog: "Paleta de comandos",
+		commands: "Comandos",
+		placeholder: "Buscar…",
+		empty: (query) => `Nenhum resultado para "${query}"`,
+		searching: "Buscando…",
+		searchFailed: "Falha na busca",
+		resultCount: (n) => `${n} ${n === 1 ? "resultado" : "resultados"}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/common.ts b/packages/ui/src/lib/i18n/groups/common.ts
new file mode 100644
index 00000000..ad33dcc7
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/common.ts
@@ -0,0 +1,30 @@
+import { defineGroup } from "../catalog.js";
+
+export const common = defineGroup("common", {
+	en: {
+		close: "Close",
+		back: "Back",
+		copy: "Copy",
+		copied: "Copied",
+		clear: "Clear",
+		search: "Search",
+		loading: "Loading…",
+		dismiss: "Dismiss",
+		new: "New",
+		noResults: "No results",
+		of: "of",
+	},
+	"pt-BR": {
+		close: "Fechar",
+		back: "Voltar",
+		copy: "Copiar",
+		copied: "Copiado",
+		clear: "Limpar",
+		search: "Buscar",
+		loading: "Carregando…",
+		dismiss: "Dispensar",
+		new: "Novo",
+		noResults: "Nenhum resultado",
+		of: "de",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/copyButton.ts b/packages/ui/src/lib/i18n/groups/copyButton.ts
new file mode 100644
index 00000000..308fc291
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/copyButton.ts
@@ -0,0 +1,14 @@
+import { defineGroup } from "../catalog.js";
+
+export const copyButton = defineGroup("copyButton", {
+	en: {
+		label: "Copy",
+		copied: "Copied",
+		failed: "Could not copy",
+	},
+	"pt-BR": {
+		label: "Copiar",
+		copied: "Copiado",
+		failed: "Não foi possível copiar",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/dataTable.ts b/packages/ui/src/lib/i18n/groups/dataTable.ts
new file mode 100644
index 00000000..7a741c24
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/dataTable.ts
@@ -0,0 +1,34 @@
+import { defineGroup } from "../catalog.js";
+
+export const dataTable = defineGroup("dataTable", {
+	en: {
+		export: "Export CSV",
+		exportShort: "CSV",
+		columns: "Columns",
+		searchPlaceholder: "Search…",
+		noResults: "No results",
+		noResultsSub: "Nothing matches the current search.",
+		clearSearch: "Clear search",
+		noOptions: "No options",
+		clearFilter: "Clear filter",
+		rows: "Rows",
+		rowsPerPage: "Rows per page",
+		previousPage: "Previous page",
+		nextPage: "Next page",
+	},
+	"pt-BR": {
+		export: "Exportar CSV",
+		exportShort: "CSV",
+		columns: "Colunas",
+		searchPlaceholder: "Buscar…",
+		noResults: "Nenhum resultado",
+		noResultsSub: "Nada corresponde à busca atual.",
+		clearSearch: "Limpar busca",
+		noOptions: "Sem opções",
+		clearFilter: "Limpar filtro",
+		rows: "Linhas",
+		rowsPerPage: "Linhas por página",
+		previousPage: "Página anterior",
+		nextPage: "Próxima página",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/dialog.ts b/packages/ui/src/lib/i18n/groups/dialog.ts
new file mode 100644
index 00000000..b721ca9e
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/dialog.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const dialog = defineGroup("dialog", {
+	en: {
+		close: "Close",
+	},
+	"pt-BR": {
+		close: "Fechar",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/docs.ts b/packages/ui/src/lib/i18n/groups/docs.ts
new file mode 100644
index 00000000..549ab8a4
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/docs.ts
@@ -0,0 +1,72 @@
+import { defineGroup } from "../catalog.js";
+
+export const docs = defineGroup("docs", {
+	en: {
+		toc: "On this page",
+		nav: "Pages",
+		navigation: "Navigation",
+		sections: "Sections",
+		skipToContent: "Skip to content",
+		sectionNavigation: "Section navigation",
+		openNavigation: "Open navigation",
+		pager: "Pagination",
+		previous: "Previous",
+		next: "Next",
+		search: {
+			label: "Search the documentation",
+			short: "Search",
+			placeholder: "e.g. send image, webhook, QR code",
+			hint: "Search by endpoint, concept or provider.",
+			close: "Close",
+			results: "Results",
+			empty: (query: string) => `Nothing found for “${query}”.`,
+			failed: "Could not load the search index.",
+			loading: "Loading index…",
+		},
+		language: "Language",
+		toggleTheme: "Toggle theme",
+		copyCode: "Copy code",
+		copy: "Copy",
+		copied: "Copied",
+		callout: {
+			note: "Note",
+			tip: "Tip",
+			caution: "Caution",
+			danger: "Danger",
+		},
+	},
+	"pt-BR": {
+		toc: "Nesta página",
+		nav: "Páginas",
+		navigation: "Navegação",
+		sections: "Seções",
+		skipToContent: "Ir para o conteúdo",
+		sectionNavigation: "Navegação da seção",
+		openNavigation: "Abrir navegação",
+		pager: "Paginação",
+		previous: "Anterior",
+		next: "Próxima",
+		search: {
+			label: "Buscar na documentação",
+			short: "Buscar",
+			placeholder: "Ex.: enviar imagem, webhook, QR code",
+			hint: "Busque por endpoint, conceito ou provider.",
+			close: "Fechar",
+			results: "Resultados",
+			empty: (query) => `Nada encontrado para “${query}”.`,
+			failed: "Não foi possível carregar o índice de busca.",
+			loading: "Carregando índice…",
+		},
+		language: "Linguagem",
+		toggleTheme: "Alternar tema",
+		copyCode: "Copiar código",
+		copy: "Copiar",
+		copied: "Copiado",
+		callout: {
+			note: "Nota",
+			tip: "Dica",
+			caution: "Atenção",
+			danger: "Perigo",
+		},
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/drawer.ts b/packages/ui/src/lib/i18n/groups/drawer.ts
new file mode 100644
index 00000000..4fb74834
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/drawer.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const drawer = defineGroup("drawer", {
+	en: {
+		close: "Close",
+	},
+	"pt-BR": {
+		close: "Fechar",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/errorPage.ts b/packages/ui/src/lib/i18n/groups/errorPage.ts
new file mode 100644
index 00000000..610f0389
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/errorPage.ts
@@ -0,0 +1,42 @@
+import { defineGroup } from "../catalog.js";
+
+export const errorPage = defineGroup("errorPage", {
+	en: {
+		defaultMessage: "An unexpected error occurred.",
+		fallbackTitle: "Something went wrong",
+		404: {
+			title: "Page not found",
+			hint: "The page you're looking for doesn't exist or was moved.",
+		},
+		403: { title: "Access denied", hint: "You don't have permission to access this resource." },
+		500: {
+			title: "Internal server error",
+			hint: "Something went wrong on our end. We're looking into it.",
+		},
+		503: {
+			title: "Service unavailable",
+			hint: "The server is temporarily unavailable. Try again shortly.",
+		},
+		goBack: "Go back",
+		home: "Home",
+	},
+	"pt-BR": {
+		defaultMessage: "Ocorreu um erro inesperado.",
+		fallbackTitle: "Algo deu errado",
+		404: {
+			title: "Página não encontrada",
+			hint: "A página que você procura não existe ou foi movida.",
+		},
+		403: { title: "Acesso negado", hint: "Você não tem permissão para acessar este recurso." },
+		500: {
+			title: "Erro interno do servidor",
+			hint: "Algo deu errado do nosso lado. Já estamos verificando.",
+		},
+		503: {
+			title: "Serviço indisponível",
+			hint: "O servidor está temporariamente indisponível. Tente novamente em instantes.",
+		},
+		goBack: "Voltar",
+		home: "Início",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/exportMenu.ts b/packages/ui/src/lib/i18n/groups/exportMenu.ts
new file mode 100644
index 00000000..813397c9
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/exportMenu.ts
@@ -0,0 +1,18 @@
+import { defineGroup } from "../catalog.js";
+
+export const exportMenu = defineGroup("exportMenu", {
+	en: {
+		label: "Export",
+		csv: "CSV",
+		json: "JSON",
+		exported: (format: string, count: number) =>
+			`Exported ${count} ${count === 1 ? "row" : "rows"} as ${format}`,
+	},
+	"pt-BR": {
+		label: "Exportar",
+		csv: "CSV",
+		json: "JSON",
+		exported: (format: string, count: number) =>
+			`${count} ${count === 1 ? "linha exportada" : "linhas exportadas"} em ${format}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/externalLink.ts b/packages/ui/src/lib/i18n/groups/externalLink.ts
new file mode 100644
index 00000000..cb83dd5b
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/externalLink.ts
@@ -0,0 +1,11 @@
+import { defineGroup } from "../catalog.js";
+
+export const externalLink = defineGroup("externalLink", {
+	en: {
+		/** Appended (visually hidden) to every link that opens in a new tab. */
+		newTab: "opens in a new tab",
+	},
+	"pt-BR": {
+		newTab: "abre em uma nova aba",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/fileUpload.ts b/packages/ui/src/lib/i18n/groups/fileUpload.ts
new file mode 100644
index 00000000..192c64f5
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/fileUpload.ts
@@ -0,0 +1,14 @@
+import { defineGroup } from "../catalog.js";
+
+export const fileUpload = defineGroup("fileUpload", {
+	en: {
+		label: "Drop files here or click to browse",
+		remove: (name: string) => `Remove ${name}`,
+		tooLarge: (name: string, maxMb: string) => `${name}: larger than ${maxMb} MB`,
+	},
+	"pt-BR": {
+		label: "Solte arquivos aqui ou clique para procurar",
+		remove: (name) => `Remover ${name}`,
+		tooLarge: (name, maxMb) => `${name}: maior que ${maxMb} MB`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/forms.ts b/packages/ui/src/lib/i18n/groups/forms.ts
new file mode 100644
index 00000000..76f1a895
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/forms.ts
@@ -0,0 +1,14 @@
+import { defineGroup } from "../catalog.js";
+
+export const forms = defineGroup("forms", {
+	en: {
+		phoneIncomplete: "Incomplete phone number",
+		cepNotFound: "ZIP code not found",
+		cepLookupFailed: "Could not look up the ZIP code",
+	},
+	"pt-BR": {
+		phoneIncomplete: "Telefone incompleto",
+		cepNotFound: "CEP não encontrado",
+		cepLookupFailed: "Não foi possível consultar o CEP",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/installPrompt.ts b/packages/ui/src/lib/i18n/groups/installPrompt.ts
new file mode 100644
index 00000000..590efee0
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/installPrompt.ts
@@ -0,0 +1,20 @@
+import { defineGroup } from "../catalog.js";
+
+export const installPrompt = defineGroup("installPrompt", {
+	en: {
+		title: "Install this app",
+		description: "Add it to your home screen for quick access, full screen and offline use.",
+		install: "Install",
+		dismiss: "Dismiss install prompt",
+		iosShare: "Tap Share in the browser toolbar.",
+		iosAdd: 'Choose "Add to Home Screen".',
+	},
+	"pt-BR": {
+		title: "Instalar este app",
+		description: "Adicione à tela inicial para acesso rápido, tela cheia e uso offline.",
+		install: "Instalar",
+		dismiss: "Dispensar convite de instalação",
+		iosShare: "Toque em Compartilhar na barra do navegador.",
+		iosAdd: 'Escolha "Adicionar à Tela de Início".',
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/kit.ts b/packages/ui/src/lib/i18n/groups/kit.ts
new file mode 100644
index 00000000..709dc676
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/kit.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const kit = defineGroup("kit", {
+	en: {
+		defaultError: "An unexpected error occurred.",
+	},
+	"pt-BR": {
+		defaultError: "Ocorreu um erro inesperado.",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/kpiCard.ts b/packages/ui/src/lib/i18n/groups/kpiCard.ts
new file mode 100644
index 00000000..626f2402
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/kpiCard.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const kpiCard = defineGroup("kpiCard", {
+	en: {
+		trend: (label: string) => `Trend: ${label}`,
+	},
+	"pt-BR": {
+		trend: (label) => `Tendência: ${label}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/lightbox.ts b/packages/ui/src/lib/i18n/groups/lightbox.ts
new file mode 100644
index 00000000..a48139f2
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/lightbox.ts
@@ -0,0 +1,18 @@
+import { defineGroup } from "../catalog.js";
+
+export const lightbox = defineGroup("lightbox", {
+	en: {
+		close: "Close",
+		previous: "Previous",
+		next: "Next",
+		download: "Download",
+		counter: (n: number, total: number) => `${n} / ${total}`,
+	},
+	"pt-BR": {
+		close: "Fechar",
+		previous: "Anterior",
+		next: "Próxima",
+		download: "Baixar",
+		counter: (n: number, total: number) => `${n} / ${total}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/liveList.ts b/packages/ui/src/lib/i18n/groups/liveList.ts
new file mode 100644
index 00000000..e582dde5
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/liveList.ts
@@ -0,0 +1,24 @@
+import { defineGroup } from "../catalog.js";
+
+export const liveList = defineGroup("liveList", {
+	en: {
+		progress: (done: number, total: number) => `${done} of ${total}`,
+		count: (done: number) => `${done} ${done === 1 ? "item" : "items"}`,
+		newItems: (count: number) => `${count} new`,
+		jumpToLatest: "Jump to latest",
+		received: (count: number) => `${count} new ${count === 1 ? "item" : "items"}`,
+		complete: (count: number) => `Complete: ${count} ${count === 1 ? "item" : "items"}`,
+		failed: "Stopped with an error",
+		empty: "Waiting for results…",
+	},
+	"pt-BR": {
+		progress: (done: number, total: number) => `${done} de ${total}`,
+		count: (done: number) => `${done} ${done === 1 ? "item" : "itens"}`,
+		newItems: (count: number) => `${count} novos`,
+		jumpToLatest: "Ir para o mais recente",
+		received: (count: number) => `${count} ${count === 1 ? "novo item" : "novos itens"}`,
+		complete: (count: number) => `Concluído: ${count} ${count === 1 ? "item" : "itens"}`,
+		failed: "Interrompido por um erro",
+		empty: "Aguardando resultados…",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/mediaGrid.ts b/packages/ui/src/lib/i18n/groups/mediaGrid.ts
new file mode 100644
index 00000000..01bdc186
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/mediaGrid.ts
@@ -0,0 +1,22 @@
+import { defineGroup } from "../catalog.js";
+
+export const mediaGrid = defineGroup("mediaGrid", {
+	en: {
+		label: "Media",
+		open: (title: string, n: number, total: number) => `Open ${title}, ${n} of ${total}`,
+		image: "Image",
+		video: "Video",
+		document: "Document",
+		moreCount: (n: number) => `+${n} more`,
+		failed: "Could not load",
+	},
+	"pt-BR": {
+		label: "Mídia",
+		open: (title: string, n: number, total: number) => `Abrir ${title}, ${n} de ${total}`,
+		image: "Imagem",
+		video: "Vídeo",
+		document: "Documento",
+		moreCount: (n: number) => `+${n}`,
+		failed: "Não foi possível carregar",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/mobilePane.ts b/packages/ui/src/lib/i18n/groups/mobilePane.ts
new file mode 100644
index 00000000..ccd7a30b
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/mobilePane.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const mobilePane = defineGroup("mobilePane", {
+	en: {
+		back: "Back",
+	},
+	"pt-BR": {
+		back: "Voltar",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/motionStage.ts b/packages/ui/src/lib/i18n/groups/motionStage.ts
new file mode 100644
index 00000000..6a54441a
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/motionStage.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const motionStage = defineGroup("motionStage", {
+	en: {
+		pause: "Pause",
+		replay: "Replay",
+	},
+	"pt-BR": {
+		pause: "Pausar",
+		replay: "Repetir",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/notificationBell.ts b/packages/ui/src/lib/i18n/groups/notificationBell.ts
new file mode 100644
index 00000000..bc12a7f2
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/notificationBell.ts
@@ -0,0 +1,18 @@
+import { defineGroup } from "../catalog.js";
+
+export const notificationBell = defineGroup("notificationBell", {
+	en: {
+		label: (unread: number) => `Notifications (${unread} unread)`,
+		title: "Notifications",
+		markAll: "Mark all read",
+		clear: "Clear",
+		empty: "No notifications",
+	},
+	"pt-BR": {
+		label: (unread) => `Notificações (${unread} ${unread === 1 ? "não lida" : "não lidas"})`,
+		title: "Notificações",
+		markAll: "Marcar todas como lidas",
+		clear: "Limpar",
+		empty: "Nenhuma notificação",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/numberField.ts b/packages/ui/src/lib/i18n/groups/numberField.ts
new file mode 100644
index 00000000..8ad5e170
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/numberField.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const numberField = defineGroup("numberField", {
+	en: {
+		decrease: "Decrease",
+		increase: "Increase",
+	},
+	"pt-BR": {
+		decrease: "Diminuir",
+		increase: "Aumentar",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/pagination.ts b/packages/ui/src/lib/i18n/groups/pagination.ts
new file mode 100644
index 00000000..96164afd
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/pagination.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const pagination = defineGroup("pagination", {
+	en: {
+		previous: "Previous page",
+		next: "Next page",
+	},
+	"pt-BR": {
+		previous: "Página anterior",
+		next: "Próxima página",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/select.ts b/packages/ui/src/lib/i18n/groups/select.ts
new file mode 100644
index 00000000..037df945
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/select.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const select = defineGroup("select", {
+	en: {
+		placeholder: "Select…",
+		required: "required",
+	},
+	"pt-BR": {
+		placeholder: "Selecione…",
+		required: "obrigatório",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/sheet.ts b/packages/ui/src/lib/i18n/groups/sheet.ts
new file mode 100644
index 00000000..d30ad4df
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/sheet.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const sheet = defineGroup("sheet", {
+	en: {
+		close: "Close",
+		panel: "Panel",
+	},
+	"pt-BR": {
+		close: "Fechar",
+		panel: "Painel",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/skipLink.ts b/packages/ui/src/lib/i18n/groups/skipLink.ts
new file mode 100644
index 00000000..10337042
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/skipLink.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const skipLink = defineGroup("skipLink", {
+	en: {
+		label: "Skip to content",
+	},
+	"pt-BR": {
+		label: "Ir para o conteúdo",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/slider.ts b/packages/ui/src/lib/i18n/groups/slider.ts
new file mode 100644
index 00000000..d527b86d
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/slider.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const slider = defineGroup("slider", {
+	en: {
+		value: (value: number | string) => `Value ${value}`,
+	},
+	"pt-BR": {
+		value: (value) => `Valor ${value}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/spinner.ts b/packages/ui/src/lib/i18n/groups/spinner.ts
new file mode 100644
index 00000000..d40ad517
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/spinner.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const spinner = defineGroup("spinner", {
+	en: {
+		label: "Loading…",
+	},
+	"pt-BR": {
+		label: "Carregando…",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/stepper.ts b/packages/ui/src/lib/i18n/groups/stepper.ts
new file mode 100644
index 00000000..ecf82804
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/stepper.ts
@@ -0,0 +1,13 @@
+import { defineGroup } from "../catalog.js";
+
+export const stepper = defineGroup("stepper", {
+	en: {
+		label: "Progress",
+		step: (n: number, label: string, done: boolean) =>
+			`Step ${n}: ${label}${done ? " (done)" : ""}`,
+	},
+	"pt-BR": {
+		label: "Progresso",
+		step: (n, label, done) => `Etapa ${n}: ${label}${done ? " (concluída)" : ""}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/table.ts b/packages/ui/src/lib/i18n/groups/table.ts
new file mode 100644
index 00000000..383343e1
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/table.ts
@@ -0,0 +1,11 @@
+import { defineGroup } from "../catalog.js";
+
+export const table = defineGroup("table", {
+	en: {
+		/** Name of the scrollable wrapper (keyboard users tab into it to scroll). */
+		scrollRegion: "Scrollable table",
+	},
+	"pt-BR": {
+		scrollRegion: "Tabela com rolagem",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/themeToggle.ts b/packages/ui/src/lib/i18n/groups/themeToggle.ts
new file mode 100644
index 00000000..118e8069
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/themeToggle.ts
@@ -0,0 +1,10 @@
+import { defineGroup } from "../catalog.js";
+
+export const themeToggle = defineGroup("themeToggle", {
+	en: {
+		label: "Toggle color scheme",
+	},
+	"pt-BR": {
+		label: "Alternar esquema de cores",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/toast.ts b/packages/ui/src/lib/i18n/groups/toast.ts
new file mode 100644
index 00000000..e1e3d807
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/toast.ts
@@ -0,0 +1,12 @@
+import { defineGroup } from "../catalog.js";
+
+export const toast = defineGroup("toast", {
+	en: {
+		region: "Notifications",
+		dismiss: "Dismiss",
+	},
+	"pt-BR": {
+		region: "Notificações",
+		dismiss: "Dispensar",
+	},
+});
diff --git a/packages/ui/src/lib/i18n/groups/virtualList.ts b/packages/ui/src/lib/i18n/groups/virtualList.ts
new file mode 100644
index 00000000..2ace0220
--- /dev/null
+++ b/packages/ui/src/lib/i18n/groups/virtualList.ts
@@ -0,0 +1,18 @@
+import { defineGroup } from "../catalog.js";
+
+export const virtualList = defineGroup("virtualList", {
+	en: {
+		loadOlder: "Load older messages",
+		loadingOlder: "Loading older messages…",
+		noMore: "No older messages",
+		end: "End of list",
+		items: (n: number) => `${n} ${n === 1 ? "item" : "items"}`,
+	},
+	"pt-BR": {
+		loadOlder: "Carregar mensagens anteriores",
+		loadingOlder: "Carregando mensagens anteriores…",
+		noMore: "Sem mensagens anteriores",
+		end: "Fim da lista",
+		items: (n: number) => `${n} ${n === 1 ? "item" : "itens"}`,
+	},
+});
diff --git a/packages/ui/src/lib/i18n/index.ts b/packages/ui/src/lib/i18n/index.ts
index dbc582d9..1f78e598 100644
--- a/packages/ui/src/lib/i18n/index.ts
+++ b/packages/ui/src/lib/i18n/index.ts
@@ -1,11 +1,5 @@
+export { getMessages } from "./all.js";
 export { default as I18nProvider } from "./I18nProvider.svelte";
 export type { DeepPartial, Locale, Messages, MessagesOverride } from "./state.svelte.js";
-export {
-	getLocales,
-	getMessages,
-	locale,
-	registerLocale,
-	setLocale,
-	useLocale,
-	useT,
-} from "./state.svelte.js";
+export { getLocales, locale, registerLocale, setLocale, useLocale } from "./state.svelte.js";
+export { useT } from "./use-t.svelte.js";
diff --git a/packages/ui/src/lib/i18n/pt-BR.ts b/packages/ui/src/lib/i18n/pt-BR.ts
deleted file mode 100644
index de288b3b..00000000
--- a/packages/ui/src/lib/i18n/pt-BR.ts
+++ /dev/null
@@ -1,328 +0,0 @@
-import type { Messages } from "./catalog.js";
-
-/** Português (Brasil). Mesma forma de `en.ts`; chave faltando é erro de tipo. */
-export const ptBR: Messages = {
-	common: {
-		close: "Fechar",
-		back: "Voltar",
-		copy: "Copiar",
-		copied: "Copiado",
-		clear: "Limpar",
-		search: "Buscar",
-		loading: "Carregando…",
-		dismiss: "Dispensar",
-		new: "Novo",
-		noResults: "Nenhum resultado",
-		of: "de",
-	},
-	alert: {
-		dismiss: "Dispensar alerta",
-	},
-	alertDialog: {
-		confirm: "Confirmar",
-		cancel: "Cancelar",
-	},
-	appForm: {
-		back: "Voltar",
-		actions: "Ações do formulário",
-	},
-	kpiCard: {
-		trend: (label) => `Tendência: ${label}`,
-	},
-	appList: {
-		searchPlaceholder: "Buscar…",
-		clear: "Limpar",
-		selected: (count) => `${count} ${count === 1 ? "selecionado" : "selecionados"}`,
-		listContent: "Conteúdo da lista",
-		empty: "Nenhum resultado.",
-	},
-	appSettings: {
-		navigation: "Navegação das configurações",
-		content: "Conteúdo das configurações",
-	},
-	appShell: {
-		moduleNavigation: "Navegação de módulos",
-		sectionNavigation: "Navegação da seção",
-		unread: (count) => `${count} ${count === 1 ? "não lida" : "não lidas"}`,
-		new: "Novo",
-		openNavigation: "Abrir navegação",
-		closeNavigation: "Fechar navegação",
-		resizePanel: "Redimensionar painel de navegação",
-		itemActions: (label) => `Ações de ${label}`,
-		moveItem: (label) => `Mover ${label}`,
-	},
-	avatar: {
-		status: { online: "Online", offline: "Offline", away: "Ausente", busy: "Ocupado" },
-	},
-	button: {
-		/** Announced when a `loading` button stops loading. */
-		loaded: "Carregamento concluído",
-	},
-	skipLink: {
-		label: "Ir para o conteúdo",
-	},
-	badge: {
-		new: "Novo",
-		notifications: (count) => `${count} ${count === 1 ? "notificação" : "notificações"}`,
-	},
-	breadcrumb: {
-		label: "Trilha de navegação",
-		home: "Início",
-	},
-	calendar: {
-		label: "Data",
-		rangeLabel: "Período",
-		previousMonth: "Mês anterior",
-		nextMonth: "Próximo mês",
-		openCalendar: "Abrir calendário",
-	},
-	chip: {
-		remove: (label) => `Remover ${label}`,
-	},
-	codeSnippet: {
-		copy: "Copiar",
-		copied: "Copiado",
-		copyCode: "Copiar código",
-	},
-	combobox: {
-		placeholder: "Selecione…",
-		searchPlaceholder: "Buscar…",
-		empty: "Nenhum resultado",
-		selectedValues: "Valores selecionados",
-		selectedCount: (n) => `${n} selecionado${n === 1 ? "" : "s"}`,
-		create: (query) => `Criar "${query}"`,
-	},
-	commandPalette: {
-		dialog: "Paleta de comandos",
-		commands: "Comandos",
-		placeholder: "Buscar…",
-		empty: (query) => `Nenhum resultado para "${query}"`,
-		searching: "Buscando…",
-		searchFailed: "Falha na busca",
-		resultCount: (n) => `${n} ${n === 1 ? "resultado" : "resultados"}`,
-	},
-	copyButton: {
-		label: "Copiar",
-		copied: "Copiado",
-		failed: "Não foi possível copiar",
-	},
-	externalLink: {
-		newTab: "abre em uma nova aba",
-	},
-	exportMenu: {
-		label: "Exportar",
-		csv: "CSV",
-		json: "JSON",
-		exported: (format: string, count: number) =>
-			`${count} ${count === 1 ? "linha exportada" : "linhas exportadas"} em ${format}`,
-	},
-	liveList: {
-		progress: (done: number, total: number) => `${done} de ${total}`,
-		count: (done: number) => `${done} ${done === 1 ? "item" : "itens"}`,
-		newItems: (count: number) => `${count} novos`,
-		jumpToLatest: "Ir para o mais recente",
-		received: (count: number) => `${count} ${count === 1 ? "novo item" : "novos itens"}`,
-		complete: (count: number) => `Concluído: ${count} ${count === 1 ? "item" : "itens"}`,
-		failed: "Interrompido por um erro",
-		empty: "Aguardando resultados…",
-	},
-	dataTable: {
-		export: "Exportar CSV",
-		exportShort: "CSV",
-		columns: "Colunas",
-		searchPlaceholder: "Buscar…",
-		noResults: "Nenhum resultado",
-		noResultsSub: "Nada corresponde à busca atual.",
-		clearSearch: "Limpar busca",
-		noOptions: "Sem opções",
-		clearFilter: "Limpar filtro",
-		rows: "Linhas",
-		rowsPerPage: "Linhas por página",
-		previousPage: "Página anterior",
-		nextPage: "Próxima página",
-	},
-	dialog: {
-		close: "Fechar",
-	},
-	docs: {
-		toc: "Nesta página",
-		nav: "Páginas",
-		navigation: "Navegação",
-		sections: "Seções",
-		skipToContent: "Ir para o conteúdo",
-		sectionNavigation: "Navegação da seção",
-		openNavigation: "Abrir navegação",
-		pager: "Paginação",
-		previous: "Anterior",
-		next: "Próxima",
-		search: {
-			label: "Buscar na documentação",
-			short: "Buscar",
-			placeholder: "Ex.: enviar imagem, webhook, QR code",
-			hint: "Busque por endpoint, conceito ou provider.",
-			close: "Fechar",
-			results: "Resultados",
-			empty: (query) => `Nada encontrado para “${query}”.`,
-			failed: "Não foi possível carregar o índice de busca.",
-			loading: "Carregando índice…",
-		},
-		language: "Linguagem",
-		toggleTheme: "Alternar tema",
-		copyCode: "Copiar código",
-		copy: "Copiar",
-		copied: "Copiado",
-		callout: {
-			note: "Nota",
-			tip: "Dica",
-			caution: "Atenção",
-			danger: "Perigo",
-		},
-	},
-	drawer: {
-		close: "Fechar",
-	},
-	errorPage: {
-		defaultMessage: "Ocorreu um erro inesperado.",
-		fallbackTitle: "Algo deu errado",
-		404: {
-			title: "Página não encontrada",
-			hint: "A página que você procura não existe ou foi movida.",
-		},
-		403: { title: "Acesso negado", hint: "Você não tem permissão para acessar este recurso." },
-		500: {
-			title: "Erro interno do servidor",
-			hint: "Algo deu errado do nosso lado. Já estamos verificando.",
-		},
-		503: {
-			title: "Serviço indisponível",
-			hint: "O servidor está temporariamente indisponível. Tente novamente em instantes.",
-		},
-		goBack: "Voltar",
-		home: "Início",
-	},
-	fileUpload: {
-		label: "Solte arquivos aqui ou clique para procurar",
-		remove: (name) => `Remover ${name}`,
-		tooLarge: (name, maxMb) => `${name}: maior que ${maxMb} MB`,
-	},
-	forms: {
-		phoneIncomplete: "Telefone incompleto",
-		cepNotFound: "CEP não encontrado",
-		cepLookupFailed: "Não foi possível consultar o CEP",
-	},
-	installPrompt: {
-		title: "Instalar este app",
-		description: "Adicione à tela inicial para acesso rápido, tela cheia e uso offline.",
-		install: "Instalar",
-		dismiss: "Dispensar convite de instalação",
-		iosShare: "Toque em Compartilhar na barra do navegador.",
-		iosAdd: 'Escolha "Adicionar à Tela de Início".',
-	},
-	lightbox: {
-		close: "Fechar",
-		previous: "Anterior",
-		next: "Próxima",
-		download: "Baixar",
-		counter: (n: number, total: number) => `${n} / ${total}`,
-	},
-	mobilePane: {
-		back: "Voltar",
-	},
-	notificationBell: {
-		label: (unread) => `Notificações (${unread} ${unread === 1 ? "não lida" : "não lidas"})`,
-		title: "Notificações",
-		markAll: "Marcar todas como lidas",
-		clear: "Limpar",
-		empty: "Nenhuma notificação",
-	},
-	numberField: {
-		decrease: "Diminuir",
-		increase: "Aumentar",
-	},
-	pagination: {
-		previous: "Página anterior",
-		next: "Próxima página",
-	},
-	table: {
-		scrollRegion: "Tabela com rolagem",
-	},
-	select: {
-		placeholder: "Selecione…",
-		required: "obrigatório",
-	},
-	sheet: {
-		close: "Fechar",
-		panel: "Painel",
-	},
-	slider: {
-		value: (value) => `Valor ${value}`,
-	},
-	spinner: {
-		label: "Carregando…",
-	},
-	stepper: {
-		label: "Progresso",
-		step: (n, label, done) => `Etapa ${n}: ${label}${done ? " (concluída)" : ""}`,
-	},
-	themeToggle: {
-		label: "Alternar esquema de cores",
-	},
-	toast: {
-		region: "Notificações",
-		dismiss: "Dispensar",
-	},
-	chat: {
-		status: {
-			pending: "Enviando",
-			sent: "Enviada",
-			delivered: "Entregue",
-			read: "Lida",
-		},
-		from: (name: string) => `Mensagem de ${name}`,
-		outgoing: "Sua mensagem",
-		incoming: "Mensagem",
-		replyTo: (name: string) => `Respondendo a ${name}`,
-		reactions: (n: number) => `${n} ${n === 1 ? "reação" : "reações"}`,
-		pinned: "Fixada",
-		muted: "Silenciada",
-		unread: (n: number) => `${n} ${n === 1 ? "mensagem não lida" : "mensagens não lidas"}`,
-		typing: "Digitando…",
-	},
-	audioPlayer: {
-		label: "Mensagem de áudio",
-		play: "Reproduzir",
-		pause: "Pausar",
-		seek: "Posição",
-		position: (now: string, total: string) => `${now} de ${total}`,
-		rate: (r: string) => `Velocidade ${r}`,
-		loading: "Carregando áudio…",
-		error: "Não foi possível reproduzir este áudio",
-	},
-	motionStage: {
-		pause: "Pausar",
-		replay: "Repetir",
-	},
-	mediaGrid: {
-		label: "Mídia",
-		open: (title: string, n: number, total: number) => `Abrir ${title}, ${n} de ${total}`,
-		image: "Imagem",
-		video: "Vídeo",
-		document: "Documento",
-		moreCount: (n: number) => `+${n}`,
-		failed: "Não foi possível carregar",
-	},
-	virtualList: {
-		loadOlder: "Carregar mensagens anteriores",
-		loadingOlder: "Carregando mensagens anteriores…",
-		noMore: "Sem mensagens anteriores",
-		end: "Fim da lista",
-		items: (n: number) => `${n} ${n === 1 ? "item" : "itens"}`,
-	},
-	charts: {
-		high: "Alto",
-		low: "Baixo",
-	},
-	kit: {
-		defaultError: "Ocorreu um erro inesperado.",
-	},
-};
diff --git a/packages/ui/src/lib/i18n/state.svelte.ts b/packages/ui/src/lib/i18n/state.svelte.ts
index df65f9cb..8c5c3283 100644
--- a/packages/ui/src/lib/i18n/state.svelte.ts
+++ b/packages/ui/src/lib/i18n/state.svelte.ts
@@ -13,10 +13,17 @@
 // English. Explicit component props always win over the catalog.
 
 import { getContext, hasContext, setContext } from "svelte";
-import { getMessages, type Locale, type Messages, type MessagesOverride } from "./catalog.js";
+import {
+	catalogVersion,
+	type Group,
+	type GroupMessages,
+	getGroup,
+	type Locale,
+	type MessagesOverride,
+} from "./catalog.js";
 
-export type { DeepPartial, Locale, Messages, MessagesOverride } from "./catalog.js";
-export { getLocales, getMessages, registerLocale } from "./catalog.js";
+export type { DeepPartial, Group, Locale, Messages, MessagesOverride } from "./catalog.js";
+export { defineGroup, getGroup, getLocales, registerLocale } from "./catalog.js";
 
 // ─── Client-global locale (SPA / islands) ────────────────────────────────────
 
@@ -58,7 +65,7 @@ const KEY = Symbol("ca-ui.i18n");
 
 interface I18nScope {
 	readonly locale: Locale;
-	readonly messages: Messages;
+	readonly messages: MessagesOverride | undefined;
 }
 
 /** Used by `I18nProvider`; `get` is a getter so prop changes stay reactive. */
@@ -68,8 +75,7 @@ export function provideI18n(get: () => { locale: Locale; messages?: MessagesOver
 			return get().locale;
 		},
 		get messages() {
-			const { locale: id, messages } = get();
-			return getMessages(id, messages);
+			return get().messages;
 		},
 	});
 }
@@ -80,11 +86,35 @@ export function useLocale(): () => Locale {
 	return () => (scope ? scope.locale : current);
 }
 
+/** Messages of the given groups, keyed by group id: `useMessages(button, spinner)` → `{ button, spinner }`. */
+export type MessagesOf<G extends readonly Group[]> = {
+	[K in G[number] as K["id"]]: GroupMessages<K>;
+};
+
 /**
- * Message accessor for the component being initialised. Call it at the top level of `<script>`
- * (it reads Svelte context), then use `t().group.key` anywhere, including `$derived` and markup.
+ * Message accessor for the component being initialised, limited to the groups it reads (so the
+ * bundle ships only those). Call it at the top level of `<script>` (it reads Svelte context), then
+ * use `t().group.key` anywhere, including `$derived` and markup.
+ *
+ *   const t = useMessages(button, spinner);
+ *   t().button.loaded
  */
-export function useT(): () => Messages {
+export function useMessages<const G extends readonly Group[]>(...groups: G): () => MessagesOf<G> {
 	const scope = hasContext(KEY) ? getContext<I18nScope>(KEY) : undefined;
-	return scope ? () => scope.messages : () => getMessages(current, overrides);
+	// One composite per (locale, overrides, registry version): `t()` is read many times per render
+	// and `$derived`s compare it by identity.
+	let key: [Locale, MessagesOverride | undefined, number] | undefined;
+	let cached: MessagesOf<G>;
+	return () => {
+		const id = scope ? scope.locale : current;
+		const over = scope ? scope.messages : overrides;
+		const v = catalogVersion();
+		if (!key || key[0] !== id || key[1] !== over || key[2] !== v) {
+			key = [id, over, v];
+			cached = Object.fromEntries(
+				groups.map((g) => [g.id, getGroup(g, id, over)])
+			) as MessagesOf<G>;
+		}
+		return cached;
+	};
 }
diff --git a/packages/ui/src/lib/i18n/use-t.svelte.ts b/packages/ui/src/lib/i18n/use-t.svelte.ts
new file mode 100644
index 00000000..4325fb47
--- /dev/null
+++ b/packages/ui/src/lib/i18n/use-t.svelte.ts
@@ -0,0 +1,11 @@
+import { groups } from "./all.js";
+import type { Messages } from "./catalog.js";
+import { useMessages } from "./state.svelte.js";
+
+/**
+ * Full-catalog accessor for the component being initialised (provider first, client-global
+ * otherwise). Prefer `useMessages(group, …)` inside this package: it ships only what it reads.
+ */
+export function useT(): () => Messages {
+	return useMessages(...Object.values(groups)) as unknown as () => Messages;
+}
diff --git a/packages/ui/src/lib/kit/create-error-handler.ts b/packages/ui/src/lib/kit/create-error-handler.ts
index 4aadca0f..f8f19465 100644
--- a/packages/ui/src/lib/kit/create-error-handler.ts
+++ b/packages/ui/src/lib/kit/create-error-handler.ts
@@ -15,7 +15,8 @@
 //     report: (error, event) => console.error(error, event.url.pathname),
 //   });
 
-import { getMessages, type Locale } from "../i18n/state.svelte.js";
+import { getGroup, type Locale } from "../i18n/catalog.js";
+import { kit } from "../i18n/groups/kit.js";
 
 export interface CaError {
 	message: string;
@@ -66,7 +67,7 @@ export function createErrorHandler(options: CreateErrorHandlerOptions = {}) {
 	}): CaError {
 		const fallback =
 			defaultMessage ??
-			getMessages((typeof locale === "function" ? locale(event) : locale) ?? "en").kit.defaultError;
+			getGroup(kit, (typeof locale === "function" ? locale(event) : locale) ?? "en").defaultError;
 
 		const message =
 			error instanceof Error ? error.message : typeof error === "string" ? error : fallback;
diff --git a/packages/ui/src/lib/kit/error-html.ts b/packages/ui/src/lib/kit/error-html.ts
index 43496dfb..2256edd8 100644
--- a/packages/ui/src/lib/kit/error-html.ts
+++ b/packages/ui/src/lib/kit/error-html.ts
@@ -1,7 +1,8 @@
 // Static `src/error.html` for SvelteKit, generated from the app's theme and locale.
 // Plain TypeScript (no runes, no `.svelte`): `caErrorPlugin` runs it in Node from vite.config.
 
-import { getMessages, type Locale } from "../i18n/catalog.js";
+import { getGroup, type Locale } from "../i18n/catalog.js";
+import { errorPage } from "../i18n/groups/errorPage.js";
 import { defaultPresetTokens, defineTheme } from "../theme/define.js";
 import { type ThemeOptions, themeHead } from "../theme-script.js";
 import { cssBlock } from "../utils/palette-generator.js";
@@ -113,7 +114,7 @@ export function errorHtml(options: ErrorHtmlOptions = {}): string {
 	const { theme = {}, locale = "en" } = options;
 	const t = defineTheme(theme);
 	const tokens = defaultPresetTokens(t);
-	const m = getMessages(locale).errorPage;
+	const m = getGroup(errorPage, locale);
 	const vars = `${cssBlock(":root", pick(tokens.light))}\n${cssBlock("html.dark", pick(tokens.dark))}`;
 	// themeHead carries brand-preset CSS + the init script; the page's own <style> follows it.
 	const head = themeHead(theme);
diff --git a/packages/ui/src/lib/kit/navigation-progress.svelte b/packages/ui/src/lib/kit/navigation-progress.svelte
index 261d0db7..3e652b9a 100644
--- a/packages/ui/src/lib/kit/navigation-progress.svelte
+++ b/packages/ui/src/lib/kit/navigation-progress.svelte
@@ -3,8 +3,9 @@
   // `$app/state`, so it lives in `/kit` (the rest of the package is router-agnostic).
   // It appears only after `delay` ms: a navigation that finishes first never flashes a bar.
   import { navigating } from '$app/state';
-  import { useT } from '../i18n/state.svelte.js';
-  const t = useT();
+  import { useMessages } from '../i18n/state.svelte.js';
+  import { spinner } from '../i18n/groups/spinner.js';
+  const t = useMessages(spinner);
 
   interface Props {
     /** Wait this long (ms) before showing the bar; faster navigations show nothing. */
diff --git a/packages/ui/src/lib/kit/use-breadcrumbs.svelte.ts b/packages/ui/src/lib/kit/use-breadcrumbs.svelte.ts
index 6b7123a9..739cc4e3 100644
--- a/packages/ui/src/lib/kit/use-breadcrumbs.svelte.ts
+++ b/packages/ui/src/lib/kit/use-breadcrumbs.svelte.ts
@@ -4,7 +4,8 @@ import { toStore } from "svelte/store";
 // $app/state works on Kit >=2.12 and Kit 3 ($app/stores was removed in Kit 3).
 import { page } from "$app/state";
 import type { BreadcrumbItem } from "../components/Breadcrumb/Breadcrumb.svelte";
-import { useT } from "../i18n/state.svelte.js";
+import { breadcrumb } from "../i18n/groups/breadcrumb.js";
+import { useMessages } from "../i18n/state.svelte.js";
 
 /**
  * Returns a reactive `BreadcrumbItem[]` derived from the current SvelteKit
@@ -21,7 +22,7 @@ import { useT } from "../i18n/state.svelte.js";
  * ```
  */
 export function useBreadcrumbs() {
-	const t = useT();
+	const t = useMessages(breadcrumb);
 	return toStore(() => {
 		const segments = page.url.pathname.split("/").filter(Boolean);
 		const items: BreadcrumbItem[] = [
diff --git a/packages/ui/src/lib/utils/use-list-state.svelte.ts b/packages/ui/src/lib/utils/use-list-state.svelte.ts
index 460f0d7e..d3898c55 100644
--- a/packages/ui/src/lib/utils/use-list-state.svelte.ts
+++ b/packages/ui/src/lib/utils/use-list-state.svelte.ts
@@ -1,4 +1,5 @@
-import { useT } from "../i18n/state.svelte.js";
+import { common } from "../i18n/groups/common.js";
+import { useMessages } from "../i18n/state.svelte.js";
 /**
  * useListState — eliminates boilerplate state management in list/CRUD pages.
  *
@@ -79,7 +80,7 @@ export function useListState<T extends object>(
 ): UseListStateReturn<T> {
 	const { data, perPage = 20, searchKeys = [], idKey = "id" as keyof T, ofLabel } = options;
 
-	const t = useT();
+	const t = useMessages(common);
 
 	// ── Mutable state ───────────────────────────────────────────────────
 	let _search = $state("");
diff --git a/packages/ui/tests/i18n-register.test.ts b/packages/ui/tests/i18n-register.test.ts
index 9aef639a..929fe822 100644
--- a/packages/ui/tests/i18n-register.test.ts
+++ b/packages/ui/tests/i18n-register.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "bun:test";
-import { getLocales, getMessages, registerLocale } from "../src/lib/i18n/catalog.js";
+import { getMessages } from "../src/lib/i18n/all.js";
+import { getLocales, registerLocale } from "../src/lib/i18n/catalog.js";
 
 describe("registerLocale", () => {
 	it("registers 'es' with partial messages and falls back to en for the rest", () => {
diff --git a/packages/ui/tests/i18n-split.test.ts b/packages/ui/tests/i18n-split.test.ts
new file mode 100644
index 00000000..a02a6c43
--- /dev/null
+++ b/packages/ui/tests/i18n-split.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from "bun:test";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { dist, measure } from "../scripts/size-lib.js";
+
+// #325: the whole en + pt-BR catalog used to ship with every root import. A component must pay only
+// for its own strings. Bundles the built package (`bun run build:pkg` first), like size-limit.
+
+const built = existsSync(join(dist, "index.js"));
+// esbuild escapes non-ASCII (`…`, `ã`) in minified output; compare decoded text.
+const decode = (code: string) =>
+	code.replace(/\\u([0-9a-fA-F]{4})/g, (_, h) => String.fromCharCode(Number.parseInt(h, 16)));
+const bundle = async (component: string) =>
+	decode(
+		(await measure({ name: component, js: `export { ${component} } from "./index.js";` })).code
+	);
+
+/** Strings of groups that Button does not use, in both built-in locales. */
+const FOREIGN = [
+	// commandPalette
+	"Command palette",
+	"Paleta de comandos",
+	"Search failed",
+	// combobox
+	"Selected values",
+	"Valores selecionados",
+	// appShell
+	"Module navigation",
+	"Navegação de módulos",
+	"Resize navigation panel",
+	// motionStage
+	"Replay",
+	// fileUpload / dataTable / docs
+	"On this page",
+	"Could not copy",
+];
+
+describe.skipIf(!built)("i18n tree-shaking (#325)", () => {
+	it("Button-only bundle contains none of the other components' strings", async () => {
+		const code = await bundle("Button");
+		const leaked = FOREIGN.filter((s) => code.includes(s));
+		expect(leaked).toEqual([]);
+	});
+
+	it("Button-only bundle still has Button's own strings in en and pt-BR", async () => {
+		const code = await bundle("Button");
+		expect(code).toContain("Finished loading");
+		expect(code).toContain("Loading…"); // Spinner (used by Button)
+		expect(code).toContain("Carregando…");
+	});
+
+	it("a component brings its own group, not its neighbours'", async () => {
+		const code = await bundle("CommandPalette");
+		expect(code).toContain("Command palette");
+		expect(code).toContain("Paleta de comandos");
+		expect(code).not.toContain("Module navigation");
+		expect(code).not.toContain("Resize navigation panel");
+	});
+});
diff --git a/packages/ui/tests/i18n.test.ts b/packages/ui/tests/i18n.test.ts
index 2aeaaf17..a83dcf39 100644
--- a/packages/ui/tests/i18n.test.ts
+++ b/packages/ui/tests/i18n.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, it } from "bun:test";
-import { en } from "../src/lib/i18n/en.js";
-import { ptBR } from "../src/lib/i18n/pt-BR.js";
+import { groups } from "../src/lib/i18n/all.js";
+
+const en = Object.fromEntries(Object.values(groups).map((g) => [g.id, g.builtin.en]));
+const ptBR = Object.fromEntries(Object.values(groups).map((g) => [g.id, g.builtin["pt-BR"]]));
 
 type Node = Record<string, unknown>;
 
@@ -14,21 +16,21 @@ function leaves(node: Node, prefix = ""): string[] {
 
 describe("i18n catalogs", () => {
 	it("pt-BR has exactly the keys of en (deep)", () => {
-		expect(leaves(ptBR as unknown as Node).sort()).toEqual(leaves(en as unknown as Node).sort());
+		expect(leaves(ptBR).sort()).toEqual(leaves(en).sort());
 	});
 
 	it("leaf kinds match (string vs function) between locales", () => {
 		const kind = (n: Node, path: string) =>
 			typeof path.split(".").reduce<unknown>((o, k) => (o as Node)[k], n);
-		for (const path of leaves(en as unknown as Node)) {
-			expect(kind(ptBR as unknown as Node, path), path).toBe(kind(en as unknown as Node, path));
+		for (const path of leaves(en)) {
+			expect(kind(ptBR, path), path).toBe(kind(en, path));
 		}
 	});
 
 	it("message functions return non-empty strings in both locales", () => {
-		expect(en.docs.search.empty("x")).toContain("x");
-		expect(ptBR.docs.search.empty("x")).toContain("x");
-		expect(ptBR.appList.selected(2)).toBe("2 selecionados");
-		expect(en.stepper.step(2, "Review", true)).toBe("Step 2: Review (done)");
+		expect(groups.docs.en.search.empty("x")).toContain("x");
+		expect(groups.docs.builtin["pt-BR"].search.empty("x")).toContain("x");
+		expect(groups.appList.builtin["pt-BR"].selected(2)).toBe("2 selecionados");
+		expect(groups.stepper.en.step(2, "Review", true)).toBe("Step 2: Review (done)");
 	});
 });
diff --git a/site/src/content/docs/getting-started/i18n.mdx b/site/src/content/docs/getting-started/i18n.mdx
index ab799a8d..45dfd2f0 100644
--- a/site/src/content/docs/getting-started/i18n.mdx
+++ b/site/src/content/docs/getting-started/i18n.mdx
@@ -116,7 +116,7 @@ Inside an `I18nProvider`, read the active locale and messages from context with
 
 ## Catalog
 
-The catalog is grouped by component, for example `docs.search.placeholder`, `dialog.close`, `pagination.next`, `fileUpload`, `dataTable` and `toast`. English (`en.ts`) is the source of truth; `pt-BR.ts` is typed as `Messages`, so a missing key is a type error. A test checks that both locales have identical keys.
+The catalog is grouped by component, for example `docs.search.placeholder`, `dialog.close`, `pagination.next`, `fileUpload`, `dataTable` and `toast`. Each group is its own module with its English source and its `pt-BR` translation (a missing key is a type error, and a test checks that both locales have identical keys). A component bundles only its own groups, so importing `Button` does not ship the strings of `CommandPalette` or `AppShell`. `useT()` and `getMessages()` return the full catalog and bundle all of it; use them only when you need strings outside a component.
 
 ## Server errors
 

From ec43cba90e43ed70858c1bb121198f78738ddbfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Vila=C3=A7a=20de=20Jesus?=
 <matheus@codeatlas.com.br>
Date: Sat, 17 Oct 2026 12:10:02 -0300
Subject: [PATCH 3/3] test(i18n): enforce the Button i18n leak guard in the
 size step (#325)

---
 .agents/skills/codeatlas-ui/API.md   |  8 ++--
 AGENTS.md                            |  2 +-
 packages/ui/scripts/size-lib.ts      | 33 ++++++++++++++++
 packages/ui/scripts/size-limit.ts    | 13 +++++-
 packages/ui/tests/i18n-split.test.ts | 59 ----------------------------
 5 files changed, 49 insertions(+), 66 deletions(-)
 delete mode 100644 packages/ui/tests/i18n-split.test.ts

diff --git a/.agents/skills/codeatlas-ui/API.md b/.agents/skills/codeatlas-ui/API.md
index 9dd1d8e1..979f18ec 100644
--- a/.agents/skills/codeatlas-ui/API.md
+++ b/.agents/skills/codeatlas-ui/API.md
@@ -3051,7 +3051,7 @@ function formatRelativeTime(value: Date | number | string, locale?: string): str
 
 `import { getLocales } from "@codeatlasdev/ui"`
 
-Registered locale ids.
+Registered locale ids (built-ins first).
 
 ```ts
 function getLocales(): Locale[]
@@ -3061,7 +3061,7 @@ function getLocales(): Locale[]
 
 `import { getMessages } from "@codeatlasdev/ui"`
 
-Messages for a locale, with optional deep overrides. Pure: no global state read or written, so it is safe on the server. Region subtags fall back to the base language, then to English.
+Messages for a locale, with optional deep overrides. Pure, so safe on the server.
 
 ```ts
 function getMessages(id: Locale, override?: MessagesOverride): Messages
@@ -3534,7 +3534,7 @@ function useLocale(): () => Locale
 
 `import { useT } from "@codeatlasdev/ui"`
 
-Message accessor for the component being initialised. Call it at the top level of `<script>` (it reads Svelte context), then use `t().group.key` anywhere, including `$derived` and markup.
+Full-catalog accessor for the component being initialised (provider first, client-global otherwise). Prefer `useMessages(group, …)` inside this package: it ships only what it reads.
 
 ```ts
 function useT(): () => Messages
@@ -3618,7 +3618,7 @@ Types:
 | `LayerKind` | `type LayerKind = "modal" \| "popover" \| "hint";` | The single layer stack. Every overlay (dialog, sheet, menu, popover, tooltip) goes through `openLayer`, so there is one place for the top layer, Escape / outside press / focus-out, focus restoration, scroll lock and the `layerchange` event hosts listen to. |
 | `LayoutProps` | `interface LayoutProps { gap?: Responsive<Space>; p?: Responsive<Space>; px?: Responsive<Space>; py?: Responsive<Space>; align?: Responsive<Align>; justify?: Responsive<Justify>; direction?: Responsive<Direction>; columns?: Responsive<Columns>; wrap?: Responsive<boolean>; }` | Props shared by every layout primitive. Each one also takes a responsive object. |
 | `Locale` | `type Locale = string;` | BCP 47 language tag. `en` and `pt-BR` are built in; add others with `registerLocale`. |
-| `Messages` | `type Messages = Widen<typeof en>;` | Full message shape (string literals widened so other locales can translate). |
+| `Messages` | `type Messages = { -readonly [K in keyof typeof groups]: GroupMessages<(typeof groups)[K]>; };` | Full message shape: every group's messages, keyed by group id. |
 | `MessagesOverride` | `type MessagesOverride = DeepPartial<Messages>;` | Partial, deep override accepted by `setLocale`, `registerLocale` and `I18nProvider`. |
 | `MotionCtx` | `interface MotionCtx { playing: boolean; reduced: boolean; takeover(): void; play(): void; pause(): void; cycle: number; }` | What a motion demo receives from `MotionStage`. Demos render from this and never run their own timers. |
 | `MotionOptions` | `interface MotionOptions { scale?: number; easing?: "standard" \| "emphasized" \| "spring" \| "linear" \| "steps"; enter?: "default" \| "none"; }` |  |
diff --git a/AGENTS.md b/AGENTS.md
index 494d4326..f885a937 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -729,7 +729,7 @@ setLocale("es");
 - **An explicit prop always wins** over the catalog: `<TableOfContents label="In this article" />`. Text props (`label`, `placeholder`, `confirmLabel`, `emptyText`, `ofLabel`…) no longer have a default; without the prop, the component uses the catalog.
 - **Override phrases** without creating a locale: `<I18nProvider locale="pt-BR" messages={{ docs: { toc: "In this article" } }}>` or `setLocale("pt-BR", { … })`. Deep-merged over the catalog; a new `setLocale` call replaces the previous overrides.
 - Catalog: one module per group in `packages/ui/src/lib/i18n/groups/<name>.ts` (e.g. `docs`, `dialog`), each a `defineGroup("docs", { en: {…}, "pt-BR": {…} })`. `en` is the source of truth; `pt-BR` is typed against it (a missing key is a type error). Strings with a value are functions: `notificationBell.label(unread)`. Groups are registered in `all.ts` (the `Messages` type, `getMessages`, public `useT()`); the rune-free `catalog.ts` holds `defineGroup`, `getGroup(group, locale, override?)` and the `registerLocale` registry.
-- **A component pays only for its own strings.** The built-in locales travel inside each group and a component imports only the groups it reads, so tree-shaking drops the rest. Never import `all.ts`, `getMessages` or the public `useT()` inside the package: they name every group and ship the whole catalog (`tests/i18n-split.test.ts` fails if Button's bundle contains another component's text).
+- **A component pays only for its own strings.** The built-in locales travel inside each group and a component imports only the groups it reads, so tree-shaking drops the rest. Never import `all.ts`, `getMessages` or the public `useT()` inside the package: they name every group and ship the whole catalog (`bun run size` fails if Button's bundle contains another component's text).
 - New text in a component: add the key to the group's `en` **and** `pt-BR` (new group: new file in `groups/` plus one line in `all.ts`), then in `<script>` `import { group } from "../../i18n/groups/<name>.js"` and call `const t = useMessages(group);` at the top level (or in a `.svelte.ts` helper called at component init; `useMessages` reads Svelte context, so it cannot run in event handlers or module scope). Read `t().group.key` in markup/`$derived`, and use `label ?? t().group.key` when there is a prop. Several groups: `useMessages(a, b)`. Never import a global `t`.
 - In browser tests, call `setLocale("pt-BR")` where the test checks Portuguese text and `setLocale("en")` in `afterEach`; the default is English. SSR tests (`*.ssr.test.ts`, `bun run test:ssr`) wrap the tree in `I18nProvider`.
 - The date/number `locale` (`DatePicker locale="pt-BR"`, masks) is independent of the UI language.
diff --git a/packages/ui/scripts/size-lib.ts b/packages/ui/scripts/size-lib.ts
index 08fcc0c2..29595d15 100644
--- a/packages/ui/scripts/size-lib.ts
+++ b/packages/ui/scripts/size-lib.ts
@@ -69,3 +69,36 @@ export async function measure(
 	const modules = Object.keys(meta?.inputs ?? {}).filter((k) => k.startsWith("dist/"));
 	return { gzip: gzipSync(out.contents, { level: 9 }).length, modules, code: out.text };
 }
+
+/**
+ * Strings of groups that a Button-only bundle must not contain (#325): each component pays only for
+ * its own i18n group. One sample per group, English and pt-BR where the text differs.
+ */
+export const FOREIGN_STRINGS = [
+	// commandPalette
+	"Command palette",
+	"Paleta de comandos",
+	"Search failed",
+	// combobox
+	"Selected values",
+	"Valores selecionados",
+	// appShell
+	"Module navigation",
+	"Navegação de módulos",
+	"Resize navigation panel",
+	// motionStage
+	"Replay",
+	// docs / copyButton
+	"On this page",
+	"Could not copy",
+];
+
+/** esbuild escapes non-ASCII (`…`, `ã`) in minified output; compare decoded text. */
+const decode = (code: string) =>
+	code.replace(/\\u([0-9a-fA-F]{4})/g, (_, h) => String.fromCharCode(Number.parseInt(h, 16)));
+
+/** The sampled strings of other components' groups found in a bundle. */
+export function foreignStrings(code: string): string[] {
+	const text = decode(code);
+	return FOREIGN_STRINGS.filter((s) => text.includes(s));
+}
diff --git a/packages/ui/scripts/size-limit.ts b/packages/ui/scripts/size-limit.ts
index f0573179..1079c9ed 100644
--- a/packages/ui/scripts/size-limit.ts
+++ b/packages/ui/scripts/size-limit.ts
@@ -8,7 +8,7 @@
 // The ratchet only moves down: --update never raises a limit, raise one by hand in a PR that explains why.
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
-import { dist, type Entry, measure } from "./size-lib.js";
+import { dist, type Entry, foreignStrings, measure } from "./size-lib.js";
 
 const root = join(import.meta.dir, "..");
 const limitsFile = join(root, "size-limit.json");
@@ -56,7 +56,7 @@ for (const e of ENTRIES) {
 		console.log(`skip   ${e.name} (not built)`);
 		continue;
 	}
-	const { gzip: size, modules } = await measure(e);
+	const { gzip: size, modules, code } = await measure(e);
 	if (e.name === "root: Button only") {
 		const leaked = modules.filter((m) => !BUTTON_ALLOWED.test(m));
 		if (leaked.length) {
@@ -65,6 +65,15 @@ for (const e of ENTRIES) {
 			);
 			failed++;
 		}
+		// i18n/ is allowed above, so a stray group import is only visible in the text: Button must
+		// carry its own strings (and Spinner's), not those of other components.
+		const foreign = foreignStrings(code);
+		if (foreign.length) {
+			console.error(
+				`FAIL   ${e.name}: i18n leak, strings of other components' groups in the bundle:\n  ${foreign.join("\n  ")}\n  Import only the groups a component reads (useMessages(group)); see AGENTS.md > Language (i18n).`
+			);
+			failed++;
+		}
 	}
 	const limit = limits[e.name];
 	const target = Math.ceil(size * HEADROOM);
diff --git a/packages/ui/tests/i18n-split.test.ts b/packages/ui/tests/i18n-split.test.ts
deleted file mode 100644
index a02a6c43..00000000
--- a/packages/ui/tests/i18n-split.test.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { describe, expect, it } from "bun:test";
-import { existsSync } from "node:fs";
-import { join } from "node:path";
-import { dist, measure } from "../scripts/size-lib.js";
-
-// #325: the whole en + pt-BR catalog used to ship with every root import. A component must pay only
-// for its own strings. Bundles the built package (`bun run build:pkg` first), like size-limit.
-
-const built = existsSync(join(dist, "index.js"));
-// esbuild escapes non-ASCII (`…`, `ã`) in minified output; compare decoded text.
-const decode = (code: string) =>
-	code.replace(/\\u([0-9a-fA-F]{4})/g, (_, h) => String.fromCharCode(Number.parseInt(h, 16)));
-const bundle = async (component: string) =>
-	decode(
-		(await measure({ name: component, js: `export { ${component} } from "./index.js";` })).code
-	);
-
-/** Strings of groups that Button does not use, in both built-in locales. */
-const FOREIGN = [
-	// commandPalette
-	"Command palette",
-	"Paleta de comandos",
-	"Search failed",
-	// combobox
-	"Selected values",
-	"Valores selecionados",
-	// appShell
-	"Module navigation",
-	"Navegação de módulos",
-	"Resize navigation panel",
-	// motionStage
-	"Replay",
-	// fileUpload / dataTable / docs
-	"On this page",
-	"Could not copy",
-];
-
-describe.skipIf(!built)("i18n tree-shaking (#325)", () => {
-	it("Button-only bundle contains none of the other components' strings", async () => {
-		const code = await bundle("Button");
-		const leaked = FOREIGN.filter((s) => code.includes(s));
-		expect(leaked).toEqual([]);
-	});
-
-	it("Button-only bundle still has Button's own strings in en and pt-BR", async () => {
-		const code = await bundle("Button");
-		expect(code).toContain("Finished loading");
-		expect(code).toContain("Loading…"); // Spinner (used by Button)
-		expect(code).toContain("Carregando…");
-	});
-
-	it("a component brings its own group, not its neighbours'", async () => {
-		const code = await bundle("CommandPalette");
-		expect(code).toContain("Command palette");
-		expect(code).toContain("Paleta de comandos");
-		expect(code).not.toContain("Module navigation");
-		expect(code).not.toContain("Resize navigation panel");
-	});
-});