@bettercms-ai/astro 0.14.0 → 0.14.1

package/README.md

@@ -132,6 +132,25 @@ or on-demand-revalidation hook.
 
 Markup is class-driven and unstyled — you own the CSS.
 
+### Phone fields with a country code picker
+
+A phone field whose author enabled **Country code picker** in the builder renders a country
+control beside the number. Whatever the visitor picks, the field still submits **one value**,
+under its own key, in E.164 (`+14155550123`) — there is no second key to handle.
+
+Two classes are yours to style:
+
+| Class | Element |
+|---|---|
+| `bcms-phone` | the wrapper around the country control and the number |
+| `bcms-phone-country` | the country control itself |
+
+The country control is a native `<select>` built at build/SSR time, so **no phone library
+reaches the visitor's browser**. The trade is that the number is not reformatted as it is
+typed — the value is still composed correctly on submit. `@bettercms-ai/next` makes the other
+choice and ships a formatter in a lazy chunk.
+
+
 ## Live editing on a static site — `<BcmsLiveBlocks>`
 
 When the Visual Editor frames a static build it can only show what was built, so editing a

package/components/BcmsForm.astro

@@ -9,6 +9,8 @@
  */
 import config from "bettercms:config";
 import type { DeliveryForm, DeliveryFormField } from "@bettercms-ai/sdk";
+import { getCountries, getCountryCallingCode, isSupportedCountry, getExampleNumber } from "libphonenumber-js/min";
+import phoneExamples from "libphonenumber-js/mobile/examples";
 
 interface Props {
   form: DeliveryForm;
@@ -32,6 +34,46 @@ const INPUT_TYPE: Partial<Record<DeliveryFormField["type"], string>> = {
   url: "url",
 };
 
+/**
+ * Calling-code options for a phone picker. Frontmatter only — this runs at build/SSR time and
+ * ships ZERO bytes of libphonenumber to the visitor; the inline script below never sees it.
+ *
+ * Every libphonenumber helper is wrapped in an arrow rather than passed as a bare callback:
+ * `.filter`/`.map` hand it the array INDEX as its `metadata` argument and it throws.
+ */
+const REGION_NAMES =
+  typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function"
+    ? new Intl.DisplayNames(["en"], { type: "region" })
+    : null;
+
+let countryCache: { iso: string; name: string; code: string; trunk: boolean }[] | null = null;
+const countryList = () => {
+  if (countryCache) return countryCache;
+  countryCache = getCountries()
+    .filter((iso) => isSupportedCountry(iso))
+    .map((iso) => {
+      let name = iso as string;
+      try {
+        name = REGION_NAMES?.of(iso) ?? iso;
+      } catch {
+        name = iso;
+      }
+      let trunk = false;
+      try {
+        const ex = getExampleNumber(iso, phoneExamples);
+        if (ex) {
+          const national = ex.formatNational().replace(/\D/g, "");
+          trunk = national.length > String(ex.nationalNumber).length && national.startsWith("0");
+        }
+      } catch {
+        trunk = false;
+      }
+      return { iso: iso as string, name, code: getCountryCallingCode(iso), trunk };
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+  return countryCache;
+};
+
 const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
 ---
 
@@ -98,6 +140,29 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
           <select id={`bcms-f-${f.key}`} name={f.key} required={f.required}>
             {(f.options ?? []).map((o) => <option value={o} data-bcms-form-part="option">{o}</option>)}
           </select>
+        ) : f.type === "phone" && f.ui?.countryPicker ? (
+          /* A country select plus a tel input, submitting ONE E.164 value. `required` belongs
+             on the number only — a select always has a value and would never block. */
+          <span class="bcms-phone">
+            <select class="bcms-phone-country" name={`${f.key}__country`} aria-label="Country code">
+              <option value="" selected={!f.ui.defaultCountry}>International</option>
+              {countryList().map((c) => (
+                <option value={c.iso} data-cc={c.code} data-trunk={c.trunk ? "1" : undefined} selected={c.iso === f.ui!.defaultCountry}>
+                  {c.name} +{c.code}
+                </option>
+              ))}
+            </select>
+            <input
+              type="tel"
+              id={`bcms-f-${f.key}`}
+              name={f.key}
+              placeholder={f.placeholder}
+              value={f.defaultValue}
+              required={f.required}
+              autocomplete="tel"
+              dir="ltr"
+            />
+          </span>
         ) : (
           <input
             type={INPUT_TYPE[f.type] ?? "text"}
@@ -126,6 +191,13 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
 {showTurnstile && <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>}
 
 <script is:inline>
+  // Compose one E.164 value from a country-picker phone field. CANONICAL COPY is
+  // PHONE_COMPOSE_JS in the backend's src/lib/sites/render-page.ts, and this file is pinned
+  // against it byte for byte by src/__tests__/content/form-script-pin.test.ts. All three
+  // vanilla lanes are inline script text on someone else's page and cannot import at runtime,
+  // so the rule genuinely exists more than once.
+  function bcmsPhone(cc,raw,trunk){var d=String(raw||'').trim();if(!d)return '';if(d.charAt(0)==='+'){var i=d.replace(/\D/g,'');return i?'+'+i:'';}if(!cc)return d;var n=d.replace(/\D/g,'');if(trunk&&n.charAt(0)==='0')n=n.slice(1);return n?'+'+cc+n:'';}
+
   // One copy of this script ships per <BcmsForm> instance, and each copy sees EVERY
   // form on the page — so two forms meant four bindings and a double submit. The
   // `bcmsFormBound` flag makes binding idempotent no matter how many copies run,
@@ -177,6 +249,14 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
         if (k in data) data[k] = Array.isArray(data[k]) ? [...data[k], v] : [data[k], v];
         else data[k] = v;
       });
+      // Compose AFTER the FormData loop. A showIf pointing at a phone key must keep comparing
+      // the raw digits, and applyConds runs on every input event.
+      form.querySelectorAll('select[name$="__country"]').forEach((sel) => {
+        const k = sel.name.slice(0, -9);
+        const o = sel.options[sel.selectedIndex];
+        data[k] = bcmsPhone(o ? (o.getAttribute("data-cc") || "") : "", data[k], o ? o.getAttribute("data-trunk") === "1" : false);
+        delete data[k + "__country"];
+      });
       const tsEl = form.querySelector('[name="cf-turnstile-response"]');
       const body = { data };
       if (tsEl?.value) body["cf-turnstile-response"] = tsEl.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "type": "module",
   "description": "The BetterCMS adapter for Astro — a `bettercms()` integration, a `bettercms:client` virtual module, typed content loaders, draft preview, and native .astro rendering components.",
   "main": "./dist/index.js",
@@ -54,11 +54,12 @@
   },
   "dependencies": {
     "@bettercms-ai/image-url": "^0.3.0",
-    "@bettercms-ai/sdk": "^1.20.0",
+    "@bettercms-ai/next": "^0.13.0",
+    "@bettercms-ai/richtext": "^0.3.0",
+    "@bettercms-ai/sdk": "^1.21.0",
     "@bettercms-ai/types": "^1.11.0",
     "@bettercms-ai/ui": "^0.7.0",
-    "@bettercms-ai/richtext": "^0.3.0",
-    "@bettercms-ai/next": "^0.13.0"
+    "libphonenumber-js": "^1.13.13"
   },
   "peerDependencies": {
     "astro": ">=4",