react-autolocale 0.1.0 → 0.2.0

package/README.md

@@ -71,12 +71,65 @@ Your host must serve `/fr/about/index.html` for `/fr/about`, which static hosts
 
 ## Fixing a translation
 
+The quickest way is the overrides file. Run `npx react-autolocale export` after a build: it writes every generated translation into `react-autolocale.overrides.json` in your project root. Edit any value, commit the file and rebuild. Entries in it always win over machine translation and survive rebuilds (edits made inside `dist/` or the cache do not).
+
+You can also fix a few strings in code:
+
 Machine translation sometimes gets short UI words wrong (a nav link "Home" may come back as "Sommaire"). Correct any string in the plugin options; overrides always win:
 
 ```ts
 reactAutolocale({ overrides: { fr: { Home: "Accueil" }, es: { Home: "Inicio" } } })
 ```
 
+## Different values per language (prices, links, and more)
+
+Some things should differ by language, not just be translated: a price, a link to a localized page, a phone number.
+
+```tsx
+import { useLocalized, Localized, ForLanguages, useFormat } from "react-autolocale";
+
+// A value: falls back to `default`, then to the original language
+const href = useLocalized({ en: "/pricing", fr: "/tarifs", es: "/precios", default: "/pricing" });
+<a href={href}>Pricing</a>                        // "Pricing" itself is still translated for you
+
+// A block of UI
+<Localized en={<UsPhone />} fr={<FrPhone />} default={<UsPhone />} />
+
+// Content for some languages only (local offers, legal notices)
+<ForLanguages only={["fr", "es"]}>Free shipping in Europe</ForLanguages>
+<ForLanguages except={["ja"]}><CookieNotice /></ForLanguages>
+
+// Numbers, prices and dates in the visitor's format
+const format = useFormat();
+format.currency(1234.5, "EUR");   // "€1,234.50" in English, "1 234,50 €" in French
+format.number(1250000);           // "1,250,000" / "1 250 000"
+format.percent(0.15);             // "15%" / "15 %"
+format.date(new Date());          // "Oct 9, 2026" / "9 oct. 2026"
+```
+
+All of these are part of the prerendered pages, so `/fr/` and `/en/` ship with their own values in the HTML. Values you pick in code are your own data and are never machine-translated. `basePath` from `useLanguage()` is the current prefix (`/fr`) for building internal links. With React Router, the page you link to must be a route you define (here `/tarifs`); the build does not rename routes by language.
+
+## Better translations: glossary and choosing the engine
+
+The built-in model is free and runs on your machine, but it translates each string without knowing where it appears. You can improve it:
+
+```ts
+import reactAutolocale, { ollama } from "react-autolocale/vite";
+
+reactAutolocale({
+  // Terms that must always translate a given way (applied before the model sees the text)
+  glossary: { fr: { Roadmap: "Feuille de route" }, es: { Roadmap: "Hoja de ruta" } },
+
+  // Swap the engine. Free and local, through Ollama (https://ollama.com):
+  engine: ollama({ model: "llama3.1" }),
+
+  // ...or your own function: DeepL, an LLM API, anything. It is told where each string appears.
+  // engine: async ({ texts, contexts, from, to }) => texts.map((t, i) => myTranslate(t, from, to, contexts[i])),
+});
+```
+
+`contexts[i]` is the element or attribute the string sits in (`"button"`, `"a"`, `"h1"`, `"placeholder"`, ...), which is what lets a language model translate a lone "Home" in a nav bar correctly. The built-in model ignores it. Translations are cached, so you only pay for (or wait for) new and changed text.
+
 ## Language switcher
 
 Switching is just navigation to `/fr/` (instant, no reload; a page load when `seo` is on). You choose the UI:
@@ -95,7 +148,15 @@ const { language, languages, setLanguage, basePath } = useLanguage();
 
 ## What gets translated
 
