feat(i18n): country/phone/timezone/subdivision primitives + form wiring

Cross-cutting i18n polish for forms across the marina + residential + company
domains. Introduces a single source of truth for country/phone/timezone/
subdivision data and replaces every nationality-as-free-text and timezone-
as-string Input with a dedicated combobox.

PR1  Countries — ALL_COUNTRY_CODES (~250 ISO-3166-1 alpha-2), Intl.DisplayNames
     for localized labels, detectDefaultCountry() with navigator-region
     fallback to US, CountryCombobox with regional-indicator flag glyphs +
     compact mode for inline use.
PR2  Phone — libphonenumber-js wrapper (parsePhone / formatAsYouType /
     callingCodeFor), PhoneInput with flag dropdown + national-format
     AsYouType + paste-detect that flips the country dropdown for pasted
     international strings.
PR3  Timezones — country->IANA map (250 entries, multi-zone for AU/BR/CA/CD/
     ID/KZ/MN/MX/RU/US), formatTimezoneLabel ("Europe/London (UTC+1)"),
     TimezoneCombobox with Suggested/All grouping driven by countryHint.
PR4  Subdivisions — wraps the iso-3166-2 npm package (~5000 ISO 3166-2
     codes for every country), per-country cache, SubdivisionCombobox with
     "Pick a country first" / "No regions available" empty states.
PR5  Schema deltas (migration 0015) — clients.nationality_iso, clientContacts
     {value_e164, value_country}, clientAddresses {country_iso, subdivision_iso},
     residentialClients {phone_e164, phone_country, nationality_iso, timezone,
     place_of_residence_country_iso, subdivision_iso}, companies {incorporation_
     country_iso, incorporation_subdivision_iso}, companyAddresses {country_iso,
     subdivision_iso}. Plus shared zod validators (validators/i18n.ts) used
     by every entity validator + route handler.
PR6  ClientForm + ClientDetail — CountryCombobox replaces nationality Input,
     TimezoneCombobox replaces timezone Input (driven by nationalityIso hint),
     PhoneInput conditionally rendered for phone/whatsapp contacts. Inline
     editors (InlineCountryField / InlineTimezoneField / InlinePhoneField)
     for the detail-page overview rows + ContactsEditor.
PR7  Residential client form + detail — phone -> PhoneInput, nationality/
     timezone/place-of-residence-country/subdivision rows in both create
     sheet and inline-editable detail view. Subdivision wipes when country
     flips since codes are country-scoped.
PR8  Company form + detail — incorporation country -> CountryCombobox,
     incorporation region -> SubdivisionCombobox in both modes.
PR9  Public inquiry endpoint — accepts pre-normalized phoneE164/phoneCountry
     and i18n fields from newer website builds, server-side parsePhone()
     fallback for legacy raw-international submissions. Old Nuxt builds
     keep working unchanged.

Tests: 4 unit suites for the primitives (25 tests), 1 integration spec for
the public phone-normalization path (3 tests), 1 smoke spec asserting the
combobox triggers render in all three create sheets.

Test totals: vitest 713 -> 741 (+28).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/clients/contacts-editor.tsx

@@ -24,6 +24,8 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { InlineEditableField } from '@/components/shared/inline-editable-field';
+import { InlinePhoneField } from '@/components/shared/inline-phone-field';
+import { PhoneInput, type PhoneInputValue } from '@/components/shared/phone-input';
 import { apiFetch } from '@/lib/api/client';
 import { cn } from '@/lib/utils';
 
@@ -31,6 +33,8 @@ interface Contact {
   id: string;
   channel: string;
   value: string;
+  valueE164?: string | null;
+  valueCountry?: string | null;
   label?: string | null;
   isPrimary: boolean;
 }
