@bettercms-ai/astro 0.13.0 → 0.14.1

package/README.md

@@ -29,12 +29,28 @@ export default defineConfig({
 });
 ```
 
-Server env (never bundled to the client):
+### Environment variables
 
-```bash
-BCMS_API_KEY=bcms_proj_...      # content:read (or content:read:draft for previews)
-BCMS_DRAFT_SECRET=<32+ chars>   # signs the draft cookie
-```
+Every public value resolves in this order: `bettercms({ ... })` option, then env, then the
+`bcms-content.json` snapshot the deploy workflow writes before the build.
+
+| Variable | Option | Read | Default / notes |
+| --- | --- | --- | --- |
+| `PUBLIC_BCMS_API_URL` | `apiUrl` | config time | Required (option, env or snapshot) |
+| `PUBLIC_BCMS_WORKSPACE` | `workspace` | config time | Required (option, env or snapshot) |
+| `PUBLIC_BCMS_PROJECT_ID` | `projectId` | config time | Optional project scope for forms |
+| `PUBLIC_BCMS_MEDIA_URL` | `mediaUrl` | config time | `https://cdn.bettercms.ai` |
+| `PUBLIC_BCMS_STUDIO_URL` | `studioUrl` | config time | Unset. `<BcmsVisualEditing>` falls back to `https://bettercms.ai` |
+| `BCMS_API_KEY` | none | server runtime | `content:read`, or `content:read:draft` for draft previews. Never bundled |
+| `BCMS_DRAFT_SECRET` | none | server runtime | Signs the draft cookie. Runtime `process.env` wins over a build-time value. Without it `/api/bcms/draft/enable` returns 500 |
+
+The BetterCMS-generated deploy workflow sets `PUBLIC_BCMS_API_URL`, `PUBLIC_BCMS_WORKSPACE`
+and `PUBLIC_BCMS_PROJECT_ID` for the build. Its repo secret `BCMS_API_KEY` reaches only the
+content-fetch step, never the build. On your own host, set the two server variables yourself.
+
+This package ships no revalidation route. Point the project's revalidation webhook
+(Project → Settings) at your rebuild hook. Its secret (the dashboard calls it
+`BETTERCMS_WEBHOOK_SECRET`) signs the body as `x-bettercms-signature: sha256=<hmac>`.
 
 Add the virtual-module + `Astro.locals` types to `src/env.d.ts`:
 
@@ -116,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
@@ -170,3 +205,23 @@ The integration injects `/api/bcms/draft/enable?token=<jwt>&redirect=/path` and
 `/api/bcms/draft/disable`. Generate the preview-token link from the dashboard;
 visiting `enable` validates the token against the backend, sets a signed cookie,
 and subsequent loads return draft content. Disable with the `disable` route.
+
+### Two draft lanes
+
+| Lane | Build | How the canvas shows a draft |
+| --- | --- | --- |
+| SSR | `output: "server"` + the draft routes above + `BCMS_DRAFT_SECRET` + a `content:read:draft` `BCMS_API_KEY` | The loaders read the draft on every request, so hand-written layouts preview too |
+| Static | Any static build, with the page body rendered through `<BcmsLiveBlocks>` | The editor pushes the draft block tree to the island over `postMessage`. No fetch, no key in the page. Only the `BcmsLiveBlocks` region updates |
+
+## Headless projects (your own host)
+
+BetterCMS never builds, releases or deploys a headless project. Any build, artifact or deploy
+request for one returns **409 `HEADLESS_NO_BUILD`**.
+
+- **Deploy:** push to your repository. Your provider (Vercel, Netlify or Cloudflare Pages)
+  builds it. For fresh content on publish, point the revalidation webhook at the provider's
+  rebuild hook.
+- **Draft:** use your framework's draft route on the provider's **preview** deployment URL.
+  For Astro that is the SSR lane above: `output: "server"`, the injected
+  `/api/bcms/draft/*` routes, `BCMS_DRAFT_SECRET`, and a `BCMS_API_KEY` carrying
+  `content:read:draft`. Keep the draft key off production.

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/components/BcmsVisualEditing.astro

@@ -16,11 +16,10 @@
 interface Props {
   studioUrl?: string;
 }
-// `demo.bettercms.ai` is the studio origin — the same one the dashboard's own integration
-// snippets hand out as `PUBLIC_BCMS_STUDIO_URL`. `dashboard.bettercms.ai` resolves but 404s;
-// it is the straggler `public-lookup.ts` already called "the odd one out among three
-// spellings of this origin", and it was left here.
-const { studioUrl = "https://demo.bettercms.ai" } = Astro.props;
+// `bettercms.ai` is the studio origin — the one the dashboard's integration snippets hand out
+// as `PUBLIC_BCMS_STUDIO_URL`, and the default of @bettercms-ai/next's <VisualEditing>.
+// `demo.bettercms.ai` is a stale alias; `dashboard.bettercms.ai` resolves but 404s.
+const { studioUrl = "https://bettercms.ai" } = Astro.props;
 const src = `${studioUrl.replace(/\/+$/, "")}/bcms-visual-editing.js`;
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.13.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.18.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.12.1"
+    "libphonenumber-js": "^1.13.13"
   },
   "peerDependencies": {
     "astro": ">=4",