-Static JSX text, plus `placeholder`, `title`, `alt`, `aria-label` on HTML elements. `exclude` phrases (brand names) are kept as-is, even inside longer sentences.
+- Static JSX text, plus `placeholder`, `title`, `alt` and `aria-label` on HTML elements.
+- **Text with variables**: `<p>Welcome, {user.name}. You have {count} new messages</p>` is translated as one sentence (`Welcome, {name}. You have {count} new messages`) and your values are filled in at runtime. Variables must be plain names or property paths (`name`, `user.name`, `props.count`). Text mixed with function calls, conditions or nested elements is left as written. There is no plural handling, so write `{count} message(s)` or branch in your code.
+- **Not translated**: anything with `translate="no"` (the standard HTML attribute, inherited by children), `exclude` phrases, `<code>` / `<pre>` / `<script>` / `<style>`, text made only of numbers and symbols, and data that arrives at runtime (API responses, user content).
+- **Numbers** are kept exactly as written. The build checks that every digit (prices, phone numbers, hours, versions) survives translation and re-translates with the number locked if not. If that still fails, the original text is kept instead of shipping a wrong number. Use `useFormat()` (below) for numbers you compute.
+
+```tsx
+<p translate="no">Acme Cloud</p>                       // never translated
+<section translate="no"><Terminal /></section>          // nothing inside is translated
+```
 
 ## Supported languages
 
@@ -144,13 +205,52 @@ Use these codes in `languages={[...]}`. The source (`original`) language can be
 
 OPUS-MT models are small (about 75 MB each) and are used when the source language is English. NLLB-200 is one larger download (about 600 MB) shared by all the languages marked NLLB, and is also used for any non-English source. Right-to-left languages automatically get `dir="rtl"` on the page.
 
+### Quality by language
+
+Every supported language was run through the real models on sample UI sentences: all 37 produce output in the right writing system, with no runaway or repeated text. How good that output is varies. French, Spanish, German, Italian, Dutch, Swedish, Danish, Japanese and Korean read naturally on ordinary sentences. Short imperative labels are the weak spot in many languages: "Save 20%" comes back as "save a file" in Russian, Ukrainian, Hungarian, Hindi and Romanian, "Sign in" comes back wrong in Russian, Chinese, Arabic and Vietnamese, and Arabic and Vietnamese could not keep the number in "Save 20% on your first order" (the original English is kept for such strings rather than risking a wrong number). Treat these as drafts: review the languages you ship in `react-autolocale.overrides.json`, add a `glossary` for key terms, or use an `engine` that gets context (see below). You can re-run the check yourself with `RUN_MODELS=1 pnpm exec vitest run test/models.test.ts`.
+
 ## Translations and caching
 
 Translations are generated on first build into `node_modules/.cache/react-autolocale/` and reused; only new or changed strings are translated afterwards. Cache that folder in CI. Models download once into `~/.cache/react-autolocale` (about 75 MB per OPUS-MT language, about 600 MB for NLLB: Japanese, Korean, Portuguese and others). The dev server translates text you add while it runs and reloads.
 
 ## Automatic language navigation
 
-Whenever a visitor lands on a URL without a language prefix (like `/` or `/about`), they are sent to the page for their saved language, or otherwise their browser language, if you support it: a French browser lands on `/fr/`. A language chosen in the switcher is remembered and wins on later visits; the browser language itself is not saved, it is simply checked each time. Explicit URLs such as `/fr/about/` or `/en/` are never redirected, and unsupported browser languages stay on the original.
+Whether a visitor is moved depends on the URL they land on:
+
+| Where they land | What happens |
+| --- | --- |
+| `/` or `/about` (no language in the URL) | Sent to their saved language, otherwise their browser language, if you support it (a French browser lands on `/fr/about`). |
+| `/en/about` or `/fr/about` (explicit language URL) | Never redirected. The page they asked for is the page they get. |
+
+- A language chosen in the switcher is remembered and wins on later visits. The browser language itself is not saved; it is checked each time.
+- The browser's language setting is used, not the visitor's physical location. Unsupported browser languages stay on the original.
+- The root page redirects before it paints, so visitors don't see a flash of the wrong language.
+
+This follows common practice. Redirecting the bare root by browser language is widespread, while forcing visitors off an explicit language URL is avoided: shared links and search results should open the page they point to, redirect loops are avoided, and it respects someone who chose a language on purpose. Search engines are told which URL belongs to which language through `hreflang` tags (see SEO below), so a French searcher is normally shown the `/fr/` URL in the first place. Visitors who land on another language's URL can use the language switcher.
+
+## Suggesting the visitor's language (optional banner)
+
+Instead of forcing a redirect on an explicit URL, you can offer the visitor their browser language: a French visitor on `/en/about` sees "Cette page est également disponible en Français." with a button to switch and one to dismiss. It appears only when the browser language is supported and differs from the page, is shown after the page loads (so it never changes the HTML search engines see), remembers a dismissal, and stays hidden once the visitor has picked a language. The text is shown in the visitor's own language.
+
+It is off unless you add it, and you decide how it looks:
+
+```tsx
+import { LanguageBanner } from "react-autolocale";
+
+<LanguageBanner />                                   // ready-made bar, style it with className / style
+<LanguageBanner className="my-bar" />                // your own CSS replaces the default look
+
+<LanguageBanner>                                     // or build the markup yourself
+  {(s) => (
+    <aside>
+      {s.text} <button onClick={s.accept}>{s.switchLabel}</button>
+      <button onClick={s.dismiss}>{s.dismissLabel}</button>
+    </aside>
+  )}
+</LanguageBanner>
+```
+
+Prefer to own the component? `npx react-autolocale add banner` copies an editable `LanguageBanner` into your project. For full control use the hook, `useLanguageSuggestion()`, which returns `null` or `{ language, native, text, switchLabel, dismissLabel, accept, dismiss }`.
 
 ## SEO (opt-in)
 
