@open-mercato/ui 0.6.7-develop.6661.1.0043ed1d03 → 0.6.7-develop.6670.1.4efa7961c6

package/src/backend/fields/phone.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from 'react'
+import type { CrudCustomFieldRenderProps } from '../CrudForm'
+import { FieldRegistry } from './registry'
+import { PhoneNumberField, PHONE_COUNTRIES } from '../inputs/PhoneNumberField'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemLeading,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
+
+type PhoneFieldConfig = {
+  defaultCountryIso2?: string
+}
+
+type PhoneFieldDef = PhoneFieldConfig & {
+  configJson?: PhoneFieldConfig
+}
+
+type PhoneFieldInputProps = CrudCustomFieldRenderProps & { def?: PhoneFieldDef }
+
+// Sentinel used by the definition editor to represent "no fixed default"
+// because Radix Select cannot use an empty string as an item value.
+const AUTO_COUNTRY_VALUE = '__om_phone_auto__'
+
+function PhoneFieldInput({ id, value, setValue, disabled, error, def }: PhoneFieldInputProps) {
+  const stringValue = typeof value === 'string' ? value : value == null ? '' : String(value)
+  return (
+    <PhoneNumberField
+      id={id}
+      value={stringValue}
+      onValueChange={(next) => setValue(next ?? undefined)}
+      disabled={disabled}
+      externalError={error ?? null}
+      defaultCountryIso2={def?.defaultCountryIso2}
+    />
+  )
+}
+
+function PhoneFieldDefEditor({
+  def,
+  onChange,
+}: {
+  def: { configJson?: PhoneFieldConfig } | undefined
+  onChange: (patch: Partial<PhoneFieldConfig>) => void
+}) {
+  const t = useT()
+  const selected = typeof def?.configJson?.defaultCountryIso2 === 'string' ? def.configJson.defaultCountryIso2 : ''
+  return (
+    <div className="mt-3 space-y-3 rounded border border-dashed border-muted-foreground/40 bg-muted/30 p-3">
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-muted-foreground">
+          {t('ui.customFields.phone.defaultCountry', 'Default country')}
+        </label>
+        <Select
+          value={selected || AUTO_COUNTRY_VALUE}
+          onValueChange={(next) => onChange({ defaultCountryIso2: next === AUTO_COUNTRY_VALUE ? undefined : next })}
+        >
+          <SelectTrigger size="sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent align="start">
+            <SelectItem value={AUTO_COUNTRY_VALUE}>
+              {t('ui.customFields.phone.defaultCountryAuto', 'Auto-detect from value')}
+            </SelectItem>
+            {PHONE_COUNTRIES.map((country) => (
+              <SelectItem key={`${country.iso2}-${country.dialCode}`} value={country.iso2}>
+                <SelectItemLeading>
+                  <span className="text-base leading-none">{country.flag}</span>
+                </SelectItemLeading>
+                <span className="flex-1 truncate">{country.label}</span>
+                <span className="ml-2 text-xs text-muted-foreground tabular-nums">{country.dialCode}</span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          {t(
+            'ui.customFields.phone.defaultCountryHint',
+            'Pre-selects a country in the phone editor when the field is empty.',
+          )}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+FieldRegistry.register('phone', {
+  input: (props) => <PhoneFieldInput {...props} />,
+  defEditor: (props) => <PhoneFieldDefEditor {...props} />,
+})
+
+export {}

package/src/backend/fields/registry.generated.ts

@@ -2,6 +2,7 @@
 // This file can be regenerated by module generators. Keep imports side-effectful.
 import '@open-mercato/core/modules/attachments/fields/attachment'
 import '@open-mercato/core/modules/dictionaries/fields/dictionary'
+import './phone'
 
 export function loadAll() {
   // No-op: imports above perform registration via side effects

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -21,6 +21,7 @@ import {
   Book,
   Bookmark,
   Box,
+  Boxes,
   Briefcase,
   BriefcaseBusiness,
   Building,
@@ -84,12 +85,14 @@ import {
   Mail,
   MailOpen,
   MapPin,
+  MapPinned,
   MessageCircle,
   MinusCircle,
   Notebook,
   Package,
   PackageCheck,
   PackagePlus,
+  PackageSearch,
   PackageX,
   PauseCircle,
   Percent,
@@ -141,6 +144,7 @@ import {
   Users,
   UserX,
   Wallet,
+  Warehouse,
   Webhook,
   Workflow,
   Wrench,
@@ -165,6 +169,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'book': Book,
   'bookmark': Bookmark,
   'box': Box,
+  'boxes': Boxes,
   'briefcase': Briefcase,
   'briefcase-business': BriefcaseBusiness,
   'building': Building,
@@ -228,12 +233,14 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'mail': Mail,
   'mail-open': MailOpen,
   'map-pin': MapPin,
+  'map-pinned': MapPinned,
   'message-circle': MessageCircle,
   'minus-circle': MinusCircle,
   'notebook': Notebook,
   'package': Package,
   'package-check': PackageCheck,
   'package-plus': PackagePlus,
+  'package-search': PackageSearch,
   'package-x': PackageX,
   'pause-circle': PauseCircle,
   'percent': Percent,
@@ -285,6 +292,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'user-x': UserX,
   'users': Users,
   'wallet': Wallet,
+  'warehouse': Warehouse,
   'webhook': Webhook,
   'workflow': Workflow,
   'wrench': Wrench,

package/src/backend/inputs/PhoneNumberField.tsx

@@ -30,35 +30,316 @@ export type PhoneCountry = {
 }
 
 /**
- * Static country list — focused on EU + Americas markets where Open Mercato
- * currently operates. Extend as needed; longest dial codes MUST appear before
- * their shorter ancestors (e.g. `+380` before `+38`) to keep prefix matching
- * deterministic. The default fallback is the first entry.
+ * Emoji flag for an ISO 3166-1 alpha-2 code, assembled from the two regional
+ * indicator symbols. Deriving it keeps the (large) dictionary free of hand-typed
+ * emoji and guarantees the flag always matches the code.
  */
-export const PHONE_COUNTRIES: PhoneCountry[] = [
-  { iso2: 'US', dialCode: '+1', label: 'United States', flag: '🇺🇸' },
-  { iso2: 'CA', dialCode: '+1', label: 'Canada', flag: '🇨🇦' },
-  { iso2: 'GB', dialCode: '+44', label: 'United Kingdom', flag: '🇬🇧' },
-  { iso2: 'PL', dialCode: '+48', label: 'Poland', flag: '🇵🇱' },
-  { iso2: 'DE', dialCode: '+49', label: 'Germany', flag: '🇩🇪' },
-  { iso2: 'FR', dialCode: '+33', label: 'France', flag: '🇫🇷' },
-  { iso2: 'ES', dialCode: '+34', label: 'Spain', flag: '🇪🇸' },
-  { iso2: 'IT', dialCode: '+39', label: 'Italy', flag: '🇮🇹' },
-  { iso2: 'NL', dialCode: '+31', label: 'Netherlands', flag: '🇳🇱' },
-  { iso2: 'SE', dialCode: '+46', label: 'Sweden', flag: '🇸🇪' },
-  { iso2: 'AT', dialCode: '+43', label: 'Austria', flag: '🇦🇹' },
-  { iso2: 'CH', dialCode: '+41', label: 'Switzerland', flag: '🇨🇭' },
-  { iso2: 'PT', dialCode: '+351', label: 'Portugal', flag: '🇵🇹' },
-  { iso2: 'CZ', dialCode: '+420', label: 'Czechia', flag: '🇨🇿' },
-  { iso2: 'RO', dialCode: '+40', label: 'Romania', flag: '🇷🇴' },
-  { iso2: 'UA', dialCode: '+380', label: 'Ukraine', flag: '🇺🇦' },
+function iso2ToFlagEmoji(iso2: string): string {
+  const letters = iso2.toUpperCase().replace(/[^A-Z]/g, '')
+  if (letters.length !== 2) return ''
+  const base = 0x1f1e6
+  return String.fromCodePoint(
+    base + letters.charCodeAt(0) - 65,
+    base + letters.charCodeAt(1) - 65,
+  )
+}
+
+/**
+ * Complete static dictionary of geographic countries and territories that have
+ * an ISO 3166-1 alpha-2 code and an international calling code, based on the
+ * ITU / Wikipedia list of telephone country codes.
+ *
+ * Rules baked into this data:
+ * - Labels are English; flags are derived from the ISO code (`iso2ToFlagEmoji`).
+ * - Non-geographic / international service codes (`+800`, `+808`, `+870`,
+ *   `+881`, `+882`, …) are intentionally excluded.
+ * - North American Numbering Plan territories carry their full `+1<NPA>` dial
+ *   code (e.g. Bahamas `+1242`) so longest-prefix matching resolves them before
+ *   the generic `+1`. The US and Canada BOTH use a bare `+1` and cannot be told
+ *   apart from the prefix alone — auto-detection favours the US.
+ * - Several sovereign countries share a calling code with dependent territories
+ *   (e.g. `+44` UK/Guernsey/Jersey/Isle of Man); `PRIMARY_DIAL_OWNERS` records
+ *   the country that wins auto-detection for those shared codes.
+ */
+const RAW_PHONE_COUNTRIES: Array<Omit<PhoneCountry, 'flag'>> = [
+  { iso2: 'US', dialCode: '+1', label: 'United States' },
+  { iso2: 'CA', dialCode: '+1', label: 'Canada' },
+  { iso2: 'AG', dialCode: '+1268', label: 'Antigua and Barbuda' },
+  { iso2: 'AI', dialCode: '+1264', label: 'Anguilla' },
+  { iso2: 'AS', dialCode: '+1684', label: 'American Samoa' },
+  { iso2: 'BB', dialCode: '+1246', label: 'Barbados' },
+  { iso2: 'BM', dialCode: '+1441', label: 'Bermuda' },
+  { iso2: 'BS', dialCode: '+1242', label: 'Bahamas' },
+  { iso2: 'DM', dialCode: '+1767', label: 'Dominica' },
+  { iso2: 'DO', dialCode: '+1809', label: 'Dominican Republic' },
+  { iso2: 'GD', dialCode: '+1473', label: 'Grenada' },
+  { iso2: 'GU', dialCode: '+1671', label: 'Guam' },
+  { iso2: 'JM', dialCode: '+1876', label: 'Jamaica' },
+  { iso2: 'KN', dialCode: '+1869', label: 'Saint Kitts and Nevis' },
+  { iso2: 'KY', dialCode: '+1345', label: 'Cayman Islands' },
+  { iso2: 'LC', dialCode: '+1758', label: 'Saint Lucia' },
+  { iso2: 'MP', dialCode: '+1670', label: 'Northern Mariana Islands' },
+  { iso2: 'MS', dialCode: '+1664', label: 'Montserrat' },
+  { iso2: 'PR', dialCode: '+1787', label: 'Puerto Rico' },
+  { iso2: 'SX', dialCode: '+1721', label: 'Sint Maarten' },
+  { iso2: 'TC', dialCode: '+1649', label: 'Turks and Caicos Islands' },
+  { iso2: 'TT', dialCode: '+1868', label: 'Trinidad and Tobago' },
+  { iso2: 'VC', dialCode: '+1784', label: 'Saint Vincent and the Grenadines' },
+  { iso2: 'VG', dialCode: '+1284', label: 'British Virgin Islands' },
+  { iso2: 'VI', dialCode: '+1340', label: 'U.S. Virgin Islands' },
+  { iso2: 'EG', dialCode: '+20', label: 'Egypt' },
+  { iso2: 'SS', dialCode: '+211', label: 'South Sudan' },
+  { iso2: 'MA', dialCode: '+212', label: 'Morocco' },
+  { iso2: 'EH', dialCode: '+212', label: 'Western Sahara' },
+  { iso2: 'DZ', dialCode: '+213', label: 'Algeria' },
+  { iso2: 'TN', dialCode: '+216', label: 'Tunisia' },
+  { iso2: 'LY', dialCode: '+218', label: 'Libya' },
+  { iso2: 'GM', dialCode: '+220', label: 'Gambia' },
+  { iso2: 'SN', dialCode: '+221', label: 'Senegal' },
+  { iso2: 'MR', dialCode: '+222', label: 'Mauritania' },
+  { iso2: 'ML', dialCode: '+223', label: 'Mali' },
+  { iso2: 'GN', dialCode: '+224', label: 'Guinea' },
+  { iso2: 'CI', dialCode: '+225', label: "Côte d'Ivoire" },
+  { iso2: 'BF', dialCode: '+226', label: 'Burkina Faso' },
+  { iso2: 'NE', dialCode: '+227', label: 'Niger' },
+  { iso2: 'TG', dialCode: '+228', label: 'Togo' },
+  { iso2: 'BJ', dialCode: '+229', label: 'Benin' },
+  { iso2: 'MU', dialCode: '+230', label: 'Mauritius' },
+  { iso2: 'LR', dialCode: '+231', label: 'Liberia' },
+  { iso2: 'SL', dialCode: '+232', label: 'Sierra Leone' },
+  { iso2: 'GH', dialCode: '+233', label: 'Ghana' },
+  { iso2: 'NG', dialCode: '+234', label: 'Nigeria' },
+  { iso2: 'TD', dialCode: '+235', label: 'Chad' },
+  { iso2: 'CF', dialCode: '+236', label: 'Central African Republic' },
+  { iso2: 'CM', dialCode: '+237', label: 'Cameroon' },
+  { iso2: 'CV', dialCode: '+238', label: 'Cape Verde' },
+  { iso2: 'ST', dialCode: '+239', label: 'São Tomé and Príncipe' },
+  { iso2: 'GQ', dialCode: '+240', label: 'Equatorial Guinea' },
+  { iso2: 'GA', dialCode: '+241', label: 'Gabon' },
+  { iso2: 'CG', dialCode: '+242', label: 'Republic of the Congo' },
+  { iso2: 'CD', dialCode: '+243', label: 'DR Congo' },
+  { iso2: 'AO', dialCode: '+244', label: 'Angola' },
+  { iso2: 'GW', dialCode: '+245', label: 'Guinea-Bissau' },
+  { iso2: 'IO', dialCode: '+246', label: 'British Indian Ocean Territory' },
+  { iso2: 'SC', dialCode: '+248', label: 'Seychelles' },
+  { iso2: 'SD', dialCode: '+249', label: 'Sudan' },
+  { iso2: 'RW', dialCode: '+250', label: 'Rwanda' },
+  { iso2: 'ET', dialCode: '+251', label: 'Ethiopia' },
+  { iso2: 'SO', dialCode: '+252', label: 'Somalia' },
+  { iso2: 'DJ', dialCode: '+253', label: 'Djibouti' },
+  { iso2: 'KE', dialCode: '+254', label: 'Kenya' },
+  { iso2: 'TZ', dialCode: '+255', label: 'Tanzania' },
+  { iso2: 'UG', dialCode: '+256', label: 'Uganda' },
+  { iso2: 'BI', dialCode: '+257', label: 'Burundi' },
+  { iso2: 'MZ', dialCode: '+258', label: 'Mozambique' },
+  { iso2: 'ZM', dialCode: '+260', label: 'Zambia' },
+  { iso2: 'MG', dialCode: '+261', label: 'Madagascar' },
+  { iso2: 'RE', dialCode: '+262', label: 'Réunion' },
+  { iso2: 'YT', dialCode: '+262', label: 'Mayotte' },
+  { iso2: 'ZW', dialCode: '+263', label: 'Zimbabwe' },
+  { iso2: 'NA', dialCode: '+264', label: 'Namibia' },
+  { iso2: 'MW', dialCode: '+265', label: 'Malawi' },
+  { iso2: 'LS', dialCode: '+266', label: 'Lesotho' },
+  { iso2: 'BW', dialCode: '+267', label: 'Botswana' },
+  { iso2: 'SZ', dialCode: '+268', label: 'Eswatini' },
+  { iso2: 'KM', dialCode: '+269', label: 'Comoros' },
+  { iso2: 'ZA', dialCode: '+27', label: 'South Africa' },
+  { iso2: 'SH', dialCode: '+290', label: 'Saint Helena' },
+  { iso2: 'ER', dialCode: '+291', label: 'Eritrea' },
+  { iso2: 'AW', dialCode: '+297', label: 'Aruba' },
+  { iso2: 'FO', dialCode: '+298', label: 'Faroe Islands' },
+  { iso2: 'GL', dialCode: '+299', label: 'Greenland' },
+  { iso2: 'GR', dialCode: '+30', label: 'Greece' },
+  { iso2: 'NL', dialCode: '+31', label: 'Netherlands' },
+  { iso2: 'BE', dialCode: '+32', label: 'Belgium' },
+  { iso2: 'FR', dialCode: '+33', label: 'France' },
+  { iso2: 'ES', dialCode: '+34', label: 'Spain' },
+  { iso2: 'GI', dialCode: '+350', label: 'Gibraltar' },
+  { iso2: 'PT', dialCode: '+351', label: 'Portugal' },
+  { iso2: 'LU', dialCode: '+352', label: 'Luxembourg' },
+  { iso2: 'IE', dialCode: '+353', label: 'Ireland' },
+  { iso2: 'IS', dialCode: '+354', label: 'Iceland' },
+  { iso2: 'AL', dialCode: '+355', label: 'Albania' },
+  { iso2: 'MT', dialCode: '+356', label: 'Malta' },
+  { iso2: 'CY', dialCode: '+357', label: 'Cyprus' },
+  { iso2: 'FI', dialCode: '+358', label: 'Finland' },
+  { iso2: 'AX', dialCode: '+358', label: 'Åland Islands' },
+  { iso2: 'BG', dialCode: '+359', label: 'Bulgaria' },
+  { iso2: 'HU', dialCode: '+36', label: 'Hungary' },
+  { iso2: 'LT', dialCode: '+370', label: 'Lithuania' },
+  { iso2: 'LV', dialCode: '+371', label: 'Latvia' },
+  { iso2: 'EE', dialCode: '+372', label: 'Estonia' },
+  { iso2: 'MD', dialCode: '+373', label: 'Moldova' },
+  { iso2: 'AM', dialCode: '+374', label: 'Armenia' },
+  { iso2: 'BY', dialCode: '+375', label: 'Belarus' },
+  { iso2: 'AD', dialCode: '+376', label: 'Andorra' },
+  { iso2: 'MC', dialCode: '+377', label: 'Monaco' },
+  { iso2: 'SM', dialCode: '+378', label: 'San Marino' },
+  { iso2: 'VA', dialCode: '+379', label: 'Vatican City' },
+  { iso2: 'UA', dialCode: '+380', label: 'Ukraine' },
+  { iso2: 'RS', dialCode: '+381', label: 'Serbia' },
+  { iso2: 'ME', dialCode: '+382', label: 'Montenegro' },
+  { iso2: 'XK', dialCode: '+383', label: 'Kosovo' },
+  { iso2: 'HR', dialCode: '+385', label: 'Croatia' },
+  { iso2: 'SI', dialCode: '+386', label: 'Slovenia' },
+  { iso2: 'BA', dialCode: '+387', label: 'Bosnia and Herzegovina' },
+  { iso2: 'MK', dialCode: '+389', label: 'North Macedonia' },
+  { iso2: 'IT', dialCode: '+39', label: 'Italy' },
+  { iso2: 'RO', dialCode: '+40', label: 'Romania' },
+  { iso2: 'CH', dialCode: '+41', label: 'Switzerland' },
+  { iso2: 'CZ', dialCode: '+420', label: 'Czechia' },
+  { iso2: 'SK', dialCode: '+421', label: 'Slovakia' },
+  { iso2: 'LI', dialCode: '+423', label: 'Liechtenstein' },
+  { iso2: 'AT', dialCode: '+43', label: 'Austria' },
+  { iso2: 'GB', dialCode: '+44', label: 'United Kingdom' },
+  { iso2: 'GG', dialCode: '+44', label: 'Guernsey' },
+  { iso2: 'JE', dialCode: '+44', label: 'Jersey' },
+  { iso2: 'IM', dialCode: '+44', label: 'Isle of Man' },
+  { iso2: 'DK', dialCode: '+45', label: 'Denmark' },
+  { iso2: 'SE', dialCode: '+46', label: 'Sweden' },
+  { iso2: 'NO', dialCode: '+47', label: 'Norway' },
+  { iso2: 'SJ', dialCode: '+47', label: 'Svalbard and Jan Mayen' },
+  { iso2: 'PL', dialCode: '+48', label: 'Poland' },
+  { iso2: 'DE', dialCode: '+49', label: 'Germany' },
+  { iso2: 'FK', dialCode: '+500', label: 'Falkland Islands' },
+  { iso2: 'BZ', dialCode: '+501', label: 'Belize' },
+  { iso2: 'GT', dialCode: '+502', label: 'Guatemala' },
+  { iso2: 'SV', dialCode: '+503', label: 'El Salvador' },
+  { iso2: 'HN', dialCode: '+504', label: 'Honduras' },
+  { iso2: 'NI', dialCode: '+505', label: 'Nicaragua' },
+  { iso2: 'CR', dialCode: '+506', label: 'Costa Rica' },
+  { iso2: 'PA', dialCode: '+507', label: 'Panama' },
+  { iso2: 'PM', dialCode: '+508', label: 'Saint Pierre and Miquelon' },
+  { iso2: 'HT', dialCode: '+509', label: 'Haiti' },
+  { iso2: 'PE', dialCode: '+51', label: 'Peru' },
+  { iso2: 'MX', dialCode: '+52', label: 'Mexico' },
+  { iso2: 'CU', dialCode: '+53', label: 'Cuba' },
+  { iso2: 'AR', dialCode: '+54', label: 'Argentina' },
+  { iso2: 'BR', dialCode: '+55', label: 'Brazil' },
+  { iso2: 'CL', dialCode: '+56', label: 'Chile' },
+  { iso2: 'CO', dialCode: '+57', label: 'Colombia' },
+  { iso2: 'VE', dialCode: '+58', label: 'Venezuela' },
+  { iso2: 'GP', dialCode: '+590', label: 'Guadeloupe' },
+  { iso2: 'BL', dialCode: '+590', label: 'Saint Barthélemy' },
+  { iso2: 'MF', dialCode: '+590', label: 'Saint Martin' },
+  { iso2: 'BO', dialCode: '+591', label: 'Bolivia' },
+  { iso2: 'GY', dialCode: '+592', label: 'Guyana' },
+  { iso2: 'EC', dialCode: '+593', label: 'Ecuador' },
+  { iso2: 'GF', dialCode: '+594', label: 'French Guiana' },
+  { iso2: 'PY', dialCode: '+595', label: 'Paraguay' },
+  { iso2: 'MQ', dialCode: '+596', label: 'Martinique' },
+  { iso2: 'SR', dialCode: '+597', label: 'Suriname' },
+  { iso2: 'UY', dialCode: '+598', label: 'Uruguay' },
+  { iso2: 'CW', dialCode: '+599', label: 'Curaçao' },
+  { iso2: 'BQ', dialCode: '+599', label: 'Caribbean Netherlands' },
+  { iso2: 'MY', dialCode: '+60', label: 'Malaysia' },
+  { iso2: 'AU', dialCode: '+61', label: 'Australia' },
+  { iso2: 'CX', dialCode: '+61', label: 'Christmas Island' },
+  { iso2: 'CC', dialCode: '+61', label: 'Cocos (Keeling) Islands' },
+  { iso2: 'ID', dialCode: '+62', label: 'Indonesia' },
+  { iso2: 'PH', dialCode: '+63', label: 'Philippines' },
+  { iso2: 'NZ', dialCode: '+64', label: 'New Zealand' },
+  { iso2: 'SG', dialCode: '+65', label: 'Singapore' },
+  { iso2: 'TH', dialCode: '+66', label: 'Thailand' },
+  { iso2: 'TL', dialCode: '+670', label: 'Timor-Leste' },
+  { iso2: 'NF', dialCode: '+672', label: 'Norfolk Island' },
+  { iso2: 'BN', dialCode: '+673', label: 'Brunei' },
+  { iso2: 'NR', dialCode: '+674', label: 'Nauru' },
+  { iso2: 'PG', dialCode: '+675', label: 'Papua New Guinea' },
+  { iso2: 'TO', dialCode: '+676', label: 'Tonga' },
+  { iso2: 'SB', dialCode: '+677', label: 'Solomon Islands' },
+  { iso2: 'VU', dialCode: '+678', label: 'Vanuatu' },
+  { iso2: 'FJ', dialCode: '+679', label: 'Fiji' },
+  { iso2: 'PW', dialCode: '+680', label: 'Palau' },
+  { iso2: 'WF', dialCode: '+681', label: 'Wallis and Futuna' },
+  { iso2: 'CK', dialCode: '+682', label: 'Cook Islands' },
+  { iso2: 'NU', dialCode: '+683', label: 'Niue' },
+  { iso2: 'WS', dialCode: '+685', label: 'Samoa' },
+  { iso2: 'KI', dialCode: '+686', label: 'Kiribati' },
+  { iso2: 'NC', dialCode: '+687', label: 'New Caledonia' },
+  { iso2: 'TV', dialCode: '+688', label: 'Tuvalu' },
+  { iso2: 'PF', dialCode: '+689', label: 'French Polynesia' },
+  { iso2: 'TK', dialCode: '+690', label: 'Tokelau' },
+  { iso2: 'FM', dialCode: '+691', label: 'Micronesia' },
+  { iso2: 'MH', dialCode: '+692', label: 'Marshall Islands' },
+  { iso2: 'RU', dialCode: '+7', label: 'Russia' },
+  { iso2: 'KZ', dialCode: '+7', label: 'Kazakhstan' },
+  { iso2: 'JP', dialCode: '+81', label: 'Japan' },
+  { iso2: 'KR', dialCode: '+82', label: 'South Korea' },
+  { iso2: 'VN', dialCode: '+84', label: 'Vietnam' },
+  { iso2: 'KP', dialCode: '+850', label: 'North Korea' },
+  { iso2: 'HK', dialCode: '+852', label: 'Hong Kong' },
+  { iso2: 'MO', dialCode: '+853', label: 'Macau' },
+  { iso2: 'KH', dialCode: '+855', label: 'Cambodia' },
+  { iso2: 'LA', dialCode: '+856', label: 'Laos' },
+  { iso2: 'CN', dialCode: '+86', label: 'China' },
+  { iso2: 'BD', dialCode: '+880', label: 'Bangladesh' },
+  { iso2: 'TW', dialCode: '+886', label: 'Taiwan' },
+  { iso2: 'TR', dialCode: '+90', label: 'Turkey' },
+  { iso2: 'IN', dialCode: '+91', label: 'India' },
+  { iso2: 'PK', dialCode: '+92', label: 'Pakistan' },
+  { iso2: 'AF', dialCode: '+93', label: 'Afghanistan' },
+  { iso2: 'LK', dialCode: '+94', label: 'Sri Lanka' },
+  { iso2: 'MM', dialCode: '+95', label: 'Myanmar' },
+  { iso2: 'MV', dialCode: '+960', label: 'Maldives' },
+  { iso2: 'LB', dialCode: '+961', label: 'Lebanon' },
+  { iso2: 'JO', dialCode: '+962', label: 'Jordan' },
+  { iso2: 'SY', dialCode: '+963', label: 'Syria' },
+  { iso2: 'IQ', dialCode: '+964', label: 'Iraq' },
+  { iso2: 'KW', dialCode: '+965', label: 'Kuwait' },
+  { iso2: 'SA', dialCode: '+966', label: 'Saudi Arabia' },
+  { iso2: 'YE', dialCode: '+967', label: 'Yemen' },
+  { iso2: 'OM', dialCode: '+968', label: 'Oman' },
+  { iso2: 'PS', dialCode: '+970', label: 'Palestine' },
+  { iso2: 'AE', dialCode: '+971', label: 'United Arab Emirates' },
+  { iso2: 'IL', dialCode: '+972', label: 'Israel' },
+  { iso2: 'BH', dialCode: '+973', label: 'Bahrain' },
+  { iso2: 'QA', dialCode: '+974', label: 'Qatar' },
+  { iso2: 'BT', dialCode: '+975', label: 'Bhutan' },
+  { iso2: 'MN', dialCode: '+976', label: 'Mongolia' },
+  { iso2: 'NP', dialCode: '+977', label: 'Nepal' },
+  { iso2: 'TJ', dialCode: '+992', label: 'Tajikistan' },
+  { iso2: 'TM', dialCode: '+993', label: 'Turkmenistan' },
+  { iso2: 'AZ', dialCode: '+994', label: 'Azerbaijan' },
+  { iso2: 'GE', dialCode: '+995', label: 'Georgia' },
+  { iso2: 'KG', dialCode: '+996', label: 'Kyrgyzstan' },
+  { iso2: 'UZ', dialCode: '+998', label: 'Uzbekistan' },
+  { iso2: 'IR', dialCode: '+98', label: 'Iran' },
 ]
 
-const DEFAULT_COUNTRY = PHONE_COUNTRIES[0]
-// Match longer prefixes first to avoid e.g. `+1` shadowing `+1234` if any.
-const COUNTRIES_BY_DIAL_LENGTH = [...PHONE_COUNTRIES].sort(
-  (a, b) => b.dialCode.length - a.dialCode.length,
-)
+export const PHONE_COUNTRIES: PhoneCountry[] = RAW_PHONE_COUNTRIES
+  .map((country) => ({ ...country, flag: iso2ToFlagEmoji(country.iso2) }))
+  .sort((a, b) => a.label.localeCompare(b.label, 'en', { sensitivity: 'base' }))
+
+/**
+ * Sovereign/primary country that wins auto-detection for a calling code shared
+ * by several territories. US vs. Canada is the one irreducible ambiguity — both
+ * are `+1` — and it resolves to the US.
+ */
+const PRIMARY_DIAL_OWNERS: Record<string, string> = {
+  '+1': 'US',
+  '+7': 'RU',
+  '+44': 'GB',
+  '+47': 'NO',
+  '+61': 'AU',
+  '+212': 'MA',
+  '+262': 'RE',
+  '+358': 'FI',
+  '+590': 'GP',
+  '+599': 'CW',
+}
+
+const DEFAULT_COUNTRY =
+  PHONE_COUNTRIES.find((country) => country.iso2 === 'US') ?? PHONE_COUNTRIES[0]
+
+// Match longer prefixes first (e.g. `+1242` before `+1`); for equal-length codes
+// shared by several territories, prefer the sovereign in `PRIMARY_DIAL_OWNERS`.
+const COUNTRIES_BY_DIAL_LENGTH = [...PHONE_COUNTRIES].sort((a, b) => {
+  if (b.dialCode.length !== a.dialCode.length) return b.dialCode.length - a.dialCode.length
+  const aPrimary = PRIMARY_DIAL_OWNERS[a.dialCode] === a.iso2 ? 0 : 1
+  const bPrimary = PRIMARY_DIAL_OWNERS[b.dialCode] === b.iso2 ? 0 : 1
+  return aPrimary - bPrimary
+})
 
 function findCountryByIso(iso2: string): PhoneCountry | undefined {
   return PHONE_COUNTRIES.find((c) => c.iso2 === iso2)

package/src/backend/inputs/__tests__/PhoneNumberField.test.tsx

@@ -22,7 +22,7 @@ jest.mock('@open-mercato/shared/lib/phone', () => ({
 
 import * as React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { PhoneNumberField } from '../PhoneNumberField'
+import { PHONE_COUNTRIES, PhoneNumberField } from '../PhoneNumberField'
 
 function PhoneFieldHarness(props: Partial<React.ComponentProps<typeof PhoneNumberField>>) {
   const [value, setValue] = React.useState<string | undefined>(undefined)
@@ -76,4 +76,74 @@ describe('PhoneNumberField', () => {
     expect(screen.queryByText('Use an international phone number.')).not.toBeInTheDocument()
     expect(input).toHaveAttribute('aria-invalid', 'true')
   })
+
+  it('honours a restricted country list via the countries prop', () => {
+    render(
+      <PhoneFieldHarness
+        value="+383 44 123 456"
+        countries={[{ iso2: 'PL', dialCode: '+48', label: 'Poland', flag: '🇵🇱' }]}
+      />,
+    )
+
+    // The value still parses against the full dictionary (Kosovo), but the
+    // picker only offers the restricted list.
+    expect(screen.getByText('+383')).toBeInTheDocument()
+  })
+})
+
+describe('PhoneNumberField country dictionary', () => {
+  it('exposes a complete, well-formed geographic dictionary', () => {
+    expect(PHONE_COUNTRIES.length).toBeGreaterThan(200)
+
+    for (const country of PHONE_COUNTRIES) {
+      expect(country.iso2).toMatch(/^[A-Z]{2}$/)
+      expect(country.dialCode).toMatch(/^\+\d+$/)
+      expect(country.label.length).toBeGreaterThan(0)
+      expect(country.flag.length).toBeGreaterThan(0)
+    }
+
+    const isoCodes = PHONE_COUNTRIES.map((country) => country.iso2)
+    expect(new Set(isoCodes).size).toBe(isoCodes.length)
+  })
+
+  it('includes representative codes from every numbering zone', () => {
+    const dialByIso = new Map(PHONE_COUNTRIES.map((country) => [country.iso2, country.dialCode]))
+    expect(dialByIso.get('XK')).toBe('+383')
+    expect(dialByIso.get('BS')).toBe('+1242')
+    expect(dialByIso.get('BR')).toBe('+55')
+    expect(dialByIso.get('AU')).toBe('+61')
+    expect(dialByIso.get('JP')).toBe('+81')
+    expect(dialByIso.get('TR')).toBe('+90')
+    expect(dialByIso.get('PS')).toBe('+970')
+  })
+
+  it('excludes non-geographic international service codes', () => {
+    for (const code of ['+800', '+808', '+870', '+881', '+882']) {
+      expect(PHONE_COUNTRIES.some((country) => country.dialCode === code)).toBe(false)
+    }
+  })
+
+  it('derives each flag emoji from the ISO code', () => {
+    expect(PHONE_COUNTRIES.find((country) => country.iso2 === 'US')?.flag).toBe('🇺🇸')
+    expect(PHONE_COUNTRIES.find((country) => country.iso2 === 'XK')?.flag).toBe('🇽🇰')
+  })
+})
+
+describe('PhoneNumberField initial country detection', () => {
+  const cases: Array<[string, string]> = [
+    ['+1242 555 0100', '+1242'],
+    ['+1 212 555 1234', '+1'],
+    ['+383 44 123 456', '+383'],
+    ['+55 11 91234 5678', '+55'],
+    ['+61 2 1234 5678', '+61'],
+    ['+81 3 1234 5678', '+81'],
+    ['+90 212 123 4567', '+90'],
+    ['+970 59 123 4567', '+970'],
+    ['+44 20 7946 0000', '+44'],
+  ]
+
+  it.each(cases)('resolves %s to dial code %s (longest prefix, sovereign first)', (value, expected) => {
+    render(<PhoneFieldHarness value={value} />)
+    expect(screen.getByText(expected)).toBeInTheDocument()
+  })
 })

package/src/backend/utils/__tests__/api.test.ts

@@ -95,6 +95,20 @@ describe('apiFetch', () => {
     )
   })
 
+  it('attaches requiredFeatures to ForbiddenError so callers can name the missing permission', async () => {
+    ;(window as unknown as Record<string, unknown>).__omOriginalFetch = jest.fn(async () =>
+      createMockResponse(403, {
+        error: 'Forbidden',
+        requiredFeatures: ['wms.manage_locations'],
+      }),
+    )
+
+    const rejection = await apiFetch('/api/wms/locations').catch((error: unknown) => error)
+    expect(rejection).toBeInstanceOf(ForbiddenError)
+    expect((rejection as ForbiddenError).requiredFeatures).toEqual(['wms.manage_locations'])
+    expect((rejection as ForbiddenError).status).toBe(403)
+  })
+
   it('throws ForbiddenError when ACL hints are missing', async () => {
     const response = createMockResponse(403, {
       error: 'Forbidden',

package/src/backend/utils/api.ts

@@ -74,9 +74,17 @@ export function redirectToSessionRefresh() {
 
 export class ForbiddenError extends Error {
   readonly status = 403
-  constructor(message = 'Forbidden') {
+  readonly requiredFeatures: string[] | null
+  readonly requiredRoles: string[] | null
+
+  constructor(
+    message = 'Forbidden',
+    options?: { requiredFeatures?: string[] | null; requiredRoles?: string[] | null },
+  ) {
     super(message)
     this.name = 'ForbiddenError'
+    this.requiredFeatures = options?.requiredFeatures?.length ? [...options.requiredFeatures] : null
+    this.requiredRoles = options?.requiredRoles?.length ? [...options.requiredRoles] : null
   }
 }
 
@@ -220,7 +228,9 @@ export async function apiFetch(input: RequestInfo | URL, init?: RequestInit): Pr
       } else {
         msg = await res.clone().text().catch(() => 'Forbidden')
       }
-      throw new ForbiddenError(msg)
+      // Attach ACL hints so callers (e.g. flashMutationError) can name the
+      // missing permission instead of surfacing a bare "Forbidden" toast.
+      throw new ForbiddenError(msg, { requiredFeatures: features, requiredRoles: roles })
     }
     // If already on login, just return the response for the caller to handle
   }