@marianmeres/stuic 3.106.0 → 3.108.0

package/dist/attachments/auto-height.d.ts

@@ -26,6 +26,13 @@ import type { Attachment } from "svelte/attachments";
  * then a `ResizeObserver` keeps it in sync. With no transition configured, or under
  * `prefers-reduced-motion`, the height simply snaps and nothing is ever clipped.
  *
+ * Resize-driven measures are coalesced to the next animation frame, so the height
+ * write never happens *inside* the `ResizeObserver` delivery cycle. Mutating layout
+ * synchronously in that callback is what triggers the browser's benign-but-noisy
+ * "ResizeObserver loop completed with undelivered notifications" warning; the
+ * one-frame deferral (~16ms, imperceptible against the transition) avoids it. The
+ * initial on-mount measure stays synchronous to keep the height lock before paint.
+ *
  * @example
  * ```svelte
  * <div class="viewport" {@attach autoHeight}>

package/dist/attachments/auto-height.js

@@ -25,6 +25,13 @@
  * then a `ResizeObserver` keeps it in sync. With no transition configured, or under
  * `prefers-reduced-motion`, the height simply snaps and nothing is ever clipped.
  *
+ * Resize-driven measures are coalesced to the next animation frame, so the height
+ * write never happens *inside* the `ResizeObserver` delivery cycle. Mutating layout
+ * synchronously in that callback is what triggers the browser's benign-but-noisy
+ * "ResizeObserver loop completed with undelivered notifications" warning; the
+ * one-frame deferral (~16ms, imperceptible against the transition) avoids it. The
+ * initial on-mount measure stays synchronous to keep the height lock before paint.
+ *
  * @example
  * ```svelte
  * <div class="viewport" {@attach autoHeight}>
@@ -73,13 +80,22 @@ export const autoHeight = (node) => {
         if (e.target === node && e.propertyName === "height")
             node.style.overflow = "";
     };
+    // Defer the resize-driven measure to the next frame so the layout write
+    // never lands inside the ResizeObserver delivery cycle (see top doc comment).
+    let rafId = 0;
+    const scheduleMeasure = () => {
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(measure);
+    };
+    // Initial measure stays synchronous: lock height from `auto` to px before paint.
     measure();
-    const ro = new ResizeObserver(measure);
+    const ro = new ResizeObserver(scheduleMeasure);
     if (node.firstElementChild)
         ro.observe(node.firstElementChild);
     node.addEventListener("transitionend", reveal);
     node.addEventListener("transitioncancel", reveal);
     return () => {
+        cancelAnimationFrame(rafId);
         ro.disconnect();
         node.removeEventListener("transitionend", reveal);
         node.removeEventListener("transitioncancel", reveal);

package/dist/components/Checkout/CheckoutAddressForm.svelte

@@ -1,14 +1,14 @@
 <script lang="ts" module>
+	import type { Country } from "@marianmeres/countries";
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { TranslateFn } from "../../types.js";
+	import type { Props as FieldCountryProps } from "../Input/FieldCountry.svelte";
+	import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
 	import type {
 		CheckoutAddressData,
 		CheckoutValidationError,
 	} from "./_internal/checkout-types.js";
-	import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
-	import type { Props as FieldCountryProps } from "../Input/FieldCountry.svelte";
-	import type { Country } from "../Input/_internal/countries.js";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> {
 		/**
@@ -106,12 +106,12 @@
 		scrollToFirstInvalidField,
 		validateAllFields,
 	} from "../../utils/validate-fields.js";
-	import { t_default } from "./_internal/checkout-i18n-defaults.js";
-	import { createEmptyAddress } from "./_internal/checkout-utils.js";
+	import FieldCountry from "../Input/FieldCountry.svelte";
 	import FieldInput from "../Input/FieldInput.svelte";
 	import FieldPhoneNumber from "../Input/FieldPhoneNumber.svelte";
-	import FieldCountry from "../Input/FieldCountry.svelte";
 	import { validatePhoneNumber } from "../Input/phone-validation.js";
+	import { t_default } from "./_internal/checkout-i18n-defaults.js";
+	import { createEmptyAddress } from "./_internal/checkout-utils.js";
 
 	const DEFAULT_REQUIRED = ["name", "street", "city", "postal_code", "country"];
 

package/dist/components/Checkout/CheckoutAddressForm.svelte.d.ts

@@ -1,10 +1,10 @@
+import type { Country } from "@marianmeres/countries";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
-import type { CheckoutAddressData, CheckoutValidationError } from "./_internal/checkout-types.js";
-import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
 import type { Props as FieldCountryProps } from "../Input/FieldCountry.svelte";
-import type { Country } from "../Input/_internal/countries.js";
+import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
+import type { CheckoutAddressData, CheckoutValidationError } from "./_internal/checkout-types.js";
 export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> {
     /**
      * Bindable address data. Default: createEmptyAddress().

package/dist/components/Input/FieldCountry.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
+	import type { Country } from "@marianmeres/countries";
 	import type { Snippet } from "svelte";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { TranslateFn } from "../../types.js";
 	import type { THC } from "../Thc/Thc.svelte";
-	import type { Country } from "./_internal/countries.js";
 	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
@@ -26,11 +26,33 @@
 
 		/**
 		 * Override displayed country names. Keys are ISO alpha-2 codes,
-		 * values are the localized name. Missing keys fall back to the English
-		 * name from countries.ts.
+		 * values are the localized name. Takes precedence over `locale`; missing
+		 * keys fall back to the locale-resolved name (then the English name).
 		 */
 		countryNames?: Record<string, string>;
 
+		/**
+		 * Display country names in this locale (ISO 639-1 code, e.g. "sk").
+		 * Resolved via @marianmeres/countries' built-in locales.
+		 *
+		 * Locales load lazily (code-split), so by default names render in
+		 * English for one frame until the chunk arrives. To avoid that flash,
+		 * make the locale synchronously available before this field renders —
+		 * either register it once at app startup:
+		 *
+		 * ```ts
+		 * import { registerLocale } from "@marianmeres/countries";
+		 * import sk from "@marianmeres/countries/locales/sk";
+		 * registerLocale("sk", sk);
+		 * ```
+		 *
+		 * …or skip the `locale` prop entirely and pass the statically-imported
+		 * map straight to `countryNames={sk}` (it's keyed by ISO code).
+		 *
+		 * Default: "en". Overridden per-country by `countryNames`.
+		 */
+		locale?: string;
+
 		/** Show country flag emoji in dropdown items. Default: true. */
 		flags?: boolean;
 
@@ -68,21 +90,28 @@
 </script>
 
 <script lang="ts">
+	import {
+		COUNTRIES,
+		DEFAULT_LOCALE,
+		ISO_MAP,
+		getName,
+		hasLocale,
+		loadLocale,
+	} from "@marianmeres/countries";
 	import { tick } from "svelte";
 	import {
 		validate as validateAction,
 		type ValidationResult,
 	} from "../../actions/validate.svelte.js";
+	import { iconChevronDown } from "../../icons/index.js";
 	import { getId } from "../../utils/get-id.js";
 	import { twMerge } from "../../utils/tw-merge.js";
-	import { iconChevronDown } from "../../icons/index.js";
 	import DropdownMenu, {
 		type DropdownMenuActionItem,
 		type DropdownMenuItem,
 		type DropdownMenuSearchConfig,
 	} from "../DropdownMenu/DropdownMenu.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
-	import { COUNTRIES, ISO_MAP } from "./_internal/countries.js";
 
 	let {
 		value = $bindable(""),
@@ -90,6 +119,7 @@
 		countryList: countryListProp,
 		preferredCountries,
 		countryNames,
+		locale = DEFAULT_LOCALE,
 		flags = true,
 		//
 		name,
@@ -171,8 +201,32 @@
 		});
 	}
 