@@ -63,7 +67,9 @@ export function ContactsEditor({ clientId, contacts }: { clientId: string; conta
       patch,
     }: {
       contactId: string;
-      patch: Partial<Pick<Contact, 'channel' | 'value' | 'label' | 'isPrimary'>>;
+      patch: Partial<
+        Pick<Contact, 'channel' | 'value' | 'valueE164' | 'valueCountry' | 'label' | 'isPrimary'>
+      >;
     }) =>
       apiFetch(`/api/v1/clients/${clientId}/contacts/${contactId}`, {
         method: 'PATCH',
@@ -73,7 +79,13 @@ export function ContactsEditor({ clientId, contacts }: { clientId: string; conta
   });
 
   const addMutation = useMutation({
-    mutationFn: async (data: { channel: string; value: string; label?: string }) =>
+    mutationFn: async (data: {
+      channel: string;
+      value: string;
+      valueE164?: string | null;
+      valueCountry?: string | null;
+      label?: string;
+    }) =>
       apiFetch(`/api/v1/clients/${clientId}/contacts`, {
         method: 'POST',
         body: { ...data, isPrimary: false },
@@ -136,7 +148,9 @@ function ContactRow({
 }: {
   contact: Contact;
   onUpdate: (
-    patch: Partial<Pick<Contact, 'channel' | 'value' | 'label' | 'isPrimary'>>,
+    patch: Partial<
+      Pick<Contact, 'channel' | 'value' | 'valueE164' | 'valueCountry' | 'label' | 'isPrimary'>
+    >,
   ) => Promise<unknown>;
   onRemove: () => void;
 }) {
@@ -167,16 +181,30 @@ function ContactRow({
           <Icon className="h-3.5 w-3.5 text-muted-foreground" />
         </ChannelPicker>
         <div className="min-w-0">
-          <InlineEditableField
-            value={contact.value}
-            onSave={async (v) => {
-              if (!v) {
-                toast.error('Value is required');
-                return;
-              }
-              await onUpdate({ value: v });
-            }}
-          />
+          {contact.channel === 'phone' || contact.channel === 'whatsapp' ? (
+            <InlinePhoneField
+              e164={contact.valueE164 ?? null}
+              country={contact.valueCountry ?? null}
+              onSave={async ({ e164, country }) => {
+                if (!e164) {
+                  toast.error('Phone number is required');
+                  return;
+                }
+                await onUpdate({ value: e164, valueE164: e164, valueCountry: country });
+              }}
+            />
+          ) : (
+            <InlineEditableField
+              value={contact.value}
+              onSave={async (v) => {
+                if (!v) {
+                  toast.error('Value is required');
+                  return;
+                }
+                await onUpdate({ value: v });
+              }}
+            />
+          )}
         </div>
       </div>
 
@@ -252,15 +280,42 @@ function NewContactForm({
   onSave,
   onCancel,
 }: {
-  onSave: (data: { channel: string; value: string; label?: string }) => Promise<void>;
+  onSave: (data: {
+    channel: string;
+    value: string;
+    valueE164?: string | null;
+    valueCountry?: string | null;
+    label?: string;
+  }) => Promise<void>;
   onCancel: () => void;
 }) {
   const [channel, setChannel] = useState('email');
   const [value, setValue] = useState('');
+  const [phoneValue, setPhoneValue] = useState<PhoneInputValue | null>(null);
   const [label, setLabel] = useState('');
   const [saving, setSaving] = useState(false);
 
+  const isPhoneChannel = channel === 'phone' || channel === 'whatsapp';
+
   async function submit() {
+    if (isPhoneChannel) {
+      if (!phoneValue?.e164) return;
+      setSaving(true);
+      try {
+        await onSave({
+          channel,
+          value: phoneValue.e164,
+          valueE164: phoneValue.e164,
+          valueCountry: phoneValue.country,
+          label: label.trim() || undefined,
+        });
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Failed to add contact');
+      } finally {
+        setSaving(false);
+      }
+      return;
+    }
     if (!value.trim()) return;
     setSaving(true);
     try {
@@ -272,9 +327,19 @@ function NewContactForm({
     }
   }
 
+  const submitDisabled = saving || (isPhoneChannel ? !phoneValue?.e164 : !value.trim());
+
   return (
     <div className="flex items-center gap-2 p-2 rounded-lg border bg-muted/30 text-sm">
-      <Select value={channel} onValueChange={setChannel}>
+      <Select
+        value={channel}
+        onValueChange={(next) => {
+          setChannel(next);
+          // Reset cross-mode state so a stale email doesn't ride along on a phone submit.
+          if (next === 'phone' || next === 'whatsapp') setValue('');
+          else setPhoneValue(null);
+        }}
+      >
         <SelectTrigger className="h-7 w-28 text-xs">
           <SelectValue />
         </SelectTrigger>
@@ -287,21 +352,31 @@ function NewContactForm({
         </SelectContent>
       </Select>
 
-      <Input
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        placeholder={channel === 'email' ? 'name@example.com' : '+1 555 0100'}
-        className="h-7 text-sm flex-1 min-w-0"
-        autoFocus
-        disabled={saving}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            void submit();
-          }
-          if (e.key === 'Escape') onCancel();
-        }}
-      />
+      {isPhoneChannel ? (
+        <div className="flex-1 min-w-0">
+          <PhoneInput
+            value={phoneValue}
+            onChange={(v) => setPhoneValue(v)}
+            data-testid="new-contact-phone"
+          />
+        </div>
+      ) : (
+        <Input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={channel === 'email' ? 'name@example.com' : 'value'}
+          className="h-7 text-sm flex-1 min-w-0"
+          autoFocus
+          disabled={saving}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              void submit();
+            }
+            if (e.key === 'Escape') onCancel();
+          }}
+        />
+      )}
 
       <Input
         value={label}
@@ -318,7 +393,7 @@ function NewContactForm({
         }}
       />
 
-      <Button type="button" size="sm" onClick={submit} disabled={!value.trim() || saving}>
+      <Button type="button" size="sm" onClick={submit} disabled={submitDisabled}>
         {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : 'Save'}
       </Button>
       <Button type="button" size="sm" variant="ghost" onClick={onCancel} disabled={saving}>