@base44/app-plugin-commerce 0.7.1 → 0.8.0

package/src/commerce/admin/bot/StoreAdminBot.jsx

@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { Loader2, RotateCcw, Send, Sparkles, Wrench, XCircle } from "lucide-react";
 import { toast } from "sonner";
 import { base44 } from "../lib/api";
+import { t } from "../i18n";
 import Markdown from "./Markdown";
 
 /** Agent identifier — base44/agents/commerce/StoreAdmin.jsonc, namespaced by its folder. */
@@ -14,9 +15,9 @@ const AGENT_NAME = "commerce/StoreAdmin";
 const CONVERSATION_KEY = "commerce.StoreAdmin.conversation_id";
 
 const SUGGESTIONS = [
-  "Show today's sales summary",
-  "List the 10 most recent orders",
-  "Which products are low on stock?",
+  "bot.suggestion_sales_summary",
+  "bot.suggestion_recent_orders",
+  "bot.suggestion_low_stock",
 ];
 
 /** One chat message bubble (user right, assistant left with markdown + tool chips). */
@@ -152,7 +153,7 @@ export default function StoreAdminBot({ open, onOpenChange }) {
         ]);
         await base44.agents.addMessage(conv, { role: "user", content: trimmed });
       } catch (err) {
-        toast.error(err?.response?.data?.message || err.message || "Failed to reach StoreAdmin");
+        toast.error(err?.response?.data?.message || err.message || t("bot.error_reach"));
       } finally {
         setSending(false);
       }