+	// Reactive marker: bumps once the requested locale is registered, so the
+	// derived names below recompute. The locale registry in @marianmeres/countries
+	// is plain module state, not a Svelte reactive source, hence this $state tick.
+	let localeLoaded = $state(DEFAULT_LOCALE);
+	$effect(() => {
+		const code = locale;
+		if (hasLocale(code)) {
+			localeLoaded = code;
+			return;
+		}
+		let cancelled = false;
+		loadLocale(code)
+			.then(() => {
+				if (!cancelled) localeLoaded = code;
+			})
+			.catch(() => {
+				if (!cancelled) localeLoaded = DEFAULT_LOCALE;
+			});
+		return () => {
+			cancelled = true;
+		};
+	});
+
 	function localizedName(c: Country): string {
-		return countryNames?.[c.iso] ?? c.name;
+		void localeLoaded; // establish reactive dependency on locale load
+		return countryNames?.[c.iso] ?? getName(c.iso, locale) ?? c.name;
 	}
 
 	// Resolve the working country list (accept ISO codes or Country objects).
@@ -180,9 +234,7 @@
 		if (!countryListProp) return COUNTRIES;
 		if (countryListProp.length === 0) return [];
 		if (typeof countryListProp[0] === "string") {
-			const set = new Set(
-				(countryListProp as string[]).map((c) => c.toUpperCase())
-			);
+			const set = new Set((countryListProp as string[]).map((c) => c.toUpperCase()));
 			return COUNTRIES.filter((c) => set.has(c.iso));
 		}
 		return countryListProp as Country[];
