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/client-form.tsx

@@ -20,8 +20,12 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/com
 import { Checkbox } from '@/components/ui/checkbox';
 import { Separator } from '@/components/ui/separator';
 import { TagPicker } from '@/components/shared/tag-picker';
+import { CountryCombobox } from '@/components/shared/country-combobox';
+import { TimezoneCombobox } from '@/components/shared/timezone-combobox';
+import { PhoneInput } from '@/components/shared/phone-input';
 import { apiFetch } from '@/lib/api/client';
 import { createClientSchema, type CreateClientInput } from '@/lib/validators/clients';
+import type { CountryCode } from '@/lib/i18n/countries';
 
 interface ClientFormProps {
   open: boolean;
@@ -31,6 +35,7 @@ interface ClientFormProps {
     id: string;
     fullName: string;
     nationality?: string | null;
+    nationalityIso?: string | null;
     preferredContactMethod?: string | null;
     preferredLanguage?: string | null;
     timezone?: string | null;
@@ -39,6 +44,8 @@ interface ClientFormProps {
     contacts?: Array<{
       channel: string;
       value: string;
+      valueE164?: string | null;
+      valueCountry?: string | null;
       label?: string | null;
       isPrimary?: boolean;
       notes?: string | null;
@@ -77,6 +84,7 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
       reset({
         fullName: client.fullName,
         nationality: client.nationality ?? undefined,
+        nationalityIso: client.nationalityIso ?? undefined,
         preferredContactMethod:
           (client.preferredContactMethod as CreateClientInput['preferredContactMethod']) ??
           undefined,
@@ -89,6 +97,8 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
             ? client.contacts.map((c) => ({
                 channel: c.channel as 'email' | 'phone' | 'whatsapp' | 'other',
                 value: c.value,
+                valueE164: c.valueE164 ?? undefined,
+                valueCountry: c.valueCountry ?? undefined,
                 label: c.label ?? undefined,
                 isPrimary: c.isPrimary ?? false,
                 notes: c.notes ?? undefined,
@@ -152,7 +162,11 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
 
               <div className="space-y-1">
                 <Label>Nationality</Label>
-                <Input {...register('nationality')} placeholder="British" />
+                <CountryCombobox
+                  value={watch('nationalityIso')}
+                  onChange={(iso) => setValue('nationalityIso', iso ?? undefined)}
+                  data-testid="client-nationality"
+                />
               </div>
             </div>
           </div>
@@ -211,11 +225,40 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
 
                   <div className="col-span-5 space-y-1">
                     <Label className="text-xs">Value</Label>
-                    <Input
-                      {...register(`contacts.${index}.value`)}
-                      className="h-8"
-                      placeholder="email@example.com"
-                    />
+                    {(() => {
+                      const channel = watch(`contacts.${index}.channel`);
+                      if (channel === 'phone' || channel === 'whatsapp') {
+                        const e164 = watch(`contacts.${index}.valueE164`) ?? null;
+                        const country =
+                          (watch(`contacts.${index}.valueCountry`) as CountryCode | undefined) ??
+                          undefined;
+                        return (
+                          <PhoneInput
+                            value={
+                              e164 || country
+                                ? {
+                                    e164: e164 ?? null,
+                                    country: country ?? 'US',
+                                  }
+                                : null
+                            }
+                            onChange={(v) => {
+                              setValue(`contacts.${index}.value`, v.e164 ?? '');
+                              setValue(`contacts.${index}.valueE164`, v.e164 ?? undefined);
+                              setValue(`contacts.${index}.valueCountry`, v.country);
+                            }}
+                            data-testid={`contact-${index}-phone`}
+                          />
+                        );
+                      }
+                      return (
+                        <Input
+                          {...register(`contacts.${index}.value`)}
+                          className="h-8"
+                          placeholder={channel === 'email' ? 'email@example.com' : 'value'}
+                        />
+                      );
+                    })()}
                   </div>
 
                   <div className="col-span-2 space-y-1">
@@ -304,7 +347,12 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
               </div>
               <div className="space-y-1">
                 <Label>Timezone</Label>
-                <Input {...register('timezone')} placeholder="UTC+0" />
+                <TimezoneCombobox
+                  value={watch('timezone')}
+                  onChange={(tz) => setValue('timezone', tz ?? undefined)}
+                  countryHint={(watch('nationalityIso') as CountryCode | undefined) ?? undefined}
+                  data-testid="client-timezone"
+                />
               </div>
               <div className="col-span-2 space-y-1">
                 <Label>Source Details</Label>

src/components/clients/client-tabs.tsx

@@ -4,8 +4,11 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import type { DetailTab } from '@/components/shared/detail-layout';
 import { InlineEditableField } from '@/components/shared/inline-editable-field';
+import { InlineCountryField } from '@/components/shared/inline-country-field';
+import { InlineTimezoneField } from '@/components/shared/inline-timezone-field';
 import { InlineTagEditor } from '@/components/shared/inline-tag-editor';
 import { NotesList } from '@/components/shared/notes-list';
+import type { CountryCode } from '@/lib/i18n/countries';
 import { ClientYachtsTab } from '@/components/clients/client-yachts-tab';
 import { ClientCompaniesTab } from '@/components/clients/client-companies-tab';
 import { ClientReservationsTab } from '@/components/clients/client-reservations-tab';
@@ -15,6 +18,7 @@ import { apiFetch } from '@/lib/api/client';
 type ClientPatchField =
   | 'fullName'
   | 'nationality'
+  | 'nationalityIso'
   | 'preferredContactMethod'
   | 'preferredLanguage'
   | 'timezone'
@@ -64,6 +68,7 @@ interface ClientTabsOptions {
   client: {
     fullName: string;
     nationality?: string | null;
+    nationalityIso?: string | null;
     preferredContactMethod?: string | null;
     preferredLanguage?: string | null;
     timezone?: string | null;
@@ -73,6 +78,8 @@ interface ClientTabsOptions {
       id: string;
       channel: string;
       value: string;
+      valueE164?: string | null;
+      valueCountry?: string | null;
       label?: string | null;
       isPrimary: boolean;
     }>;
@@ -131,7 +138,13 @@ function OverviewTab({
             <InlineEditableField value={client.fullName} onSave={save('fullName')} />
           </EditableRow>
           <EditableRow label="Nationality">
-            <InlineEditableField value={client.nationality} onSave={save('nationality')} />
+            <InlineCountryField
+              value={client.nationalityIso ?? null}
+              onSave={async (iso) => {
+                await mutation.mutateAsync({ nationalityIso: iso });
+              }}
+              data-testid="client-nationality-inline"
+            />
           </EditableRow>
           <EditableRow label="Preferred Language">
             <InlineEditableField
@@ -140,7 +153,14 @@ function OverviewTab({
             />
           </EditableRow>
           <EditableRow label="Timezone">
-            <InlineEditableField value={client.timezone} onSave={save('timezone')} />
+            <InlineTimezoneField
+              value={client.timezone}
+              countryHint={(client.nationalityIso as CountryCode | null) ?? null}
+              onSave={async (tz) => {
+                await mutation.mutateAsync({ timezone: tz });
+              }}
+              data-testid="client-timezone-inline"
+            />
           </EditableRow>
           <EditableRow label="Preferred Contact">
             <InlineEditableField

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}>