@the-smithy/create-hearth-site 0.19.0 → 0.21.0

package/template/src/app/[[...slug]]/page.tsx

@@ -1,54 +1,2 @@
-import { normalizeSlug } from "@the-smithy/hearth";
-import { metadataFromMeta } from "@the-smithy/hearth/next";
-import { JsonLd } from "@the-smithy/hearth/react";
-import type { Metadata } from "next";
-import { Blocks } from "@/components/blocks";
-import { EventView } from "@/components/EventView";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-type Props = { params: Promise<{ slug?: string[] }> };
-
-/**
- * An event in an event collection, e.g. /talks/<event> for a "Talks" collection. Pages are checked first,
- * so a page at the same address wins.
- */
-async function collectionEvent(slug: string[] | undefined) {
-  if (!slug || slug.length < 2) return null;
-  const site = await hearthNext.getSite();
-  if (!hasFeature(site, "events")) return null;
-  const prefix = normalizeSlug(slug.slice(0, -1));
-  const collection = (await hearthNext.getCollections()).find((c) => c.kind === "events" && c.slug === prefix);
-  if (!collection) return null;
-  const event = await hearthNext.getEvent(normalizeSlug(slug.at(-1)));
-  return event?.collection?.id === collection.id ? event : null;
-}
-
-/** Every page in Hearth at its path ("/" is "home", "/about" is "about", "/blog/post" is a blog entry), plus events in collections. */
-export default async function Page({ params }: Props) {
-  const slug = (await params).slug;
-  const page = await hearthNext.getPage(slug);
-  if (page) {
-    return (
-      <>
-        <JsonLd data={page.meta.jsonLd} />
-        {/* Pages usually open with a Hero (the visible title); this keeps a heading for the rest. */}
-        {page.blocks[0]?.type === "hero" ? null : <h1 className="sr-only">{page.title}</h1>}
-        <Blocks blocks={page.blocks} />
-      </>
-    );
-  }
-
-  const event = await collectionEvent(slug);
-  if (event) return <EventView event={event} />;
-  // An old address (a renamed page, or the site before it moved to Hearth) redirects; anything else is a 404.
-  return hearthNext.redirectOrNotFound(slug);
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const slug = (await params).slug;
-  const metadata = await hearthNext.generatePageMetadata(slug);
-  if (Object.keys(metadata).length) return metadata;
-  const event = await collectionEvent(slug);
-  return event ? metadataFromMeta(event.meta) : {};
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/page.tsx.
+export { default, generateMetadata } from "@/hearth/pages/page";

package/template/src/app/api/preview/exit/route.ts

@@ -1,4 +1,4 @@
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 /** Ends a draft preview and returns to the published page (?path=/about). */
 export const GET = hearthNext.exitPreviewHandler();

package/template/src/app/api/preview/route.ts

@@ -1,4 +1,4 @@
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 /**
  * Hearth's "Preview on the website" button opens this with a short-lived token. It checks the token with Hearth,

package/template/src/app/api/revalidate/route.ts

@@ -1,4 +1,4 @@
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 /**
  * Hearth calls this when anything on the site is published, so changes show up within seconds.

package/template/src/app/apple-icon.tsx

@@ -1,5 +1,5 @@
 import { ImageResponse } from "next/og";
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 export const size = { width: 180, height: 180 };
 export const contentType = "image/png";

package/template/src/app/donate/page.tsx

@@ -1,35 +1,2 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { DonateForm } from "@/components/DonateForm";
-import { Section } from "@/components/ui";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
-  return {
-    title: "Donate",
-    description: `Support ${site.name} with a donation.`,
-    alternates: { canonical: "/donate" },
-    openGraph: { title: "Donate", url: "/donate" },
-  };
-}
-
-/**
- * A general donation page (sites with Giving). Ask staff to reserve "donate" on the site's Plan card in Hearth so
- * no page takes this address. For a page built in Hearth instead, use the Donation form block there.
- */
-export default async function DonatePage() {
-  const site = await hearthNext.getSite();
-  if (!hasFeature(site, "giving")) notFound();
-  const giving = site.settings.giving;
-  return (
-    <Section>
-      <div className="max-w-2xl">
-        <h1 className="mb-4 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Donate</h1>
-        <p className="mb-10 text-lg opacity-85">Your gift supports {giving.legalName || site.name}.</p>
-        <DonateForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} />
-      </div>
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/donate.tsx.
+export { default, generateMetadata } from "@/hearth/pages/donate";

package/template/src/app/donate/thank-you/page.tsx

@@ -1,22 +1,2 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { Section } from "@/components/ui";
-
-export const metadata: Metadata = { title: "Thank you", robots: { index: false, follow: false } };
-
-/** Where the payment page sends donors back. The receipt is emailed once the payment completes. */
-export default function ThankYouPage() {
-  return (
-    <Section>
-      <div className="max-w-2xl">
-        <h1 className="mb-4 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Thank you</h1>
-        <p className="text-lg opacity-85">Your gift makes a difference. If you gave your email, a receipt is on its way.</p>
-        <p className="mt-8">
-          <Link href="/" className="font-semibold underline underline-offset-4">
-            Back to the homepage
-          </Link>
-        </p>
-      </div>
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/thank-you.tsx.
+export { default, metadata } from "@/hearth/pages/thank-you";

package/template/src/app/events/[slug]/page.tsx

@@ -1,26 +1,2 @@
-import { metadataFromMeta } from "@the-smithy/hearth/next";
-import { permanentRedirect } from "next/navigation";
-import { EventView } from "@/components/EventView";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-type Props = { params: Promise<{ slug: string }> };
-
-async function load(slug: string) {
-  const site = await hearthNext.getSite();
-  return hasFeature(site, "events") ? hearthNext.getEvent(slug) : null;
-}
-
-export async function generateMetadata({ params }: Props) {
-  const event = await load((await params).slug);
-  return event ? metadataFromMeta(event.meta) : {};
-}
-
-/** Events without a type live here. Events in a collection (e.g. Talks) live at their collection's address. */
-export default async function EventPage({ params }: Props) {
-  const slug = (await params).slug;
-  const event = await load(slug);
-  if (!event) return hearthNext.redirectOrNotFound(`/events/${slug}`);
-  if (event.path !== `/events/${event.slug}`) permanentRedirect(event.path);
-  return <EventView event={event} />;
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/event.tsx.
+export { default, generateMetadata } from "@/hearth/pages/event";

package/template/src/app/events/page.tsx

@@ -1,29 +1,2 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { EventList } from "@/components/blocks/events";
-import { Section } from "@/components/ui";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
-  return {
-    title: "Events",
-    description: `Upcoming events from ${site.name}.`,
-    alternates: { canonical: "/events" },
-    openGraph: { title: "Events", url: "/events" },
-  };
-}
-
-/** Upcoming events (only on sites with the Events feature in Hearth). */
-export default async function EventsPage() {
-  const site = await hearthNext.getSite();
-  if (!hasFeature(site, "events")) notFound();
-  const events = await hearthNext.getEvents({ when: "upcoming" });
-  return (
-    <Section>
-      <h1 className="mb-10 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Events</h1>
-      <EventList events={events} />
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/events.tsx.
+export { default, generateMetadata } from "@/hearth/pages/events";

package/template/src/app/fundraisers/[slug]/page.tsx

@@ -1,55 +1,2 @@
-import { metadataFromMeta } from "@the-smithy/hearth/next";
-import { JsonLd } from "@the-smithy/hearth/react";
-import { Blocks } from "@/components/blocks";
-import { Progress } from "@/components/blocks/giving";
-import { DonateForm } from "@/components/DonateForm";
-import { Img, Section } from "@/components/ui";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-type Props = { params: Promise<{ slug: string }> };
-
-async function load(slug: string) {
-  const site = await hearthNext.getSite();
-  return hasFeature(site, "giving") ? { site, fundraiser: await hearthNext.getFundraiser(slug) } : null;
-}
-
-export async function generateMetadata({ params }: Props) {
-  const loaded = await load((await params).slug);
-  return loaded?.fundraiser ? metadataFromMeta(loaded.fundraiser.meta) : {};
-}
-
-/** A fundraiser's page: progress and a donation form, then its story blocks. */
-export default async function FundraiserPage({ params }: Props) {
-  const slug = (await params).slug;
-  const loaded = await load(slug);
-  if (!loaded?.fundraiser) return hearthNext.redirectOrNotFound(`/fundraisers/${slug}`);
-  const { site, fundraiser: f } = loaded;
-  const giving = site.settings.giving;
-
-  return (
-    <>
-      <JsonLd data={f.meta.jsonLd} />
-      <section className="bg-muted">
-        <div className="mx-auto grid max-w-site items-center gap-10 px-4 py-16 sm:px-6 md:grid-cols-2">
-          <div className="flex flex-col gap-4">
-            <p className="text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{f.status === "completed" ? "Completed fundraiser" : "Fundraiser"}</p>
-            <h1 className="text-[clamp(32px,4.4vw,52px)] font-bold leading-tight tracking-tight">{f.title}</h1>
-            {f.summary ? <p className="text-lg opacity-85">{f.summary}</p> : null}
-            <Progress fundraiser={f} large />
-          </div>
-          {f.image ? <Img image={f.image} className="aspect-[4/3] w-full rounded-xl object-cover" /> : null}
-        </div>
-      </section>
-      <Blocks blocks={f.blocks} />
-      {f.status === "active" ? (
-        <Section>
-          <div className="max-w-2xl">
-            <h2 className="mb-6 text-2xl font-bold">Give to {f.title}</h2>
-            <DonateForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} fundraiser={f.slug} />
-          </div>
-        </Section>
-      ) : null}
-    </>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/fundraiser.tsx.
+export { default, generateMetadata } from "@/hearth/pages/fundraiser";

package/template/src/app/fundraisers/page.tsx

@@ -1,37 +1,2 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { FundraiserList } from "@/components/blocks/giving";
-import { Section } from "@/components/ui";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
-  return {
-    title: "Fundraisers",
-    description: `Fundraisers and campaigns from ${site.name}: see how each is doing and give.`,
-    alternates: { canonical: "/fundraisers" },
-    openGraph: { title: "Fundraisers", url: "/fundraisers" },
-  };
-}
-
-/** Active fundraisers, then completed ones (only on sites with the Giving feature in Hearth). */
-export default async function FundraisersPage() {
-  const site = await hearthNext.getSite();
-  if (!hasFeature(site, "giving")) notFound();
-  const [active, completed] = await Promise.all([hearthNext.getFundraisers({ status: "active" }), hearthNext.getFundraisers({ status: "completed" })]);
-  return (
-    <>
-      <Section>
-        <h1 className="mb-10 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Fundraisers</h1>
-        <FundraiserList fundraisers={active} />
-      </Section>
-      {completed.length ? (
-        <Section tone="muted">
-          <h2 className="mb-8 text-2xl font-bold">Completed</h2>
-          <FundraiserList fundraisers={completed} />
-        </Section>
-      ) : null}
-    </>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/fundraisers.tsx.
+export { default, generateMetadata } from "@/hearth/pages/fundraisers";

package/template/src/app/globals.css

@@ -1,75 +1,4 @@
+/* Managed by Hearth (pnpm hearth:update replaces it). The site's tokens and CSS go in src/theme/theme.css. */
 @import "tailwindcss";
-
-/*
- * The site's brand. Blocks only use these tokens, so restyling a new site starts here.
- * Hearth's "tone" options map to them: default, muted, inverse and accent.
- */
-@theme {
-  --color-bg: #fbfaf7;
-  --color-ink: #1c1c1a;
-  --color-muted-ink: #5b5b55;
-  --color-line: #e3e0d8;
-  --color-surface: #ffffff;
-  --color-muted: #f1eee7;
-  --color-inverse: #1c1c1a;
-  --color-inverse-ink: #f6f4ee;
-  --color-accent: #2f5d50;
-  --color-accent-ink: #ffffff;
-  /* Highlighted words in headings (*like this*) and links. Check contrast on every ground. */
-  --color-highlight: #2f5d50;
-  --color-danger: #a12a1f;
-
-  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --container-site: 72rem;
-}
-
-body {
-  background: var(--color-bg);
-  color: var(--color-ink);
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Markdown from Hearth (rich text, FAQ answers, media + text). */
-.prose {
-  line-height: 1.7;
-}
-.prose > * + * {
-  margin-top: 1em;
-}
-.prose h2 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  line-height: 1.25;
-  margin-top: 1.6em;
-}
-.prose h3 {
-  font-size: 1.35rem;
-  font-weight: 700;
-  margin-top: 1.4em;
-}
-.prose a {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-.prose ul {
-  list-style: disc;
-  padding-left: 1.4em;
-}
-.prose ol {
-  list-style: decimal;
-  padding-left: 1.4em;
-}
-.prose blockquote {
-  border-left: 3px solid var(--color-line);
-  padding-left: 1em;
-  font-style: italic;
-}
-.prose img {
-  border-radius: 0.75rem;
-}
-
-:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
+@import "../hearth/hearth.css";
+@import "../theme/theme.css";

package/template/src/app/icon.tsx

@@ -1,5 +1,5 @@
 import { ImageResponse } from "next/og";
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 export const size = { width: 64, height: 64 };
 export const contentType = "image/png";

package/template/src/app/layout.tsx

@@ -1,38 +1,4 @@
-import type { ReactNode } from "react";
-import { HearthAnalytics } from "@the-smithy/hearth/analytics";
-import { siteLang } from "@the-smithy/hearth/next";
-import { HearthPreview } from "@the-smithy/hearth/preview";
-import { SiteFooter } from "@/components/SiteFooter";
-import { SiteHeader } from "@/components/SiteHeader";
-import { hearthNext } from "@/lib/hearth";
+// Managed by Hearth (pnpm hearth:update replaces it): the layout is src/hearth/layout/RootLayout.tsx, styled in src/theme.
 import "./globals.css";
 
-/**
- * What every page starts from: full links, the title pattern, the default description and share image, the site's
- * language, Google and Bing verification, and no indexing on preview deploys or while the site is hidden in Hearth.
- * Pages from Hearth then set their own title, description, canonical address and share image.
- */
-export const generateMetadata = () => hearthNext.siteMetadata();
-
-export default async function RootLayout({ children }: { children: ReactNode }) {
-  const site = await hearthNext.getSite();
-  const preview = await hearthNext.isPreview();
-  return (
-    <html lang={siteLang(site)}>
-      <body className="flex min-h-dvh flex-col">
-        <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-surface focus:px-4 focus:py-2">
-          Skip to content
-        </a>
-        {/* Live draft preview from Hearth: shows while an editor previews, refreshes as they edit. */}
-        {preview ? <HearthPreview /> : null}
-        <SiteHeader site={site} />
-        <main id="main" className="flex-1">
-          {children}
-        </main>
-        <SiteFooter site={site} />
-        {/* Hearth's built-in visitor analytics (cookieless, no banner needed): off in draft preview and when the site turns it off. */}
-        {site.analytics && !preview ? <HearthAnalytics config={site.analytics} /> : null}
-      </body>
-    </html>
-  );
-}
+export { default, generateMetadata } from "@/hearth/layout/RootLayout";

package/template/src/app/not-found.tsx

@@ -1,14 +1,2 @@
-import Link from "next/link";
-import { Section } from "@/components/ui";
-
-export default function NotFound() {
-  return (
-    <Section className="py-28">
-      <h1 className="text-4xl font-bold">Page not found</h1>
-      <p className="mt-4 text-lg opacity-80">The page you&apos;re looking for has moved or no longer exists.</p>
-      <Link href="/" className="mt-8 inline-block rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90">
-        Go to the homepage
-      </Link>
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/not-found.tsx.
+export { default } from "@/hearth/pages/not-found";

package/template/src/app/registered/page.tsx

@@ -1,22 +1,2 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { Section } from "@/components/ui";
-
-export const metadata: Metadata = { title: "You're registered", robots: { index: false, follow: false } };
-
-/** Where the payment page sends people after paying for a ticket. The confirmation is emailed once payment completes. */
-export default function RegisteredPage() {
-  return (
-    <Section>
-      <div className="max-w-2xl">
-        <h1 className="mb-4 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">You&apos;re registered</h1>
-        <p className="text-lg opacity-85">Thanks for signing up. A confirmation is on its way to your email.</p>
-        <p className="mt-8">
-          <Link href="/events" className="font-semibold underline underline-offset-4">
-            See all events
-          </Link>
-        </p>
-      </div>
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/registered.tsx.
+export { default, metadata } from "@/hearth/pages/registered";

package/template/src/app/robots.ts

@@ -1,4 +1,4 @@
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 /**
  * Keeps crawlers out until the site has a domain in Hearth, while it's hidden from search engines there, and on

package/template/src/app/sitemap.ts

@@ -1,5 +1,5 @@
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
+import { hearthNext } from "@/hearth/client";
+import { hasFeature } from "@/hearth/site";
 
 /** Every indexable page, event and fundraiser in Hearth, plus the pages this site's own code serves. */
 export default async function sitemap() {

package/template/src/{app → hearth}/actions.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import type { FormResult } from "@the-smithy/hearth";
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "./client";
 
 export type FormState = {
   ok?: boolean;
@@ -41,3 +41,17 @@ export async function donate(prev: FormResult | null, formData: FormData): Promi
 export async function register(slug: string, prev: FormResult | null, formData: FormData): Promise<FormResult> {
   return hearthNext.registerAction(slug, { returnPath: "/registered" })(prev, formData);
 }
+
+/**
+ * Signs up to volunteer at an event that asks for volunteers. Sign-ups land under the event's Volunteers in Hearth,
+ * which also emails the site's alert addresses.
+ */
+export async function volunteer(slug: string, prev: VolunteerState | null, formData: FormData): Promise<VolunteerState> {
+  const result = await hearthNext.volunteerAction(slug)(prev, formData);
+  if (result.ok) return result;
+  // Hand back what they typed and chose, so the form keeps it after an error.
+  const values = Object.fromEntries([...formData.entries()].filter(([k, v]) => typeof v === "string" && !k.startsWith("$") && k !== "_gotcha" && k !== "shift")) as Record<string, string>;
+  return { ...result, values, shifts: formData.getAll("shift").map(String) };
+}
+
+export type VolunteerState = FormResult & { values?: Record<string, string>; shifts?: string[] };

package/template/src/hearth/blocks/OpenMap.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { directionsUrl, type Position } from "@the-smithy/hearth";
+import { useEffect, useRef, useState } from "react";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { theme } from "@/theme";
+import { cx } from "../theme";
+
+const t = theme.map;
+
+export type MapPlace = { name: string; address: string; position: Position };
+
+/**
+ * A map with a pin for each place; a pin opens the place's name, address and directions. MapLibre loads only when the
+ * map is about to scroll into view, and scrolling the page never zooms it (two fingers, or Ctrl and scroll, do).
+ */
+export function OpenMap({ places, label, className = "" }: { places: MapPlace[]; label: string; className?: string }) {
+  const container = useRef<HTMLDivElement>(null);
+  const [failed, setFailed] = useState(false);
+  const key = JSON.stringify(places);
+
+  useEffect(() => {
+    const el = container.current;
+    if (!el) return;
+    let cancelled = false;
+    let remove = () => {};
+    const show = async () => {
+      const ml = await import("maplibre-gl");
+      // MapLibre looks for its worker beside its own script, which isn't where the bundler puts it.
+      ml.setWorkerUrl(new URL("maplibre-gl/dist/maplibre-gl-worker.mjs", import.meta.url).href);
+      if (cancelled) return;
+      const list: MapPlace[] = JSON.parse(key);
+      const map = new ml.Map({
+        container: el,
+        // Free OpenStreetMap tiles from OpenFreeMap by default (no key, no cookies); the theme's map.style swaps them.
+        style: t.style,
+        center: [list[0].position.lng, list[0].position.lat],
+        zoom: 15,
+        attributionControl: { compact: true },
+        cooperativeGestures: true,
+        // MapLibre makes the map a labelled region (the canvas): name it for this map.
+        locale: { "Map.Title": label },
+      });
+      remove = () => map.remove();
+      map.addControl(new ml.NavigationControl({ showCompass: false }));
+      let loaded = false;
+      map.once("load", () => (loaded = true));
+      map.on("error", () => !loaded && setFailed(true));
+
+      const bounds = new ml.LngLatBounds();
+      for (const place of list) {
+        const at: [number, number] = [place.position.lng, place.position.lat];
+        bounds.extend(at);
+        const pin = document.createElement("button");
+        pin.type = "button";
+        pin.className = t.pin;
+        pin.setAttribute("aria-label", place.name);
+        new ml.Marker({ element: pin }).setLngLat(at).setPopup(new ml.Popup({ offset: 14, closeButton: true }).setDOMContent(popup(place))).addTo(map);
+      }
+      if (list.length > 1) map.fitBounds(bounds, { padding: { top: 48, right: 56, bottom: 72, left: 48 }, maxZoom: 15, duration: 0 });
+    };
+    // Wait until the map is near the screen: most visitors never scroll to it.
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        observer.disconnect();
+        show().catch(() => setFailed(true));
+      },
+      { rootMargin: "300px" },
+    );
+    observer.observe(el);
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+      remove();
+    };
+  }, [key, label]);
+
+  return (
+    <div className={cx(t.frame, className)}>
+      {/* Sized by the frame: MapLibre makes its container position: relative. */}
+      <div ref={container} className="size-full" />
+      {failed ? <p className={t.failed}>{theme.text.mapFailed}</p> : null}
+    </div>
+  );
+}
+
+/** A pin's popup, built as elements (never HTML strings) so names and addresses stay plain text. */
+function popup(place: MapPlace) {
+  const box = document.createElement("div");
+  box.className = t.popup;
+  const name = document.createElement("strong");
+  name.textContent = place.name;
+  const address = document.createElement("span");
+  address.className = "whitespace-pre-line";
+  address.textContent = place.address;
+  const link = document.createElement("a");
+  link.href = directionsUrl(place);
+  link.rel = "noopener";
+  link.className = t.popupLink;
+  link.textContent = theme.text.directions;
+  box.append(name, address, link);
+  return box;
+}