npm - create-astroid - Versions diffs - 0.1.2 → 0.3.0 - Mend

create-astroid 0.1.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md +16 -7
package/index.mjs +249 -16
package/package.json +5 -3
package/template/README.md +10 -0
package/template/_env.example +36 -0
package/template/astro.config.mjs +29 -12
package/template/package.json +5 -2
package/template/pnpm-workspace.yaml +38 -0
package/template/scripts/seed-editors.mjs +2 -2
package/template/seed/home.seed.sql +48 -1
package/template/src/auth.ts +24 -14
package/template/src/components/LouiseEdit.astro +46 -3
package/template/src/env.d.ts +54 -5
package/template/src/layouts/Site.astro +84 -4
package/template/src/pages/contact.astro +122 -0
package/template/src/pages/index.astro +78 -5
package/template/src/pages/login.astro +52 -2
package/template/src/pages/robots.txt.ts +36 -0
package/template/src/pages/sitemap.xml.ts +40 -0
package/template/src/styles/site.css +9 -0

package/template/scripts/seed-editors.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-// Seed the first editor(s) — an admin `user` row per OWNER_EMAIL / ENGINEER_EMAIL.
+// Seed the first editor(s) — an admin `louise_user` row per OWNER_EMAIL / ENGINEER_EMAIL.
 // A row here IS an editor and IS the magic-link allowlist, so this bootstraps
 // access before anyone can sign in. Idempotent (INSERT OR IGNORE on unique email).
 // After this, add more editors from the Users panel (never by editing env).