@@ -223,9 +275,7 @@
 
 	let items: DropdownMenuItem[] = $derived.by(() => {
 		const result: DropdownMenuItem[] = [];
-		const preferredSet = new Set(
-			preferredCountries?.map((c) => c.toUpperCase()) ?? []
-		);
+		const preferredSet = new Set(preferredCountries?.map((c) => c.toUpperCase()) ?? []);
 
 		if (preferredSet.size > 0) {
 			// Preserve the order given in `preferredCountries`.
@@ -260,8 +310,7 @@
 			return `${localized} ${c.name} ${c.iso}`;
 		},
 		autoFocus: true,
-		noResultsMessage:
-			t?.("checkout.address.country_no_results") || "No country found",
+		noResultsMessage: t?.("checkout.address.country_no_results") || "No country found",
 	});
 
 	let triggerText = $derived.by(() => {

package/dist/components/Input/FieldCountry.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { Country } from "@marianmeres/countries";
 import type { Snippet } from "svelte";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import type { THC } from "../Thc/Thc.svelte";
-import type { Country } from "./_internal/countries.js";
 import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
@@ -21,10 +21,31 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     preferredCountries?: string[];
     /**
      * Override displayed country names. Keys are ISO alpha-2 codes,
-     * values are the localized name. Missing keys fall back to the English
-     * name from countries.ts.
+     * values are the localized name. Takes precedence over `locale`; missing
+     * keys fall back to the locale-resolved name (then the English name).
      */
     countryNames?: Record<string, string>;
+    /**
+     * Display country names in this locale (ISO 639-1 code, e.g. "sk").
+     * Resolved via @marianmeres/countries' built-in locales.
+     *
+     * Locales load lazily (code-split), so by default names render in
+     * English for one frame until the chunk arrives. To avoid that flash,
+     * make the locale synchronously available before this field renders —
+     * either register it once at app startup:
+     *
+     * ```ts
+     * import { registerLocale } from "@marianmeres/countries";
+     * import sk from "@marianmeres/countries/locales/sk";
+     * registerLocale("sk", sk);
+     * ```
+     *
+     * …or skip the `locale` prop entirely and pass the statically-imported
+     * map straight to `countryNames={sk}` (it's keyed by ISO code).
+     *
+     * Default: "en". Overridden per-country by `countryNames`.
+     */
+    locale?: string;
     /** Show country flag emoji in dropdown items. Default: true. */
     flags?: boolean;
     /** Hidden input name (enables form submission + validation). */

package/dist/components/Input/FieldPhoneNumber.svelte

@@ -59,6 +59,13 @@
 </script>
 
 <script lang="ts">
+	import {
+		COUNTRIES,
+		DIAL_CODES_DESC,
+		DIAL_CODE_MAP,
+		ISO_MAP,
+		type Country,
+	} from "@marianmeres/countries";
 	import { tick, untrack } from "svelte";
 	import {
 		validate as validateAction,
@@ -68,13 +75,6 @@
 	import { twMerge } from "../../utils/tw-merge.js";
 	import InputWrap from "./_internal/InputWrap.svelte";
 	import PhonePrefixPicker from "./_internal/PhonePrefixPicker.svelte";
-	import {
-		COUNTRIES,
-		ISO_MAP,
-		DIAL_CODES_DESC,
-		DIAL_CODE_MAP,
-		type Country,
-	} from "./_internal/countries.js";
 	import { validatePhoneNumber } from "./phone-validation.js";
 
 	let {
@@ -173,7 +173,9 @@
 
 	// Selected country object (initialize once from defaultCountry prop)
 	let selectedCountry: Country | undefined = $state(
-		untrack(() => (defaultCountry ? ISO_MAP.get(defaultCountry.toUpperCase()) : undefined))
+		untrack(() =>
+			defaultCountry ? ISO_MAP.get(defaultCountry.toUpperCase()) : undefined
+		)
 	);
 
 	// Internal local number (for controlled input)

package/dist/components/Input/_internal/PhonePrefixPicker.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { twMerge } from "../../../utils/tw-merge.js";
+	import { type Country, ISO_MAP } from "@marianmeres/countries";
 	import { iconChevronDown } from "../../../icons/index.js";
+	import { twMerge } from "../../../utils/tw-merge.js";
 	import DropdownMenu, {
 		type DropdownMenuActionItem,
 		type DropdownMenuItem,
 		type DropdownMenuSearchConfig,
 	} from "../../DropdownMenu/DropdownMenu.svelte";
-	import { type Country, ISO_MAP } from "./countries.js";
 
 	interface Props {
 		selectedCountry?: Country;

package/dist/components/Input/_internal/PhonePrefixPicker.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Country } from "./countries.js";
+import { type Country } from "@marianmeres/countries";
 interface Props {
     selectedCountry?: Country;
     countryList: Country[];

package/dist/components/Input/index.d.ts

@@ -16,4 +16,3 @@ export { default as FieldObject, type Props as FieldObjectProps, } from "./Field
 export { default as FieldPhoneNumber, type Props as FieldPhoneNumberProps, } from "./FieldPhoneNumber.svelte";
 export { default as FieldCountry, type Props as FieldCountryProps, } from "./FieldCountry.svelte";
 export { validatePhoneNumber } from "./phone-validation.js";
-export { type Country, COUNTRIES, ISO_MAP } from "./_internal/countries.js";

package/dist/components/Input/index.js

@@ -16,4 +16,3 @@ export { default as FieldObject, } from "./FieldObject.svelte";
 export { default as FieldPhoneNumber, } from "./FieldPhoneNumber.svelte";
 export { default as FieldCountry, } from "./FieldCountry.svelte";
 export { validatePhoneNumber } from "./phone-validation.js";
-export { COUNTRIES, ISO_MAP } from "./_internal/countries.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.106.0",
+	"version": "3.108.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",
@@ -53,7 +53,7 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.39.4",
-		"@marianmeres/random-human-readable": "^1.9.0",
+		"@marianmeres/random-human-readable": "^1.10.2",
 		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.61.1",
 		"@sveltejs/package": "^2.5.7",
@@ -70,16 +70,17 @@
 		"prettier-plugin-svelte": "^3.5.2",
 		"publint": "^0.3.21",
 		"svelte": "^5.56.0",
-		"svelte-check": "^4.4.8",
+		"svelte-check": "^4.5.0",
 		"tailwindcss": "^4.3.0",
-		"tsx": "^4.22.3",
+		"tsx": "^4.22.4",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.60.0",
-		"vite": "^7.3.3",
-		"vitest": "^3.2.4"
+		"vite": "^7.3.5",
+		"vitest": "^3.2.6"
 	},
 	"dependencies": {
 		"@marianmeres/clog": "^3.21.0",
+		"@marianmeres/countries": "^1.0.1",
 		"@marianmeres/cron": "^2.0.1",
 		"@marianmeres/design-tokens": "^1.8.0",
 		"@marianmeres/icons-fns": "^5.0.0",

package/dist/components/Input/_internal/countries.d.ts

@@ -1,20 +0,0 @@
-export interface Country {
-    /** ISO 3166-1 alpha-2 code, e.g. "SK" */
-    iso: string;
-    /** Country name in English, e.g. "Slovakia" */
-    name: string;
-    /** Dial code without leading +, e.g. "421" */
-    dialCode: string;
-    /** Country flag emoji, e.g. "🇸🇰" */
-    flag: string;
-}
-export declare const COUNTRIES: Country[];
-/** Lookup map: ISO code -> Country */
-export declare const ISO_MAP: Map<string, Country>;
-/** Lookup map: dial code -> Country[]. Multiple countries can share a code (e.g. +1). */
-export declare const DIAL_CODE_MAP: Map<string, Country[]>;
-/**
- * Sorted list of unique dial codes (longest first) for prefix detection during paste.
- * Longest-first ensures we match "+1684" (American Samoa) before "+1" (US).
- */
-export declare const DIAL_CODES_DESC: string[];

package/dist/components/Input/_internal/countries.js

@@ -1,252 +0,0 @@
-// prettier-ignore
-export const COUNTRIES = [
-    { iso: "AF", name: "Afghanistan", dialCode: "93", flag: "🇦🇫" },
-    { iso: "AL", name: "Albania", dialCode: "355", flag: "🇦🇱" },
-    { iso: "DZ", name: "Algeria", dialCode: "213", flag: "🇩🇿" },
-    { iso: "AS", name: "American Samoa", dialCode: "1684", flag: "🇦🇸" },
-    { iso: "AD", name: "Andorra", dialCode: "376", flag: "🇦🇩" },
-    { iso: "AO", name: "Angola", dialCode: "244", flag: "🇦🇴" },
-    { iso: "AI", name: "Anguilla", dialCode: "1264", flag: "🇦🇮" },
-    { iso: "AG", name: "Antigua and Barbuda", dialCode: "1268", flag: "🇦🇬" },
-    { iso: "AR", name: "Argentina", dialCode: "54", flag: "🇦🇷" },
-    { iso: "AM", name: "Armenia", dialCode: "374", flag: "🇦🇲" },
-    { iso: "AW", name: "Aruba", dialCode: "297", flag: "🇦🇼" },
-    { iso: "AU", name: "Australia", dialCode: "61", flag: "🇦🇺" },
-    { iso: "AT", name: "Austria", dialCode: "43", flag: "🇦🇹" },
-    { iso: "AZ", name: "Azerbaijan", dialCode: "994", flag: "🇦🇿" },
-    { iso: "BS", name: "Bahamas", dialCode: "1242", flag: "🇧🇸" },
-    { iso: "BH", name: "Bahrain", dialCode: "973", flag: "🇧🇭" },
-    { iso: "BD", name: "Bangladesh", dialCode: "880", flag: "🇧🇩" },
-    { iso: "BB", name: "Barbados", dialCode: "1246", flag: "🇧🇧" },
-    { iso: "BY", name: "Belarus", dialCode: "375", flag: "🇧🇾" },
-    { iso: "BE", name: "Belgium", dialCode: "32", flag: "🇧🇪" },
-    { iso: "BZ", name: "Belize", dialCode: "501", flag: "🇧🇿" },
-    { iso: "BJ", name: "Benin", dialCode: "229", flag: "🇧🇯" },
-    { iso: "BM", name: "Bermuda", dialCode: "1441", flag: "🇧🇲" },
-    { iso: "BT", name: "Bhutan", dialCode: "975", flag: "🇧🇹" },
-    { iso: "BO", name: "Bolivia", dialCode: "591", flag: "🇧🇴" },
-    { iso: "BA", name: "Bosnia and Herzegovina", dialCode: "387", flag: "🇧🇦" },
-    { iso: "BW", name: "Botswana", dialCode: "267", flag: "🇧🇼" },
-    { iso: "BR", name: "Brazil", dialCode: "55", flag: "🇧🇷" },
-    { iso: "IO", name: "British Indian Ocean Territory", dialCode: "246", flag: "🇮🇴" },
-    { iso: "VG", name: "British Virgin Islands", dialCode: "1284", flag: "🇻🇬" },
-    { iso: "BN", name: "Brunei", dialCode: "673", flag: "🇧🇳" },
-    { iso: "BG", name: "Bulgaria", dialCode: "359", flag: "🇧🇬" },
-    { iso: "BF", name: "Burkina Faso", dialCode: "226", flag: "🇧🇫" },
-    { iso: "BI", name: "Burundi", dialCode: "257", flag: "🇧🇮" },
-    { iso: "KH", name: "Cambodia", dialCode: "855", flag: "🇰🇭" },
-    { iso: "CM", name: "Cameroon", dialCode: "237", flag: "🇨🇲" },
-    { iso: "CA", name: "Canada", dialCode: "1", flag: "🇨🇦" },
-    { iso: "CV", name: "Cape Verde", dialCode: "238", flag: "🇨🇻" },
-    { iso: "KY", name: "Cayman Islands", dialCode: "1345", flag: "🇰🇾" },
-    { iso: "CF", name: "Central African Republic", dialCode: "236", flag: "🇨🇫" },
-    { iso: "TD", name: "Chad", dialCode: "235", flag: "🇹🇩" },
-    { iso: "CL", name: "Chile", dialCode: "56", flag: "🇨🇱" },
-    { iso: "CN", name: "China", dialCode: "86", flag: "🇨🇳" },
-    { iso: "CO", name: "Colombia", dialCode: "57", flag: "🇨🇴" },
-    { iso: "KM", name: "Comoros", dialCode: "269", flag: "🇰🇲" },
-    { iso: "CK", name: "Cook Islands", dialCode: "682", flag: "🇨🇰" },
-    { iso: "CR", name: "Costa Rica", dialCode: "506", flag: "🇨🇷" },
-    { iso: "HR", name: "Croatia", dialCode: "385", flag: "🇭🇷" },
-    { iso: "CU", name: "Cuba", dialCode: "53", flag: "🇨🇺" },
-    { iso: "CW", name: "Curaçao", dialCode: "599", flag: "🇨🇼" },
-    { iso: "CY", name: "Cyprus", dialCode: "357", flag: "🇨🇾" },
-    { iso: "CZ", name: "Czech Republic", dialCode: "420", flag: "🇨🇿" },
-    { iso: "CD", name: "Democratic Republic of the Congo", dialCode: "243", flag: "🇨🇩" },
-    { iso: "DK", name: "Denmark", dialCode: "45", flag: "🇩🇰" },
-    { iso: "DJ", name: "Djibouti", dialCode: "253", flag: "🇩🇯" },
-    { iso: "DM", name: "Dominica", dialCode: "1767", flag: "🇩🇲" },
-    { iso: "DO", name: "Dominican Republic", dialCode: "1809", flag: "🇩🇴" },
-    { iso: "EC", name: "Ecuador", dialCode: "593", flag: "🇪🇨" },
-    { iso: "EG", name: "Egypt", dialCode: "20", flag: "🇪🇬" },
-    { iso: "SV", name: "El Salvador", dialCode: "503", flag: "🇸🇻" },
-    { iso: "GQ", name: "Equatorial Guinea", dialCode: "240", flag: "🇬🇶" },
-    { iso: "ER", name: "Eritrea", dialCode: "291", flag: "🇪🇷" },
-    { iso: "EE", name: "Estonia", dialCode: "372", flag: "🇪🇪" },
-    { iso: "SZ", name: "Eswatini", dialCode: "268", flag: "🇸🇿" },
-    { iso: "ET", name: "Ethiopia", dialCode: "251", flag: "🇪🇹" },
-    { iso: "FK", name: "Falkland Islands", dialCode: "500", flag: "🇫🇰" },
-    { iso: "FO", name: "Faroe Islands", dialCode: "298", flag: "🇫🇴" },
-    { iso: "FJ", name: "Fiji", dialCode: "679", flag: "🇫🇯" },
-    { iso: "FI", name: "Finland", dialCode: "358", flag: "🇫🇮" },
-    { iso: "FR", name: "France", dialCode: "33", flag: "🇫🇷" },
-    { iso: "GF", name: "French Guiana", dialCode: "594", flag: "🇬🇫" },
-    { iso: "PF", name: "French Polynesia", dialCode: "689", flag: "🇵🇫" },
-    { iso: "GA", name: "Gabon", dialCode: "241", flag: "🇬🇦" },
-    { iso: "GM", name: "Gambia", dialCode: "220", flag: "🇬🇲" },
-    { iso: "GE", name: "Georgia", dialCode: "995", flag: "🇬🇪" },
-    { iso: "DE", name: "Germany", dialCode: "49", flag: "🇩🇪" },
-    { iso: "GH", name: "Ghana", dialCode: "233", flag: "🇬🇭" },
-    { iso: "GI", name: "Gibraltar", dialCode: "350", flag: "🇬🇮" },
-    { iso: "GR", name: "Greece", dialCode: "30", flag: "🇬🇷" },
-    { iso: "GL", name: "Greenland", dialCode: "299", flag: "🇬🇱" },
-    { iso: "GD", name: "Grenada", dialCode: "1473", flag: "🇬🇩" },
-    { iso: "GP", name: "Guadeloupe", dialCode: "590", flag: "🇬🇵" },
-    { iso: "GU", name: "Guam", dialCode: "1671", flag: "🇬🇺" },
-    { iso: "GT", name: "Guatemala", dialCode: "502", flag: "🇬🇹" },
-    { iso: "GG", name: "Guernsey", dialCode: "44", flag: "🇬🇬" },
-    { iso: "GN", name: "Guinea", dialCode: "224", flag: "🇬🇳" },
-    { iso: "GW", name: "Guinea-Bissau", dialCode: "245", flag: "🇬🇼" },
-    { iso: "GY", name: "Guyana", dialCode: "592", flag: "🇬🇾" },
-    { iso: "HT", name: "Haiti", dialCode: "509", flag: "🇭🇹" },
-    { iso: "HN", name: "Honduras", dialCode: "504", flag: "🇭🇳" },
-    { iso: "HK", name: "Hong Kong", dialCode: "852", flag: "🇭🇰" },
-    { iso: "HU", name: "Hungary", dialCode: "36", flag: "🇭🇺" },
-    { iso: "IS", name: "Iceland", dialCode: "354", flag: "🇮🇸" },
-    { iso: "IN", name: "India", dialCode: "91", flag: "🇮🇳" },
-    { iso: "ID", name: "Indonesia", dialCode: "62", flag: "🇮🇩" },
-    { iso: "IR", name: "Iran", dialCode: "98", flag: "🇮🇷" },
-    { iso: "IQ", name: "Iraq", dialCode: "964", flag: "🇮🇶" },
-    { iso: "IE", name: "Ireland", dialCode: "353", flag: "🇮🇪" },
-    { iso: "IM", name: "Isle of Man", dialCode: "44", flag: "🇮🇲" },
-    { iso: "IL", name: "Israel", dialCode: "972", flag: "🇮🇱" },
-    { iso: "IT", name: "Italy", dialCode: "39", flag: "🇮🇹" },
-    { iso: "CI", name: "Ivory Coast", dialCode: "225", flag: "🇨🇮" },
-    { iso: "JM", name: "Jamaica", dialCode: "1876", flag: "🇯🇲" },
-    { iso: "JP", name: "Japan", dialCode: "81", flag: "🇯🇵" },
-    { iso: "JE", name: "Jersey", dialCode: "44", flag: "🇯🇪" },
-    { iso: "JO", name: "Jordan", dialCode: "962", flag: "🇯🇴" },
-    { iso: "KZ", name: "Kazakhstan", dialCode: "7", flag: "🇰🇿" },
-    { iso: "KE", name: "Kenya", dialCode: "254", flag: "🇰🇪" },
-    { iso: "KI", name: "Kiribati", dialCode: "686", flag: "🇰🇮" },
-    { iso: "XK", name: "Kosovo", dialCode: "383", flag: "🇽🇰" },
-    { iso: "KW", name: "Kuwait", dialCode: "965", flag: "🇰🇼" },
-    { iso: "KG", name: "Kyrgyzstan", dialCode: "996", flag: "🇰🇬" },
-    { iso: "LA", name: "Laos", dialCode: "856", flag: "🇱🇦" },
-    { iso: "LV", name: "Latvia", dialCode: "371", flag: "🇱🇻" },
-    { iso: "LB", name: "Lebanon", dialCode: "961", flag: "🇱🇧" },
-    { iso: "LS", name: "Lesotho", dialCode: "266", flag: "🇱🇸" },
-    { iso: "LR", name: "Liberia", dialCode: "231", flag: "🇱🇷" },
-    { iso: "LY", name: "Libya", dialCode: "218", flag: "🇱🇾" },
-    { iso: "LI", name: "Liechtenstein", dialCode: "423", flag: "🇱🇮" },
-    { iso: "LT", name: "Lithuania", dialCode: "370", flag: "🇱🇹" },
-    { iso: "LU", name: "Luxembourg", dialCode: "352", flag: "🇱🇺" },
-    { iso: "MO", name: "Macau", dialCode: "853", flag: "🇲🇴" },
-    { iso: "MG", name: "Madagascar", dialCode: "261", flag: "🇲🇬" },
-    { iso: "MW", name: "Malawi", dialCode: "265", flag: "🇲🇼" },
-    { iso: "MY", name: "Malaysia", dialCode: "60", flag: "🇲🇾" },
-    { iso: "MV", name: "Maldives", dialCode: "960", flag: "🇲🇻" },
-    { iso: "ML", name: "Mali", dialCode: "223", flag: "🇲🇱" },
-    { iso: "MT", name: "Malta", dialCode: "356", flag: "🇲🇹" },
-    { iso: "MH", name: "Marshall Islands", dialCode: "692", flag: "🇲🇭" },
-    { iso: "MQ", name: "Martinique", dialCode: "596", flag: "🇲🇶" },
-    { iso: "MR", name: "Mauritania", dialCode: "222", flag: "🇲🇷" },
-    { iso: "MU", name: "Mauritius", dialCode: "230", flag: "🇲🇺" },
-    { iso: "YT", name: "Mayotte", dialCode: "262", flag: "🇾🇹" },
-    { iso: "MX", name: "Mexico", dialCode: "52", flag: "🇲🇽" },
-    { iso: "FM", name: "Micronesia", dialCode: "691", flag: "🇫🇲" },
-    { iso: "MD", name: "Moldova", dialCode: "373", flag: "🇲🇩" },
-    { iso: "MC", name: "Monaco", dialCode: "377", flag: "🇲🇨" },
-    { iso: "MN", name: "Mongolia", dialCode: "976", flag: "🇲🇳" },
-    { iso: "ME", name: "Montenegro", dialCode: "382", flag: "🇲🇪" },
-    { iso: "MS", name: "Montserrat", dialCode: "1664", flag: "🇲🇸" },
-    { iso: "MA", name: "Morocco", dialCode: "212", flag: "🇲🇦" },
-    { iso: "MZ", name: "Mozambique", dialCode: "258", flag: "🇲🇿" },
-    { iso: "MM", name: "Myanmar", dialCode: "95", flag: "🇲🇲" },
-    { iso: "NA", name: "Namibia", dialCode: "264", flag: "🇳🇦" },
-    { iso: "NR", name: "Nauru", dialCode: "674", flag: "🇳🇷" },
-    { iso: "NP", name: "Nepal", dialCode: "977", flag: "🇳🇵" },
-    { iso: "NL", name: "Netherlands", dialCode: "31", flag: "🇳🇱" },
-    { iso: "NC", name: "New Caledonia", dialCode: "687", flag: "🇳🇨" },
-    { iso: "NZ", name: "New Zealand", dialCode: "64", flag: "🇳🇿" },
-    { iso: "NI", name: "Nicaragua", dialCode: "505", flag: "🇳🇮" },
-    { iso: "NE", name: "Niger", dialCode: "227", flag: "🇳🇪" },
-    { iso: "NG", name: "Nigeria", dialCode: "234", flag: "🇳🇬" },
-    { iso: "NU", name: "Niue", dialCode: "683", flag: "🇳🇺" },
-    { iso: "NF", name: "Norfolk Island", dialCode: "672", flag: "🇳🇫" },
-    { iso: "KP", name: "North Korea", dialCode: "850", flag: "🇰🇵" },
-    { iso: "MK", name: "North Macedonia", dialCode: "389", flag: "🇲🇰" },
-    { iso: "MP", name: "Northern Mariana Islands", dialCode: "1670", flag: "🇲🇵" },
-    { iso: "NO", name: "Norway", dialCode: "47", flag: "🇳🇴" },
-    { iso: "OM", name: "Oman", dialCode: "968", flag: "🇴🇲" },
-    { iso: "PK", name: "Pakistan", dialCode: "92", flag: "🇵🇰" },
-    { iso: "PW", name: "Palau", dialCode: "680", flag: "🇵🇼" },
-    { iso: "PS", name: "Palestine", dialCode: "970", flag: "🇵🇸" },
-    { iso: "PA", name: "Panama", dialCode: "507", flag: "🇵🇦" },
-    { iso: "PG", name: "Papua New Guinea", dialCode: "675", flag: "🇵🇬" },
-    { iso: "PY", name: "Paraguay", dialCode: "595", flag: "🇵🇾" },
-    { iso: "PE", name: "Peru", dialCode: "51", flag: "🇵🇪" },
-    { iso: "PH", name: "Philippines", dialCode: "63", flag: "🇵🇭" },
-    { iso: "PL", name: "Poland", dialCode: "48", flag: "🇵🇱" },
-    { iso: "PT", name: "Portugal", dialCode: "351", flag: "🇵🇹" },
-    { iso: "PR", name: "Puerto Rico", dialCode: "1787", flag: "🇵🇷" },
-    { iso: "QA", name: "Qatar", dialCode: "974", flag: "🇶🇦" },
-    { iso: "CG", name: "Republic of the Congo", dialCode: "242", flag: "🇨🇬" },
-    { iso: "RE", name: "Réunion", dialCode: "262", flag: "🇷🇪" },
-    { iso: "RO", name: "Romania", dialCode: "40", flag: "🇷🇴" },
-    { iso: "RU", name: "Russia", dialCode: "7", flag: "🇷🇺" },
-    { iso: "RW", name: "Rwanda", dialCode: "250", flag: "🇷🇼" },
-    { iso: "KN", name: "Saint Kitts and Nevis", dialCode: "1869", flag: "🇰🇳" },
-    { iso: "LC", name: "Saint Lucia", dialCode: "1758", flag: "🇱🇨" },
-    { iso: "PM", name: "Saint Pierre and Miquelon", dialCode: "508", flag: "🇵🇲" },
-    { iso: "VC", name: "Saint Vincent and the Grenadines", dialCode: "1784", flag: "🇻🇨" },
-    { iso: "WS", name: "Samoa", dialCode: "685", flag: "🇼🇸" },
-    { iso: "SM", name: "San Marino", dialCode: "378", flag: "🇸🇲" },
-    { iso: "ST", name: "São Tomé and Príncipe", dialCode: "239", flag: "🇸🇹" },
-    { iso: "SA", name: "Saudi Arabia", dialCode: "966", flag: "🇸🇦" },
-    { iso: "SN", name: "Senegal", dialCode: "221", flag: "🇸🇳" },
-    { iso: "RS", name: "Serbia", dialCode: "381", flag: "🇷🇸" },
-    { iso: "SC", name: "Seychelles", dialCode: "248", flag: "🇸🇨" },
-    { iso: "SL", name: "Sierra Leone", dialCode: "232", flag: "🇸🇱" },
-    { iso: "SG", name: "Singapore", dialCode: "65", flag: "🇸🇬" },
-    { iso: "SX", name: "Sint Maarten", dialCode: "1721", flag: "🇸🇽" },
-    { iso: "SK", name: "Slovakia", dialCode: "421", flag: "🇸🇰" },
-    { iso: "SI", name: "Slovenia", dialCode: "386", flag: "🇸🇮" },
-    { iso: "SB", name: "Solomon Islands", dialCode: "677", flag: "🇸🇧" },
-    { iso: "SO", name: "Somalia", dialCode: "252", flag: "🇸🇴" },
-    { iso: "ZA", name: "South Africa", dialCode: "27", flag: "🇿🇦" },
-    { iso: "KR", name: "South Korea", dialCode: "82", flag: "🇰🇷" },
-    { iso: "SS", name: "South Sudan", dialCode: "211", flag: "🇸🇸" },
-    { iso: "ES", name: "Spain", dialCode: "34", flag: "🇪🇸" },
-    { iso: "LK", name: "Sri Lanka", dialCode: "94", flag: "🇱🇰" },
-    { iso: "SD", name: "Sudan", dialCode: "249", flag: "🇸🇩" },
-    { iso: "SR", name: "Suriname", dialCode: "597", flag: "🇸🇷" },
-    { iso: "SE", name: "Sweden", dialCode: "46", flag: "🇸🇪" },
-    { iso: "CH", name: "Switzerland", dialCode: "41", flag: "🇨🇭" },
-    { iso: "SY", name: "Syria", dialCode: "963", flag: "🇸🇾" },
-    { iso: "TW", name: "Taiwan", dialCode: "886", flag: "🇹🇼" },
-    { iso: "TJ", name: "Tajikistan", dialCode: "992", flag: "🇹🇯" },
-    { iso: "TZ", name: "Tanzania", dialCode: "255", flag: "🇹🇿" },
-    { iso: "TH", name: "Thailand", dialCode: "66", flag: "🇹🇭" },
-    { iso: "TL", name: "Timor-Leste", dialCode: "670", flag: "🇹🇱" },
-    { iso: "TG", name: "Togo", dialCode: "228", flag: "🇹🇬" },
-    { iso: "TK", name: "Tokelau", dialCode: "690", flag: "🇹🇰" },
-    { iso: "TO", name: "Tonga", dialCode: "676", flag: "🇹🇴" },
-    { iso: "TT", name: "Trinidad and Tobago", dialCode: "1868", flag: "🇹🇹" },
-    { iso: "TN", name: "Tunisia", dialCode: "216", flag: "🇹🇳" },
-    { iso: "TR", name: "Turkey", dialCode: "90", flag: "🇹🇷" },
-    { iso: "TM", name: "Turkmenistan", dialCode: "993", flag: "🇹🇲" },
-    { iso: "TC", name: "Turks and Caicos Islands", dialCode: "1649", flag: "🇹🇨" },
-    { iso: "TV", name: "Tuvalu", dialCode: "688", flag: "🇹🇻" },
-    { iso: "VI", name: "U.S. Virgin Islands", dialCode: "1340", flag: "🇻🇮" },
-    { iso: "UG", name: "Uganda", dialCode: "256", flag: "🇺🇬" },
-    { iso: "UA", name: "Ukraine", dialCode: "380", flag: "🇺🇦" },
-    { iso: "AE", name: "United Arab Emirates", dialCode: "971", flag: "🇦🇪" },
-    { iso: "GB", name: "United Kingdom", dialCode: "44", flag: "🇬🇧" },
-    { iso: "US", name: "United States", dialCode: "1", flag: "🇺🇸" },
-    { iso: "UY", name: "Uruguay", dialCode: "598", flag: "🇺🇾" },
-    { iso: "UZ", name: "Uzbekistan", dialCode: "998", flag: "🇺🇿" },
-    { iso: "VU", name: "Vanuatu", dialCode: "678", flag: "🇻🇺" },
-    { iso: "VA", name: "Vatican City", dialCode: "379", flag: "🇻🇦" },
-    { iso: "VE", name: "Venezuela", dialCode: "58", flag: "🇻🇪" },
-    { iso: "VN", name: "Vietnam", dialCode: "84", flag: "🇻🇳" },
-    { iso: "WF", name: "Wallis and Futuna", dialCode: "681", flag: "🇼🇫" },
-    { iso: "YE", name: "Yemen", dialCode: "967", flag: "🇾🇪" },
-    { iso: "ZM", name: "Zambia", dialCode: "260", flag: "🇿🇲" },
-    { iso: "ZW", name: "Zimbabwe", dialCode: "263", flag: "🇿🇼" },
-];
-/** Lookup map: ISO code -> Country */
-export const ISO_MAP = new Map();
-COUNTRIES.forEach((c) => ISO_MAP.set(c.iso, c));
-/** Lookup map: dial code -> Country[]. Multiple countries can share a code (e.g. +1). */
-export const DIAL_CODE_MAP = new Map();
-COUNTRIES.forEach((c) => {
-    const arr = DIAL_CODE_MAP.get(c.dialCode) || [];
-    arr.push(c);
-    DIAL_CODE_MAP.set(c.dialCode, arr);
-});
-/**
- * Sorted list of unique dial codes (longest first) for prefix detection during paste.
- * Longest-first ensures we match "+1684" (American Samoa) before "+1" (US).
- */
-export const DIAL_CODES_DESC = [...new Set(COUNTRIES.map((c) => c.dialCode))].sort((a, b) => b.length - a.length);