@@ -181,7 +182,7 @@ export default function StoreAdminBot({ open, onOpenChange }) {
           <div className="flex items-center justify-between">
             <SheetTitle className="flex items-center gap-2 text-base">
               <Sparkles className="h-4 w-4 text-primary" />
-              StoreAdmin
+              {t("bot.title")}
             </SheetTitle>
             <Button
               variant="ghost"
@@ -191,7 +192,7 @@ export default function StoreAdminBot({ open, onOpenChange }) {
               disabled={!conversationId && messages.length === 0}
             >
               <RotateCcw className="h-3 w-3" />
-              New chat
+              {t("bot.new_chat")}
             </Button>
           </div>
         </SheetHeader>
@@ -200,7 +201,7 @@ export default function StoreAdminBot({ open, onOpenChange }) {
           {visibleMessages.length === 0 && (
             <div className="mt-6 space-y-3 text-center">
               <p className="text-sm text-muted-foreground">
-                Ask me anything about your store — I can look things up and make changes for you.
+                {t("bot.intro")}
               </p>
               <div className="flex flex-col items-stretch gap-1.5">
                 {SUGGESTIONS.map((s) => (
@@ -209,9 +210,9 @@ export default function StoreAdminBot({ open, onOpenChange }) {
                     variant="outline"
                     size="sm"
                     className="justify-start text-xs font-normal text-muted-foreground"
-                    onClick={() => send(s)}
+                    onClick={() => send(t(s))}
                   >
-                    {s}
+                    {t(s)}
                   </Button>
                 ))}
               </div>
@@ -223,7 +224,7 @@ export default function StoreAdminBot({ open, onOpenChange }) {
           {busy && (
             <div className="flex items-center gap-2 px-1 text-xs text-muted-foreground">
               <Loader2 className="h-3 w-3 animate-spin" />
-              Working…
+              {t("bot.working")}
             </div>
           )}
         </div>
@@ -234,7 +235,7 @@ export default function StoreAdminBot({ open, onOpenChange }) {
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={onKeyDown}
-              placeholder="e.g. Show pending orders as a table"
+              placeholder={t("bot.input_placeholder")}
               rows={1}
               className="max-h-32 min-h-9 resize-none text-[13px]"
             />

package/src/commerce/admin/components/AddressForm.jsx

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/select";
 import CountrySelect from "./CountrySelect";
 import { statesFor } from "../lib/geo-data";
+import { t } from "../i18n";
 
 /**
  * Billing/shipping address editor (Order billing shape).
@@ -35,29 +36,29 @@ export default function AddressForm({
 
   return (
     <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-      {field("First name", <Input value={value.first_name || ""} onChange={setInput("first_name")} disabled={disabled} />)}
-      {field("Last name", <Input value={value.last_name || ""} onChange={setInput("last_name")} disabled={disabled} />)}
+      {field(t("address.first_name"), <Input value={value.first_name || ""} onChange={setInput("first_name")} disabled={disabled} />)}
+      {field(t("address.last_name"), <Input value={value.last_name || ""} onChange={setInput("last_name")} disabled={disabled} />)}
       <div className="sm:col-span-2">
-        {field("Company", <Input value={value.company || ""} onChange={setInput("company")} disabled={disabled} />)}
+        {field(t("address.company"), <Input value={value.company || ""} onChange={setInput("company")} disabled={disabled} />)}
       </div>
       <div className="sm:col-span-2">
-        {field("Address line 1", <Input value={value.address_1 || ""} onChange={setInput("address_1")} disabled={disabled} />)}
+        {field(t("address.line1"), <Input value={value.address_1 || ""} onChange={setInput("address_1")} disabled={disabled} />)}
       </div>
       <div className="sm:col-span-2">
-        {field("Address line 2", <Input value={value.address_2 || ""} onChange={setInput("address_2")} disabled={disabled} />)}
+        {field(t("address.line2"), <Input value={value.address_2 || ""} onChange={setInput("address_2")} disabled={disabled} />)}
       </div>
-      {field("City", <Input value={value.city || ""} onChange={setInput("city")} disabled={disabled} />)}
-      {field("Postcode / ZIP", <Input value={value.postcode || ""} onChange={setInput("postcode")} disabled={disabled} />)}
+      {field(t("address.city"), <Input value={value.city || ""} onChange={setInput("city")} disabled={disabled} />)}
+      {field(t("address.postcode"), <Input value={value.postcode || ""} onChange={setInput("postcode")} disabled={disabled} />)}
       {field(
-        "Country",
+        t("address.country"),
         <CountrySelect value={value.country || ""} onChange={(code) => onChange({ ...value, country: code, state: "" })} disabled={disabled} />
       )}
       {field(
-        "State / Province",
+        t("address.state"),
         states ? (
           <Select value={value.state || ""} onValueChange={set("state")} disabled={disabled}>
             <SelectTrigger>
-              <SelectValue placeholder="Select state…" />
+              <SelectValue placeholder={t("address.select_state")} />
             </SelectTrigger>
             <SelectContent>
               {states.map((s) => (
@@ -71,8 +72,8 @@ export default function AddressForm({
           <Input value={value.state || ""} onChange={setInput("state")} disabled={disabled} />
         )
       )}
-      {showEmail && field("Email", <Input type="email" value={value.email || ""} onChange={setInput("email")} disabled={disabled} />)}
-      {showPhone && field("Phone", <Input value={value.phone || ""} onChange={setInput("phone")} disabled={disabled} />)}
+      {showEmail && field(t("common.email"), <Input type="email" value={value.email || ""} onChange={setInput("email")} disabled={disabled} />)}
+      {showPhone && field(t("common.phone"), <Input value={value.phone || ""} onChange={setInput("phone")} disabled={disabled} />)}
     </div>
   );
 }

package/src/commerce/admin/components/ConfirmDialog.jsx

@@ -10,6 +10,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Loader2 } from "lucide-react";
+import { t } from "../i18n";
 
 /**
  * Confirmation dialog for destructive actions.
@@ -18,9 +19,9 @@ import { Loader2 } from "lucide-react";
 export default function ConfirmDialog({
   open,
   onOpenChange,
-  title = "Are you sure?",
-  description = "This action cannot be undone.",
-  confirmLabel = "Confirm",
+  title = t("confirm.title"),
+  description = t("confirm.description"),
+  confirmLabel = t("common.confirm"),
   destructive = true,
   onConfirm,
   loading = false,
@@ -33,7 +34,7 @@ export default function ConfirmDialog({
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+          <AlertDialogCancel disabled={loading}>{t("common.cancel")}</AlertDialogCancel>
           <AlertDialogAction
             disabled={loading}
             className={destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : ""}

package/src/commerce/admin/components/CountrySelect.jsx

@@ -11,15 +11,17 @@ import {
 import { Button } from "@/components/ui/button";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { COUNTRIES } from "../lib/geo-data";
+import { t, countryName } from "../i18n";
 
 /**
- * Searchable country picker.
+ * Searchable country picker. Names render in the admin's language
+ * (Intl.DisplayNames); the English name stays searchable.
  * Props: { value (ISO code), onChange(code), placeholder?, allowEmpty?, disabled? }
  */
 export default function CountrySelect({
   value,
   onChange,
-  placeholder = "Select country…",
+  placeholder = t("country.select"),
   allowEmpty = false,
   disabled = false,
   className = "",
@@ -37,15 +39,17 @@ export default function CountrySelect({
           disabled={disabled}
           className={`w-full justify-between font-normal ${className}`}
         >
-          <span className="truncate">{selected?.name || placeholder}</span>
+          <span className="truncate">
+            {selected ? countryName(selected.code, selected.name) : placeholder}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
         <Command>
-          <CommandInput placeholder="Search countries…" />
+          <CommandInput placeholder={t("country.search")} />
           <CommandList>
-            <CommandEmpty>No country found.</CommandEmpty>
+            <CommandEmpty>{t("country.none_found")}</CommandEmpty>
             <CommandGroup>
               {allowEmpty && (
                 <CommandItem
@@ -56,20 +60,20 @@ export default function CountrySelect({
                   }}
                 >
                   <Check className={`mr-2 h-4 w-4 ${!value ? "opacity-100" : "opacity-0"}`} />
-                  Any country
+                  {t("country.any")}
                 </CommandItem>
               )}
               {COUNTRIES.map((c) => (
                 <CommandItem
                   key={c.code}
-                  value={`${c.name} ${c.code}`}
+                  value={`${countryName(c.code, c.name)} ${c.name} ${c.code}`}
                   onSelect={() => {
                     onChange(c.code);
                     setOpen(false);
                   }}
                 >
                   <Check className={`mr-2 h-4 w-4 ${value === c.code ? "opacity-100" : "opacity-0"}`} />
-                  {c.name}
+                  {countryName(c.code, c.name)}
                 </CommandItem>
               ))}
             </CommandGroup>

package/src/commerce/admin/components/DataTable.jsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import EmptyState from "./EmptyState";
+import { t } from "../i18n";
 
 /**
  * Generic list table.
@@ -112,7 +113,7 @@ export default function DataTable({
             ) : rows.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={colCount} className="py-12">
-                  <EmptyState {...(empty || { title: "Nothing here yet" })} />
+                  <EmptyState {...(empty || { title: t("table.empty_title") })} />
                 </TableCell>
               </TableRow>
             ) : (
@@ -166,7 +167,7 @@ export default function DataTable({
       </div>
       {pagination && (
         <div className="flex items-center justify-end gap-2 border-t px-3 py-2 text-sm text-muted-foreground">
-          <span>Page {pagination.page}</span>
+          <span>{t("table.page", { page: pagination.page })}</span>
           <Button
             variant="outline"
             size="icon"

package/src/commerce/admin/components/DateRangePicker.jsx

@@ -3,24 +3,25 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { CalendarIcon, X } from "lucide-react";
+import { t } from "../i18n";
 
 const toISO = (d) => (d ? d.toISOString().slice(0, 10) : null);
 
 function presetRanges() {
   const today = new Date();
   const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
-  const t = startOfDay(today);
-  const daysAgo = (n) => new Date(t.getFullYear(), t.getMonth(), t.getDate() - n);
+  const day = startOfDay(today);
+  const daysAgo = (n) => new Date(day.getFullYear(), day.getMonth(), day.getDate() - n);
   return [
-    { label: "Today", from: t, to: t },
-    { label: "Last 7 days", from: daysAgo(6), to: t },
-    { label: "This month", from: new Date(t.getFullYear(), t.getMonth(), 1), to: t },
+    { label: t("dates.today"), from: day, to: day },
+    { label: t("dates.last_7_days"), from: daysAgo(6), to: day },
+    { label: t("dates.this_month"), from: new Date(day.getFullYear(), day.getMonth(), 1), to: day },
     {
-      label: "Last month",
-      from: new Date(t.getFullYear(), t.getMonth() - 1, 1),
-      to: new Date(t.getFullYear(), t.getMonth(), 0),
+      label: t("dates.last_month"),
+      from: new Date(day.getFullYear(), day.getMonth() - 1, 1),
+      to: new Date(day.getFullYear(), day.getMonth(), 0),
     },
-    { label: "This year", from: new Date(t.getFullYear(), 0, 1), to: t },
+    { label: t("dates.this_year"), from: new Date(day.getFullYear(), 0, 1), to: day },
   ];
 }
 
@@ -34,7 +35,7 @@ export default function DateRangePicker({ value, onChange, align = "start" }) {
 
   const label = value?.from
     ? `${value.from}${value.to && value.to !== value.from ? ` → ${value.to}` : ""}`
-    : "All time";
+    : t("dates.all_time");
 
   const applyPreset = (p) => {
     onChange({ from: toISO(p.from), to: toISO(p.to) });

package/src/commerce/admin/components/EmptyState.jsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { Inbox } from "lucide-react";
+import { t } from "../i18n";
 
 /**
  * Empty-list placeholder.
  * Props: { icon?: LucideIcon, title?, description?, action?: node }
  */
-export default function EmptyState({ icon: Icon = Inbox, title = "Nothing here yet", description, action }) {
+export default function EmptyState({ icon: Icon = Inbox, title = t("table.empty_title"), description, action }) {
   return (
     <div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
       <Icon className="h-8 w-8 text-muted-foreground/40" />

package/src/commerce/admin/components/MediaUploader.jsx

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { ArrowDown, ArrowUp, ImagePlus, Loader2, X } from "lucide-react";
 import { toast } from "sonner";
 import { base44 } from "../lib/api";
+import { t } from "../i18n";
 
 /** Upload a file via the Core integration; returns the public URL. */
 export async function uploadFile(file) {
@@ -23,7 +24,7 @@ export default function MediaUploader({
   onChange,
   multiple = false,
   accept = "image/*",
-  label = multiple ? "Add images" : "Set image",
+  label = multiple ? t("media.add_images") : t("media.set_image"),
 }) {
   const inputRef = useRef(null);
   const [uploading, setUploading] = useState(false);
@@ -42,7 +43,7 @@ export default function MediaUploader({
       if (multiple) onChange([...(value || []), ...uploaded]);
       else onChange(uploaded[0] || null);
     } catch (err) {
-      toast.error(err.response?.data?.error || err.message || "Upload failed");
+      toast.error(err.response?.data?.error || err.message || t("common.upload_failed"));
     } finally {
       setUploading(false);
       if (inputRef.current) inputRef.current.value = "";

package/src/commerce/admin/components/MetaDataEditor.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Plus, X } from "lucide-react";
+import { t } from "../i18n";
 
 /**
  * Key/value editor for `meta_data` arrays.
@@ -21,13 +22,13 @@ export default function MetaDataEditor({ value = [], onChange }) {
       {(value || []).map((row, i) => (
         <div key={i} className="flex items-center gap-2">
           <Input
-            placeholder="Key"
+            placeholder={t("meta.key")}
             value={row.key || ""}
             onChange={(e) => setRow(i, "key", e.target.value)}
             className="w-1/3"
           />
           <Input
-            placeholder="Value"
+            placeholder={t("meta.value")}
             value={row.value || ""}
             onChange={(e) => setRow(i, "value", e.target.value)}
             className="flex-1"
@@ -38,7 +39,7 @@ export default function MetaDataEditor({ value = [], onChange }) {
         </div>
       ))}
       <Button type="button" variant="outline" size="sm" onClick={addRow}>
-        <Plus className="mr-1 h-4 w-4" /> Add field
+        <Plus className="mr-1 h-4 w-4" /> {t("meta.add_field")}
       </Button>
     </div>
   );

package/src/commerce/admin/components/SearchSelect.jsx

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Check, ChevronsUpDown, Loader2, X } from "lucide-react";
 import useDebounce from "../hooks/useDebounce";
+import { t } from "../i18n";
 
 /**
  * Async searchable picker (single or multi).
@@ -29,7 +30,7 @@ export default function SearchSelect({
   value,
   onChange,
   multiple = false,
-  placeholder = "Search…",
+  placeholder = t("common.search"),
   disabled = false,
   className = "",
 }) {
@@ -80,7 +81,7 @@ export default function SearchSelect({
             <span className="truncate text-left">
               {multiple
                 ? (value || []).length
-                  ? `${value.length} selected`
+                  ? t("common.selected_count", { count: value.length })
                   : placeholder
                 : value?.label || placeholder}
             </span>
@@ -97,7 +98,7 @@ export default function SearchSelect({
                 </div>
               ) : (
                 <>
-                  <CommandEmpty>No results.</CommandEmpty>
+                  <CommandEmpty>{t("common.no_results")}</CommandEmpty>
                   <CommandGroup>
                     {options.map((opt) => (
                       <CommandItem key={opt.value} value={String(opt.value)} onSelect={() => pick(opt)}>

package/src/commerce/admin/context/SettingsContext.jsx

@@ -8,6 +8,7 @@ import { Label } from "@/components/ui/label";
 import { Loader2, Store } from "lucide-react";
 import { toast } from "sonner";
 import { base44, call } from "../lib/api";
+import { t } from "../i18n";
 
 const SettingsCtx = createContext(null);
 
@@ -118,7 +119,7 @@ function SetupScreen({ onDone }) {
     setSchemaErrors(null);
     try {
       await call("seed-store", null, { with_sample_data: withSample, store_name: storeName.trim() }, { silent: true });
-      toast.success("Store defaults initialized");
+      toast.success(t("setup.success"));
       onDone();
     } catch (err) {
       if (err.code === "schema_incompatible") {
@@ -138,26 +139,19 @@ function SetupScreen({ onDone }) {
           <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
             <Store className="h-5 w-5 text-primary" />
           </div>
-          <CardTitle>Set up your store</CardTitle>
-          <CardDescription>
-            This looks like a fresh installation. Initialize the store with default
-            settings (currency, tax classes, payment methods, shipping zone and
-            email configuration) to start using the admin.
-          </CardDescription>
+          <CardTitle>{t("setup.title")}</CardTitle>
+          <CardDescription>{t("setup.description")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-1.5">
-            <Label htmlFor="store-name">Store name</Label>
+            <Label htmlFor="store-name">{t("setup.store_name")}</Label>
             <Input
               id="store-name"
               value={storeName}
-              placeholder="Your store's name"
+              placeholder={t("setup.store_name_placeholder")}
               onChange={(e) => setStoreName(e.target.value)}
             />
-            <p className="text-xs text-muted-foreground">
-              Used in the subject and as the sender name on every transactional email.
-              Editable later in Settings → Emails.
-            </p>
+            <p className="text-xs text-muted-foreground">{t("setup.store_name_hint")}</p>
           </div>
           {hasProducts === false && (
             <div className="flex items-start gap-2 rounded-md border p-3">
@@ -168,24 +162,17 @@ function SetupScreen({ onDone }) {
               />
               <div className="grid gap-1">
                 <Label htmlFor="with-sample" className="cursor-pointer">
-                  Include sample data
+                  {t("setup.sample_label")}
                 </Label>
-                <p className="text-xs text-muted-foreground">
-                  Adds demo categories, 10 products (three with size/colour variants, one
-                  downloadable) and coupons so you can explore the admin.
-                </p>
+                <p className="text-xs text-muted-foreground">{t("setup.sample_hint")}</p>
               </div>
             </div>
           )}
           {schemaErrors && (
             <Alert variant="destructive">
-              <AlertTitle>Entity schemas are incompatible</AlertTitle>
+              <AlertTitle>{t("setup.schema_error_title")}</AlertTitle>
               <AlertDescription>
-                <p className="mb-2">
-                  The entity schemas in this app have been modified in a way that
-                  prevents seeding. Restore the template schemas or fix the fields
-                  below, then retry.
-                </p>
+                <p className="mb-2">{t("setup.schema_error_description")}</p>
                 <ul className="list-disc space-y-1 pl-4 text-xs">
                   {schemaErrors.map((e, i) => (
                     <li key={i}>
@@ -198,7 +185,7 @@ function SetupScreen({ onDone }) {
           )}
           <Button onClick={run} disabled={running || !storeName.trim()} className="w-full">
             {running && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            Initialize store defaults
+            {t("setup.run")}
           </Button>
         </CardContent>
       </Card>

package/src/commerce/admin/hooks/useMoney.js

@@ -1,11 +1,12 @@
 import { useCallback, useMemo } from "react";
 import { useSettings } from "../context/SettingsContext";
 import { CURRENCIES } from "../lib/constants";
+import { locale } from "../i18n";
 
 /**
  * Currency formatter driven by `general.currency`. Formatting itself is
  * localization's job — Intl.NumberFormat renders the symbol, separators and
- * decimals for the browser locale; there are no format settings.
+ * decimals for the admin's i18n locale; there are no format settings.
  * Returns { format(n), symbol, code, decimals }.
  */
 export default function useMoney() {
@@ -17,7 +18,7 @@ export default function useMoney() {
     const currency = CURRENCIES.find((cc) => cc.code === code);
     let formatter = null;
     try {
-      formatter = new Intl.NumberFormat(undefined, { style: "currency", currency: code });
+      formatter = new Intl.NumberFormat(locale, { style: "currency", currency: code });
     } catch {
       formatter = null; // unknown code — fall back below
     }

package/src/commerce/admin/i18n/index.js

@@ -0,0 +1,54 @@
+/**
+ * Admin UI localization. Every user-visible string in the admin renders
+ * through `t()`; the wording lives in `./locales/<lang>.js` (en, de, es, fr,
+ * ja, pt ship with the plugin; en is the default and the fallback).
+ *
+ * Switching language is a one-line code change: point the `active` import
+ * below at another locale file. There is deliberately no runtime picker — a
+ * store's back office runs in one language.
+ *
+ * Adding a language: copy `./locales/en.js` to `./locales/<code>.js`, set its
+ * `$locale` tag, translate every value (keep `{placeholders}` verbatim), then
+ * point the `active` import at the new file. Missing keys fall back to
+ * English, so a partial file renders mixed rather than broken.
+ */
+import en from "./locales/en.js";
+import active from "./locales/en.js"; // ← the admin's language: "./locales/de.js", "./locales/es.js", "./locales/fr.js", "./locales/ja.js", "./locales/pt.js"
+
+/** BCP-47 tag of the active language — drives Intl date/number/name formatting. */
+export const locale = active.$locale || "en";
+
+/**
+ * Message lookup with `{name}` interpolation: t("x.y", { name: "Ada" }).
+ * Falls back to English, then to the key itself, so an untranslated or
+ * missing key renders readable text instead of throwing.
+ */
+export function t(key, vars) {
+  let s = active[key] ?? en[key] ?? key;
+  if (vars) {
+    for (const k of Object.keys(vars)) s = s.split(`{${k}}`).join(String(vars[k] ?? ""));
+  }
+  return s;
+}
+
+let regionNames;
+/** Country name in the active language via Intl.DisplayNames; `fallback` is the English name. */
+export function countryName(code, fallback) {
+  try {
+    regionNames ||= new Intl.DisplayNames([locale], { type: "region" });
+    return regionNames.of(code) || fallback || code;
+  } catch {
+    return fallback || code;
+  }
+}
+
+let currencyNames;
+/** Currency name in the active language via Intl.DisplayNames; `fallback` is the English name. */
+export function currencyName(code, fallback) {
+  try {
+    currencyNames ||= new Intl.DisplayNames([locale], { type: "currency" });
+    return currencyNames.of(code) || fallback || code;
+  } catch {
+    return fallback || code;
+  }
+}