@@ -171,10 +271,11 @@ With `seo` the build also:
 
 With `seo`, switching language navigates to the real page (so its head tags are correct) instead of swapping in place. Brand names in the title are translated like any text, so add them to `exclude`.
 
-## v1 limits
+## Limits
 
-- Dynamic content (`Hello {name}`, API data) is not translated; planned for v1.5. Text next to `{expressions}` stays in the original language.
+- Data that arrives at runtime (API responses, user-written content) is not translated: it does not exist at build time. Text you write in JSX around those values is.
+- Variables in text must be plain names or property paths; no plural rules.
 - Dynamic routes (`/users/:id`) only get pages you list in `routes`, or that are linked.
 - `<AutoScale>` props must be literals so the plugin can read them at build time.
 - Use Vite's default `base: "/"`.
-- Machine translation is draft quality.
+- Machine translation is draft quality. Short labels, long sentences with variables and less common languages need a human look: use the overrides file.

package/dist/cli.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+import { n as exportTranslations, t as OVERRIDES_FILE } from "./overrides-ZQ6meLck.js";
 import fs from "node:fs";
 import path from "node:path";
 //#region src/cli/viteConfig.ts
@@ -30,10 +31,15 @@ function patchViteConfig(source) {
 const HELP = `react-autolocale
 
 Usage:
+  react-autolocale export
+      Writes the generated translations to ${OVERRIDES_FILE} so you can edit them.
+      Anything in that file always wins over machine translation. Run a build first.
   react-autolocale init
       Adds the plugin to your vite.config for you.
   react-autolocale add switcher [--dir src/components]
       Copies an editable <LanguageSwitcher /> into your project.
+  react-autolocale add banner [--dir src/components]
+      Copies an editable <LanguageBanner /> (suggests the visitor's browser language) into your project.
 `;
 const TSX = `import { useLanguage } from "react-autolocale";
 
@@ -57,6 +63,22 @@ export function LanguageSwitcher() {
 }
 `;
 const JSX = TSX;
+const BANNER_TSX = `import { useLanguageSuggestion } from "react-autolocale";
+
+// This file is yours: change the markup, style it, or replace it entirely.
+// It renders nothing unless the visitor's browser language differs from this page's language.
+export function LanguageBanner() {
+  const suggestion = useLanguageSuggestion();
+  if (!suggestion) return null;
+  return (
+    <div role="region" aria-label={suggestion.native}>
+      <span>{suggestion.text}</span>
+      <button onClick={suggestion.accept}>{suggestion.switchLabel}</button>
+      <button onClick={suggestion.dismiss}>{suggestion.dismissLabel}</button>
+    </div>
+  );
+}
+`;
 function flag(args, name) {
 	const i = args.indexOf(name);
 	return i >= 0 ? args[i + 1] : void 0;
@@ -87,19 +109,24 @@ function init(root) {
 	console.log(patched.changed ? `Added the react-autolocale plugin to ${name}.` : `${name} already uses react-autolocale.`);
 	console.log(NEXT_STEP);
 }
-function addSwitcher(root, args) {
+function addComponent(root, args, name) {
 	const dir = path.resolve(root, flag(args, "--dir") ?? (fs.existsSync(path.join(root, "src")) ? "src/components" : "components"));
 	const ts = fs.existsSync(path.join(root, "tsconfig.json"));
-	const file = path.join(dir, ts ? "LanguageSwitcher.tsx" : "LanguageSwitcher.jsx");
+	const file = path.join(dir, ts ? `${name}.tsx` : `${name}.jsx`);
 	if (fs.existsSync(file)) throw new Error(`${path.relative(root, file)} already exists.`);
 	fs.mkdirSync(dir, { recursive: true });
-	fs.writeFileSync(file, ts ? TSX : JSX);
-	console.log(`Created ${path.relative(root, file)}\nImport it anywhere: import { LanguageSwitcher } from "./components/LanguageSwitcher";`);
+	fs.writeFileSync(file, name === "LanguageBanner" ? BANNER_TSX : ts ? TSX : JSX);
+	console.log(`Created ${path.relative(root, file)}\nImport it anywhere: import { ${name} } from "./components/${name}";`);
 }
 try {
 	const [cmd, what, ...rest] = process.argv.slice(2);
 	if (cmd === "init") init(process.cwd());
-	else if (cmd === "add" && what === "switcher") addSwitcher(process.cwd(), rest);
+	else if (cmd === "export") {
+		const { file, languages } = exportTranslations(process.cwd());
+		console.log(`Wrote ${path.relative(process.cwd(), file)}: ${Object.entries(languages).map(([l, n]) => `${l} ${n}`).join(", ")} strings.`);
+		console.log("Edit any value, commit the file, and rebuild. Your edits always win over machine translation.");
+	} else if (cmd === "add" && what === "switcher") addComponent(process.cwd(), rest, "LanguageSwitcher");
+	else if (cmd === "add" && what === "banner") addComponent(process.cwd(), rest, "LanguageBanner");
 	else {
 		console.log(HELP);
 		if (cmd) process.exitCode = 1;

package/dist/index.d.ts

@@ -37,6 +37,65 @@ export declare function __T({ s }: {
 }): ReactElement;
 /** @internal Inserted by the Vite plugin for translated attributes (placeholder, alt, ...). */
 export declare function __useT(): (s: string) => string;
+/** @internal Inserted by the Vite plugin for text with variables, e.g. `Hello {name}`. */
+export declare function __TD({ s, v }: {
+  s: string;
+  v: Record<string, unknown>;
+}): ReactElement;
+/**
+ * Pick a value by language: `useLocalized({ en: "/pricing", fr: "/tarifs", default: "/pricing" })`.
+ * Falls back to `default`, then to the original language's value.
+ */
+export declare function useLocalized<T>(values: Record<string, T | undefined> & {
+  default?: T;
+}): T;
+/** Component form of `useLocalized`: `<Localized en={<A />} fr={<B />} default={<A />} />`. */
+export declare function Localized(props: Record<string, ReactNode>): ReactElement;
+export interface ForLanguagesProps {
+  /** Show only for these languages. */
+  only?: string[];
+  /** Show for every language except these. */
+  except?: string[];
+  children?: ReactNode;
+}
+/** Content that appears for some languages only, such as a local offer or legal notice. */
+export declare function ForLanguages({ only, except, children }: ForLanguagesProps): ReactElement | null;
+export interface Format {
+  language: string;
+  number: (value: number, options?: Intl.NumberFormatOptions) => string;
+  currency: (value: number, currency: string, options?: Intl.NumberFormatOptions) => string;
+  percent: (value: number, options?: Intl.NumberFormatOptions) => string;
+  date: (value: Date | number | string, options?: Intl.DateTimeFormatOptions) => string;
+}
+/** Numbers, prices and dates formatted for the current language: `format.currency(19.99, "EUR")`. */
+export declare function useFormat(): Format;
+export interface LanguageSuggestion {
+  /** Code of the suggested language, e.g. "fr". */
+  language: string;
+  /** The suggested language's own name, e.g. "Français". */
+  native: string;
+  /** Full sentence in the visitor's language, e.g. "This page is also available in Français. Switch?" */
+  text: string;
+  switchLabel: string;
+  dismissLabel: string;
+  /** Go to this page in the suggested language. */
+  accept: () => void;
+  /** Hide the suggestion and don't offer this language again. */
+  dismiss: () => void;
+}
+/**
+ * For building your own banner. Returns null when there is nothing to suggest: the visitor's browser language
+ * is the page's language, is not supported, was dismissed, or they already picked a language.
+ */
+export declare function useLanguageSuggestion(): LanguageSuggestion | null;
+export interface LanguageBannerProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Replace the markup entirely: `{(s) => <MyBar>{s.text}</MyBar>}`. */
+  children?: (suggestion: LanguageSuggestion) => ReactNode;
+}
+/** A ready-made suggestion bar. Style it with `className`/`style`, or pass a render function to build your own. */
+export declare function LanguageBanner({ className, style, children }: LanguageBannerProps): ReactElement | null;
 export interface LanguageApi {
   language: string;
   /** Switches language and updates the URL; resolves once translations are loaded. */

package/dist/index.js

@@ -1,6 +1,6 @@
-import { r as redirectTarget, t as STORAGE_KEY } from "./redirect-CKNY4ru5.js";
+import { i as STORAGE_KEY, n as DISMISSED_KEY, o as redirectTarget, r as suggestLanguage, t as BANNER_EN } from "./suggestion-UZQ8ngd0.js";
 import { Fragment, createContext, createElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { languages, loaders, original, originalNative, seo } from "virtual:react-autolocale";
+import { banner, languages, loaders, original, originalNative, seo } from "virtual:react-autolocale";
 //#region src/runtime/index.ts
 const hasDom = typeof window !== "undefined" && typeof document !== "undefined";
 const codes = /* @__PURE__ */ new Set([original, ...languages.map((l) => l.code)]);
@@ -32,8 +32,27 @@ function initialState() {
 		dict: {}
 	};
 	const boot = window.__AUTOSCALE__;
-	const language = boot?.lang ?? prefixOf(window.location.pathname) ?? original;
 	if (boot) cache.set(boot.lang, boot.dict);
+	const { pathname, search, hash } = window.location;
+	const fromUrl = prefixOf(pathname);
+	if (fromUrl === null) {
+		let saved = null;
+		try {
+			saved = window.localStorage.getItem(STORAGE_KEY);
+		} catch {}
+		const to = redirectTarget({
+			pathname,
+			search,
+			hash,
+			saved,
+			browser: window.navigator.languages?.length ? window.navigator.languages : [window.navigator.language],
+			codes: [...codes],
+			original
+		});
+		if (to) window.location.replace(to);
+		else window.history.replaceState(window.history.state, "", `/${original}${pathname}${search}${hash}`);
+	}
+	const language = fromUrl ?? original;
 	return {
 		language,
 		dict: language === original ? {} : cache.get(language) ?? {}
@@ -68,22 +87,6 @@ function AutoScale({ children }) {
 		document.documentElement.lang = state.language;
 		document.documentElement.dir = languages.find((l) => l.code === state.language)?.rtl ? "rtl" : "ltr";
 	}, [state.language]);
-	useEffect(() => {
-		let saved = null;
-		try {
-			saved = window.localStorage.getItem(STORAGE_KEY);
-		} catch {}
-		const to = redirectTarget({
-			pathname: window.location.pathname,
-			search: window.location.search,
-			hash: window.location.hash,
-			saved,
-			browser: window.navigator.languages?.length ? window.navigator.languages : [window.navigator.language],
-			codes: [...codes],
-			original
-		});
-		if (to) window.location.replace(to);
-	}, []);
 	useEffect(() => {
 		if (state.language !== original && !cache.has(state.language)) apply(state.language, false);
 		const onPop = () => void apply(prefixOf(window.location.pathname) ?? original, false);
@@ -106,6 +109,132 @@ function __useT() {
 	const { dict } = useContext(Context);
 	return useCallback((s) => dict[s] ?? s, [dict]);
 }
+/** @internal Inserted by the Vite plugin for text with variables, e.g. `Hello {name}`. */
+function __TD({ s, v }) {
+	const { dict } = useContext(Context);
+	const parts = (dict[s] ?? s).split(/\{(\w+)\}/g).map((part, i) => i % 2 ? v[part] : part);
+	return createElement(Fragment, null, ...parts.map((p, i) => createElement(Fragment, { key: i }, p)));
+}
+/**
+* Pick a value by language: `useLocalized({ en: "/pricing", fr: "/tarifs", default: "/pricing" })`.
+* Falls back to `default`, then to the original language's value.
+*/
+function useLocalized(values) {
+	const { language } = useContext(Context);
+	return values[language] ?? values.default ?? values[original];
+}
+/** Component form of `useLocalized`: `<Localized en={<A />} fr={<B />} default={<A />} />`. */
+function Localized(props) {
+	return createElement(Fragment, null, useLocalized(props));
+}
+/** Content that appears for some languages only, such as a local offer or legal notice. */
+function ForLanguages({ only, except, children }) {
+	const { language } = useContext(Context);
+	if (only && !only.includes(language)) return null;
+	if (except?.includes(language)) return null;
+	return createElement(Fragment, null, children);
+}
+/** Numbers, prices and dates formatted for the current language: `format.currency(19.99, "EUR")`. */
+function useFormat() {
+	const { language } = useContext(Context);
+	return useMemo(() => ({
+		language,
+		number: (value, options) => new Intl.NumberFormat(language, options).format(value),
+		currency: (value, currency, options) => new Intl.NumberFormat(language, {
+			style: "currency",
+			currency,
+			...options
+		}).format(value),
+		percent: (value, options) => new Intl.NumberFormat(language, {
+			style: "percent",
+			...options
+		}).format(value),
+		date: (value, options) => new Intl.DateTimeFormat(language, options ?? { dateStyle: "medium" }).format(new Date(value))
+	}), [language]);
+}
+function readDismissed() {
+	try {
+		const v = JSON.parse(window.localStorage.getItem("react-autolocale:banner-dismissed") ?? "[]");
+		return Array.isArray(v) ? v : [];
+	} catch {
+		return [];
+	}
+}
+/**
+* For building your own banner. Returns null when there is nothing to suggest: the visitor's browser language
+* is the page's language, is not supported, was dismissed, or they already picked a language.
+*/
+function useLanguageSuggestion() {
+	const { language, setLanguage } = useContext(Context);
+	const [code, setCode] = useState(null);
+	useEffect(() => {
+		let chosen = false;
+		try {
+			chosen = window.localStorage.getItem(STORAGE_KEY) !== null;
+		} catch {}
+		setCode(suggestLanguage({
+			browser: window.navigator.languages?.length ? window.navigator.languages : [window.navigator.language],
+			codes: [...codes],
+			current: language,
+			dismissed: readDismissed(),
+			chosen
+		}));
+	}, [language]);
+	if (!code) return null;
+	const text = banner[code] ?? BANNER_EN;
+	const native = code === original ? originalNative : languages.find((l) => l.code === code)?.native ?? code;
+	return {
+		language: code,
+		native,
+		text: text.prompt.split("{language}").join(native),
+		switchLabel: text.switch.split("{language}").join(native),
+		dismissLabel: text.dismiss.split("{language}").join(native),
+		accept: () => void setLanguage(code),
+		dismiss: () => {
+			try {
+				window.localStorage.setItem(DISMISSED_KEY, JSON.stringify([...readDismissed(), code]));
+			} catch {}
+			setCode(null);
+		}
+	};
+}
+const BAR = {
+	position: "fixed",
+	left: 0,
+	right: 0,
+	bottom: 0,
+	display: "flex",
+	gap: 12,
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "10px 16px",
+	background: "#111",
+	color: "#fff",
+	font: "14px system-ui, sans-serif",
+	zIndex: 2147483e3
+};
+/** A ready-made suggestion bar. Style it with `className`/`style`, or pass a render function to build your own. */
+function LanguageBanner({ className, style, children }) {
+	const s = useLanguageSuggestion();
+	if (!s) return null;
+	if (children) return createElement(Fragment, null, children(s));
+	return createElement("div", {
+		role: "region",
+		"aria-label": s.native,
+		className,
+		style: className ? style : {
+			...BAR,
+			...style
+		}
+	}, createElement("span", null, s.text), createElement("button", {
+		type: "button",
+		onClick: s.accept,
+		lang: s.language
+	}, s.switchLabel), createElement("button", {
+		type: "button",
+		onClick: s.dismiss
+	}, s.dismissLabel));
+}
 function useLanguage() {
 	const { language, setLanguage } = useContext(Context);
 	return useMemo(() => ({
@@ -133,4 +262,4 @@ function LanguageSwitcher({ className, style, label = "Language" }) {
 	}, l.native)));
 }
 //#endregion
-export { AutoScale, LanguageSwitcher, __T, __useT, useLanguage };
+export { AutoScale, ForLanguages, LanguageBanner, LanguageSwitcher, Localized, __T, __TD, __useT, useFormat, useLanguage, useLanguageSuggestion, useLocalized };