@@ -46,7 +46,7 @@ for (const email of emails) {
   const id = randomUUID();
   const name = email.split("@")[0];
   const sql =
-    "INSERT OR IGNORE INTO user " +
+    "INSERT OR IGNORE INTO louise_user " +
     "(id, name, email, emailVerified, createdAt, updatedAt, role, firstName, lastName) VALUES " +
     `(${q(id)}, ${q(name)}, ${q(email)}, 1, ${q(now)}, ${q(now)}, 'admin', NULL, NULL);`;
   console.log(`Seeding editor ${email} (${target}) …`);

package/template/seed/home.seed.sql CHANGED Viewed

@@ -2,11 +2,58 @@
 -- Idempotent. Apply once after migrations:
 --   wrangler d1 execute DB --file seed/home.seed.sql --remote
 --   (drop --remote for the local dev D1)
-INSERT OR IGNORE INTO pages (slug, title, body, status, sort_order, created_at, updated_at)
+--
+-- `sections` is the page-builder array — the same shape the on-canvas editor
+-- reads and the server validates against the section catalog on write. Each item
+-- is `{"_type": …, …fields, "_settings": {…}}`, and `_settings` holds TOKENS
+-- (colorway/align), never CSS, so a re-theme needs no content change.
+--
+-- Seeding it is deliberate: an empty array renders an empty page, and a blank
+-- canvas is a worse first run than having something real to click on and edit.
+--
+-- Full-text search (the editor's Pages search) is kept in sync on PUBLISH, so a
+-- row inserted with raw SQL like this is NOT in the index until you either
+-- publish an edit to it or backfill once with `POST /api/louise/pages/reindex`
+-- (signed in). The page renders fine either way — only in-editor search is
+-- affected.
+--
+-- To override just the <head> title/description (not the on-page H1), add
+-- `seo_title` / `seo_description` columns below. `seo_title` is run through the
+-- config's title template, which already appends the brand — so set the page
+-- part only ("Pricing"), not "Pricing | __BRAND_NAME__".
+INSERT OR IGNORE INTO pages (slug, title, body, sections, status, sort_order, created_at, updated_at)
 VALUES (
   'home',
   '__BRAND_NAME__',
   '<p>Welcome to __BRAND_NAME__. Sign in at <code>/login</code>, switch on edit mode, and change this text in place — then hit Publish.</p>',
+  json_array(
+    json_object(
+      '_type', 'hero',
+      'heading', '__BRAND_NAME__',
+      'subheading', 'Edit this in place — sign in, switch on edit mode, and type.',
+      'ctaLabel', 'Get in touch',
+      'ctaHref', '/contact',
+      '_settings', json_object('colorway', 'base', 'align', 'center')
+    ),
+    json_object(
+      '_type', 'featureGrid',
+      'heading', 'What we do',
+      'items', json_array(
+        json_object('title', 'First thing', 'body', 'Describe it here.'),
+        json_object('title', 'Second thing', 'body', 'And this one.'),
+        json_object('title', 'Third thing', 'body', 'And this one too.')
+      ),
+      '_settings', json_object('colorway', 'base')
+    ),
+    json_object(
+      '_type', 'cta',
+      'heading', 'Ready when you are',
+      'body', 'Swap this copy for your own.',
+      'ctaLabel', 'Contact us',
+      'ctaHref', '/contact',
+      '_settings', json_object('colorway', 'brand', 'align', 'center')
+    )
+  ),
   'published',
   0,
   unixepoch(),

package/template/src/auth.ts CHANGED Viewed

@@ -1,12 +1,16 @@
 // The auth seam Astroid's generated worker.ts + middleware.ts import
 // (`resolveEditor`), plus the Better Auth catch-all the /api/auth route calls.
 //
-// DB-managed editors: an admin `user` row IS an editor. That table is BOTH the
-// role source and the magic-link allowlist — `resolveAdmins` reads it, so only an
-// existing editor's email can request a sign-in link. Seed the first editor with
-// `pnpm seed:editors`; add more from the Users panel (editorsRoute), never by
-// editing env. Magic-link + passkey come from `getLouiseAuth`; no passwords.
+// DB-managed editors: an admin `louise_user` row IS an editor. The editor
+// instance's tables are `louise_`-prefixed (the editor convention), leaving the
+// unprefixed `user`/`session` names free for a second/portal instance. That
+// table is BOTH the role source and the magic-link allowlist — `resolveAdmins`
+// reads it, so only an existing editor's email can request a sign-in link. Seed
+// the first editor with `pnpm seed:editors`; add more from the Users panel
+// (editorsRoute), never by editing env. Magic-link + passkey come from
+// `getLouiseAuth`; no passwords.
+import { astroidMailTheme, magicLinkEmail } from "astroidjs";
 import { env } from "cloudflare:workers";
 import {
   type EditorSession,
@@ -16,32 +20,38 @@ import {
   type MagicLinkEmail,
   resolveEditorSession,
 } from "louise-toolkit/auth";
+import astroidConfig from "../astroid.config.js";
 const BRAND = "__BRAND_NAME__";
-/** The DB-managed editor allowlist: every admin `user` row. */
+// Transactional mail theme, derived from your config's brand colours: the
+// palette, the masthead colour band, and a contrast-corrected accent. Pass a
+// second argument to override any slot.
+const MAIL_THEME = astroidMailTheme(astroidConfig);
+/** The DB-managed editor allowlist: every admin `louise_user` row. */
 async function resolveAdmins(): Promise<string[]> {
   const { results } = await env.DB.prepare(
-    "SELECT email FROM user WHERE role = 'admin'",
+    "SELECT email FROM louise_user WHERE role = 'admin'",
   ).all<{ email: string }>();
   return results.map((r) => r.email);
 }
-function renderMagicLinkEmail({ url }: { url: string; toEmail: string }): MagicLinkEmail {
-  return {
-    subject: `Sign in to ${BRAND}`,
-    text: `Sign in to ${BRAND}:\n\n${url}\n\nThis link expires in 15 minutes. If you didn't request it, ignore this email.`,
-    html: `<p>Sign in to <strong>${BRAND}</strong>:</p><p><a href="${url}">Open the ${BRAND} editor</a></p><p style="color:#666">This link expires in 15 minutes. If you didn't request it, ignore this email.</p>`,
-  };
+/** The branded sign-in email — Astroid's template over your mail theme. */
+function renderMagicLinkEmail({ url, toEmail }: { url: string; toEmail: string }): MagicLinkEmail {
+  return magicLinkEmail(MAIL_THEME, { url, toEmail });
 }
-/** The request-scoped Better Auth instance (magic-link + passkey, DB allowlist). */
+/** The request-scoped Better Auth instance (magic-link + passkey, DB allowlist).
+ *  `tablePrefix: "louise_"` namespaces the editor's Better Auth tables so a
+ *  second (portal) instance can take the unprefixed `user`/`session` names. */
 function getAuth(request: Request): Promise<LouiseAuth> {
   return getLouiseAuth(env, new URL(request.url).origin, {
     rpName: BRAND,
     mailFrom: { email: env.MAIL_FROM, name: BRAND },
     renderMagicLinkEmail,
     resolveAdmins,
+    tablePrefix: "louise_",
   });
 }

package/template/src/components/LouiseEdit.astro CHANGED Viewed

@@ -9,8 +9,25 @@
 //
 // Pass `versionedPageId` from a page whose `<Editable>` fields should stage drafts
 // + publish (the layout forwards it). Omit it and the bar is Settings-only.
+import astroidConfig from "../../astroid.config.js";
 const { editMode, editor } = Astro.locals;
-const { versionedPageId } = Astro.props as { versionedPageId?: number };
+const { versionedPageId, sections } = Astro.props as {
+  versionedPageId?: number;
+  sections?: unknown;
+};
+// The section editor needs the page's CURRENT sections array to seed its store.
+// It rides as JSON on the boot marker for the same reason the other values do:
+// a `define:vars` script would be `is:inline` with per-request content, which
+// can't be hashed into `script-src` and so would be CSP-blocked.
+const sectionsJson = Array.isArray(sections) ? JSON.stringify(sections) : undefined;
+// Is the live multi-editor session on? Read from the config rather than baked in
+// at scaffold time, so adding `realtime` to `modules` later takes effect here
+// too — `astroid generate` regenerates the worker and scaffolds the Durable
+// Object, but this file is yours and is never rewritten.
+const realtimeOn = (astroidConfig.modules ?? []).includes("realtime");
 ---
 {
@@ -28,6 +45,8 @@ const { versionedPageId } = Astro.props as { versionedPageId?: number };
         hidden
         data-louise-user={editor?.name ?? "Editor"}
         data-louise-versioned-page={versionedPageId != null ? String(versionedPageId) : undefined}
+        data-louise-sections={sectionsJson}
+        data-louise-realtime={realtimeOn ? "1" : undefined}
       />
       <script>
         // Lazy-import the editor client only in edit mode. `mountLouise` renders
@@ -41,18 +60,42 @@ const { versionedPageId } = Astro.props as { versionedPageId?: number };
           Promise.all([
             import("louise-toolkit/client"),
             import("louise-toolkit/client/settings"),
+            import("astroidjs/components/sections"),
           ])
-            .then(([client, settings]) => {
+            .then(([client, settings, lib]) => {
               settings.mountSettings({
                 userName: el.dataset.louiseUser || "Editor",
                 users: true,
               });
               const versioned = el.dataset.louiseVersionedPage;
+              const pageId = versioned ? Number(versioned) : undefined;
               client.mountLouise({
                 onOpenSettings: () =>
                   window.dispatchEvent(new Event(settings.OPEN_SETTINGS_EVENT)),
-                versionedPageId: versioned ? Number(versioned) : undefined,
+                versionedPageId: pageId,
+                // Live multi-editor session (ADR 0002). Present only when the
+                // realtime module is on; the client degrades to the debounced
+                // fetch auto-save whenever it is off OR the socket can't open,
+                // so this is an accelerator, never a dependency.
+                realtime: el.dataset.louiseRealtime === "1",
               });
+              // The on-canvas section editor. It edits the SAME catalog the
+              // server validates writes against (astroidSectionCatalog), so a
+              // field can't be editable-but-invalid.
+              //
+              // Mounted only when this page actually rendered sections: the host
+              // is emitted by <Sections>, and the array rides on the boot marker.
+              // A page with neither (the login page, a bespoke route) skips it.
+              const host = document.querySelector<HTMLElement>("[data-louise-sections-host]");
+              const raw = el.dataset.louiseSections;
+              if (host && raw && pageId != null) {
+                client.mountSections(host, {
+                  catalog: lib.astroidSectionCatalog,
+                  pageId,
+                  initial: JSON.parse(raw),
+                });
+              }
             })
             .catch((err) => console.error("[louise] editor bootstrap failed", err));
         }

package/template/src/env.d.ts CHANGED Viewed

@@ -13,24 +13,73 @@ type CloudflareEnv = {
   MEDIA: R2Bucket;
   /** Public base for media URLs (the framework-agnostic media route reads this). */
   MEDIA_URL: string;
+  /** The site's public origin — declared in wrangler.jsonc `vars`. Read by the
+   *  health scan to know what to crawl, and by anything else that needs an
+   *  absolute URL from inside the Worker. */
+  SITE_URL: string;
+  /**
+   * Edge caching for published pages — `"true"` to enable (ADR 0004). A string,
+   * not a boolean, because wrangler `vars` are strings.
+   *
+   * Off by default, and the default is the safe state. Enable on a PREVIEW
+   * deploy and walk the activation runbook first: `caches.default` is not
+   * cleared by Cloudflare Dev Mode or Purge Everything.
+   */
+  ASTROID_EDGE_CACHE: string;
   /** Cloudflare Images — upload dimensions + server-side transforms. */
   IMAGES: ImagesBinding;
+  /**
+   * Analytics Engine dataset for real-visitor Core Web Vitals. The ingest route
+   * accepts-and-drops without it, so leaving it unbound is safe — the Health
+   * panel's CWV badge just stays "not measured yet".
+   */
+  VITALS?: AnalyticsEngineDataset;
+  /**
+   * Workers AI — the editor's rewrite + SEO-suggest assists and alt-text
+   * generation on upload. Every consumer degrades on its own: the routes answer
+   * 503 without it (the client then hides the button) and alt-text generation is
+   * best-effort, so a project that never wants AI simply never calls it.
+   */
+  AI: Ai;
   /** KV — the security rate limiter. */
   RL: KVNamespace;
   /** KV — the autosave draft write-buffer (optional; falls back to direct D1). */
   DRAFTS?: KVNamespace;
-  /** Cloudflare Email Sending — magic-link + notification email. */
-  EMAIL: SendEmail;
+  /**
+   * Cloudflare Email Sending — magic-link + notification email. Typed as the
+   * toolkit's `EmailSender`, i.e. the modern object-form `send({to, from, …})`
+   * API. NOT workers-types' `SendEmail`, which is the legacy `cloudflare:email`
+   * binding: that one routes through Email Routing and can only deliver to
+   * *verified* destination addresses.
+   */
+  EMAIL: import("louise-toolkit/email").EmailSender;
   /** Static assets (bound by the @astrojs/cloudflare adapter). */
   ASSETS: Fetcher;
-  /** Signs Better Auth sessions (`wrangler secret put SESSION_SECRET`). */
+  /**
+   * Signs Better Auth sessions (`wrangler secret put SESSION_SECRET`). A
+   * Secrets Store binding works here too — Louise reads either shape.
+   */
   SESSION_SECRET: string;
+  /**
+   * Turnstile secret. Scaffolded with the DUMMY_REPLACE_ME sentinel, which
+   * reads as "not configured" — captcha stays off until this AND a real
+   * (non-test) site key are both set, so half-provisioning can't lock you out.
+   */
+  TURNSTILE_SECRET?: string;
+  /** Public Turnstile site key; the always-passing test key keeps captcha off. */
+  TURNSTILE_SITE_KEY?: string;
+  /** Cloudflare account id — ONLY for reading Core Web Vitals back out of the
+   *  Analytics Engine SQL API (it is account-scoped and has no binding).
+   *  Unset → the Health panel's CWV badge stays "not measured yet". */
+  CF_ACCOUNT_ID?: string;
+  /** API token with Account Analytics:Read, for the same query. */
+  CF_API_TOKEN?: string;
   /** First editor's email — seeded as an admin, then part of the DB allowlist. */
   OWNER_EMAIL: string;
   /** Optional second bootstrap editor (e.g. your engineer). */
   ENGINEER_EMAIL?: string;
   /** `from` address for outbound email. */
-  MAIL_FROM: string;
+  MAIL_FROM: string;__ASTROID_ENV_BINDINGS__
 };
 // `env` from `cloudflare:workers` is typed as the augmentable `Cloudflare.Env`.
@@ -44,6 +93,6 @@ declare namespace App {
     /** Resolved editor session (authorizes writes). Null when not signed in. */
     editor: import("louise-toolkit/auth").EditorSession | null;
     /** Whether the page should render edit affordances. */
-    editMode: boolean;
+    editMode: boolean;__ASTROID_PORTAL_LOCALS__
   }
 }

package/template/src/layouts/Site.astro CHANGED Viewed

@@ -1,18 +1,80 @@
 ---
 // The base HTML shell. `Astro.locals.editMode` is set by the generated
 // middleware.ts (from your auth seam); LouiseEdit boots the editor when it's on.
+//
+// SEO is settings-driven: the `site_settings` row supplies the site-wide title,
+// description, and OG image, and a page overrides any of them via props.
+// <StructuredData> emits the schema.org graph (business + WebSite), with the
+// business `@type` chosen from your archetype.
+import Seo from "astroidjs/components/Seo.astro";
+import StructuredData from "astroidjs/components/StructuredData.astro";
+import { env } from "cloudflare:workers";
+import astroidConfig from "../../astroid.config.js";
 import LouiseEdit from "../components/LouiseEdit.astro";
 import "../styles/site.css";
 interface Props {
   title?: string;
   description?: string;
+  /** Absolute or root-relative share image; falls back to the site default. */
+  ogImage?: string;
+  /** Keep this page out of search indexes (cart, checkout, account). */
+  noindex?: boolean;
   /** A `pages` row id whose `<Editable>` fields stage drafts + publish. */
   versionedPageId?: number;
+  /** The page's stored `sections` array, forwarded to the on-canvas section
+   *  editor so it can seed its store with what's actually rendered. */
+  sections?: unknown;
 }
-const { title = "__BRAND_NAME__", description, versionedPageId } = Astro.props;
+const { title, description, ogImage, noindex, versionedPageId, sections } = Astro.props;
 const { editMode } = Astro.locals;
+// The editable settings row drives the head. Missing (pre-provision, pre-seed)
+// falls back to the brand name from your config, so a fresh clone still renders
+// a sane <title> rather than an empty one.
+type Settings = {
+  site_name: string | null;
+  tagline: string | null;
+  meta_description: string | null;
+  default_og_image_url: string | null;
+  logo_url: string | null;
+  contact_email: string | null;
+  contact_phone: string | null;
+  contact_address: string | null;
+  social_links: string | null;
+  disable_indexing: number | null;
+};
+let row: Settings | null = null;
+try {
+  row = await env.DB.prepare(
+    `SELECT site_name, tagline, meta_description, default_og_image_url, logo_url,
+            contact_email, contact_phone, contact_address, social_links, disable_indexing
+     FROM site_settings WHERE id = 1`,
+  ).first<Settings>();
+} catch {
+  // No DB binding yet — fall through to the config defaults below.
+}
+const settings = {
+  siteName: row?.site_name ?? astroidConfig.theme.name,
+  tagline: row?.tagline,
+  metaDescription: row?.meta_description,
+  defaultOgImageUrl: row?.default_og_image_url,
+  logoUrl: row?.logo_url,
+  contactEmail: row?.contact_email,
+  contactPhone: row?.contact_phone,
+  contactAddress: row?.contact_address,
+  // Stored as a JSON string; a malformed value must not take down the page.
+  socialLinks: (() => {
+    try {
+      return row?.social_links ? JSON.parse(row.social_links) : undefined;
+    } catch {
+      return undefined;
+    }
+  })(),
+  disableIndexing: Boolean(row?.disable_indexing),
+};
 ---
 <!doctype html>
@@ -20,11 +82,29 @@ const { editMode } = Astro.locals;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{title}</title>
-    {description && <meta name="description" content={description} />}
+    <Seo
+      settings={settings}
+      title={title}
+      description={description}
+      ogImage={ogImage}
+      noindex={noindex}
+      titleTemplate={astroidConfig.seo?.titleTemplate}
+      twitterHandle={astroidConfig.seo?.twitterHandle}
+      locale={astroidConfig.seo?.locale}
+    />
+    <StructuredData config={astroidConfig} settings={settings} />
   </head>
   <body class="min-h-screen bg-base-100 text-base-content" data-edit-mode={editMode ? "" : undefined}>
     <slot />
-    <LouiseEdit versionedPageId={versionedPageId} />
+    <LouiseEdit versionedPageId={versionedPageId} sections={sections} />
+    {
+      /* Real-visitor Core Web Vitals. A static file from public/, so it is
+         same-origin and already covered by `script-src 'self'` — an inline
+         script with generated content couldn't be hashed into the CSP.
+         `defer` keeps it off the critical path; it reports once per page on
+         visibilitychange via sendBeacon. Skipped in edit mode: an editor's
+         session is not representative field data. */
+      !editMode && <script src="/vitals.js" defer />
+    }
   </body>
 </html>

package/template/src/pages/contact.astro ADDED Viewed

@@ -0,0 +1,122 @@
+---
+// The public contact form.
+//
+// The `contact` section — and the scaffolded hero/cta defaults — link here, so
+// without this page a fresh site ships a dead link. It posts to the generated
+// worker's `formRoute`, mounted at /api/louise/forms/inquiries: same-origin POST
+// only, a honeypot field plus a minimum time-on-page, a KV rate limit, then
+// validation against the inquiries form before the row is written. Submissions
+// land in the Inquiries tab of the editor drawer.
+//
+// Yours to edit — the copy, the fields, the layout. (If you remove the `contact`
+// section from astroid.config.ts, the form route stops being mounted and this
+// page's POST will 404; delete the page too, or keep the section.)
+import Site from "../layouts/Site.astro";
+export const prerender = false;
+// Never cache a form page: `set(false)` emits `no-store`, so neither the worker's
+// edge-cache layer nor anything downstream holds on to it.
+Astro.cache.set(false);
+// Stamped at render and posted back, so the form route's `minSeconds` heuristic
+// can tell a person filling in a form from a bot that submitted the instant it
+// loaded.
+const renderedAt = Date.now();
+---
+<Site title="Contact" description="Get in touch.">
+  <main class="mx-auto max-w-xl px-6 py-16">
+    <h1 class="text-4xl font-bold">Get in touch</h1>
+    <p class="mt-3 opacity-80">Send us a message and we'll get back to you.</p>
+    <form id="contact-form" class="mt-8 grid gap-4" method="post" action="/api/louise/forms/inquiries">
+      <input type="hidden" name="louise_ts" value={renderedAt} />
+      {/* The honeypot the form route checks. Hidden from people, left in the DOM
+          for bots; a non-empty value gets a fake 201 and is never stored. */}
+      <div class="hidden" aria-hidden="true">
+        <label for="website">Website</label>
+        <input id="website" name="website" type="text" tabindex="-1" autocomplete="off" />
+      </div>
+      <div class="grid gap-4 sm:grid-cols-2">
+        <label class="form-control">
+          <span class="label-text">First name</span>
+          <input name="firstName" type="text" autocomplete="given-name" class="input input-bordered w-full" />
+        </label>
+        <label class="form-control">
+          <span class="label-text">Last name</span>
+          <input name="lastName" type="text" autocomplete="family-name" class="input input-bordered w-full" />
+        </label>
+      </div>
+      <label class="form-control">
+        <span class="label-text">Email <span aria-hidden="true">*</span></span>
+        <input name="email" type="email" required autocomplete="email" class="input input-bordered w-full" />
+      </label>
+      <label class="form-control">
+        <span class="label-text">Regarding</span>
+        <input name="regarding" type="text" class="input input-bordered w-full" />
+      </label>
+      <label class="form-control">
+        <span class="label-text">Message <span aria-hidden="true">*</span></span>
+        <textarea name="message" required rows="6" class="textarea textarea-bordered w-full"></textarea>
+      </label>
+      <button type="submit" class="btn btn-primary justify-self-start">Send</button>
+      {/* Announced, not merely coloured: a status change that's only visual is
+          invisible to a screen reader. */}
+      <p id="contact-status" class="text-sm" role="status" aria-live="polite"></p>
+    </form>
+  </main>
+</Site>
+<script>
+  // Progressive enhancement: without JS the form still submits (the route accepts
+  // form-encoded bodies) — the visitor just lands on the JSON response. A
+  // processed <script> (no is:inline) is bundled to a same-origin file, which is
+  // what keeps it inside the CSP's `script-src 'self'`.
+  const form = document.querySelector<HTMLFormElement>("#contact-form");
+  const status = document.querySelector<HTMLParagraphElement>("#contact-status");
+  form?.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const button = form.querySelector<HTMLButtonElement>('button[type="submit"]');
+    if (button) button.disabled = true;
+    if (status) status.textContent = "Sending…";
+    try {
+      const body = Object.fromEntries(new FormData(form).entries());
+      const response = await fetch(form.action, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (response.ok) {
+        form.reset();
+        if (status) status.textContent = "Thanks — we've got it, and we'll be in touch.";
+        return;
+      }
+      // 422 carries per-field violations; 429 is the rate limit. Anything else is
+      // reported as itself rather than as a generic failure.
+      const payload = (await response.json().catch(() => null)) as
+        | { error?: string; violations?: { field?: string; message?: string }[] }
+        | null;
+      if (status) {
+        status.textContent =
+          payload?.violations?.map((v) => `${v.field ?? "form"}: ${v.message ?? "invalid"}`).join(", ") ||
+          payload?.error ||
+          `Something went wrong (${response.status}).`;
+      }
+    } catch {
+      if (status) status.textContent = "Could not reach the server. Please try again.";
+    } finally {
+      if (button) button.disabled = false;
+    }
+  });
+</script>