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

package/template/src/{components → hearth}/blocks/media.tsx

@@ -1,20 +1,20 @@
 import { videoEmbedUrl, type BlockOf } from "@the-smithy/hearth";
 import { HearthEmbed } from "@the-smithy/hearth/react";
-import { Img, Section, SectionHeading } from "@/components/ui";
-
-const columns = { "2": "sm:grid-cols-2", "3": "sm:grid-cols-2 lg:grid-cols-3", "4": "sm:grid-cols-2 lg:grid-cols-4" } as const;
+import { theme } from "@/theme";
+import { Img, Section, SectionHeading } from "../ui";
 
 export function Gallery({ block }: { block: BlockOf<"gallery"> }) {
   const d = block.data;
+  const t = theme.gallery;
   return (
-    <Section>
+    <Section block="gallery">
       <SectionHeading heading={d.heading} intro={d.intro} />
-      <ul className={`grid gap-4 ${columns[d.columns]}`}>
+      <ul className={t.list} data-columns={d.columns}>
         {d.images.map((item, i) => (
           <li key={i}>
             <figure>
-              <Img image={item.image} crop={4 / 3} className="aspect-[4/3] w-full rounded-xl object-cover" />
-              {item.caption ? <figcaption className="mt-2 text-sm opacity-75">{item.caption}</figcaption> : null}
+              <Img image={item.image} crop={4 / 3} className={t.image} />
+              {item.caption ? <figcaption className={t.caption}>{item.caption}</figcaption> : null}
             </figure>
           </li>
         ))}
@@ -25,13 +25,14 @@ export function Gallery({ block }: { block: BlockOf<"gallery"> }) {
 
 export function Video({ block }: { block: BlockOf<"video"> }) {
   const d = block.data;
+  const t = theme.video;
   const src = videoEmbedUrl(d.url);
   if (!src) return null;
   return (
-    <Section>
+    <Section block="video">
       <SectionHeading heading={d.heading} />
-      <figure className="max-w-4xl">
-        <div className="aspect-video overflow-hidden rounded-xl bg-inverse">
+      <figure className={t.figure}>
+        <div className={t.frame}>
           <iframe
             src={src}
             title={d.title}
@@ -41,7 +42,7 @@ export function Video({ block }: { block: BlockOf<"video"> }) {
             referrerPolicy="strict-origin-when-cross-origin"
           />
         </div>
-        {d.caption ? <figcaption className="mt-3 opacity-75">{d.caption}</figcaption> : null}
+        {d.caption ? <figcaption className={t.caption}>{d.caption}</figcaption> : null}
       </figure>
     </Section>
   );
@@ -49,12 +50,12 @@ export function Video({ block }: { block: BlockOf<"video"> }) {
 
 /** Embed code from another service, in the SDK's sandboxed frame (it can't reach the rest of the page). */
 export function Embed({ block }: { block: BlockOf<"embed"> }) {
-  const width = { narrow: "max-w-2xl", wide: "max-w-4xl", full: "" }[block.data.width];
+  const t = theme.embed;
   return (
-    <Section>
-      <figure className={width}>
-        <HearthEmbed block={block} className="rounded-xl" />
-        {block.data.caption ? <figcaption className="mt-3 opacity-75">{block.data.caption}</figcaption> : null}
+    <Section block="embed">
+      <figure className={t.figure} data-width={block.data.width}>
+        <HearthEmbed block={block} className={t.frame} />
+        {block.data.caption ? <figcaption className={t.caption}>{block.data.caption}</figcaption> : null}
       </figure>
     </Section>
   );
@@ -62,18 +63,19 @@ export function Embed({ block }: { block: BlockOf<"embed"> }) {
 
 export function People({ block }: { block: BlockOf<"people"> }) {
   const d = block.data;
+  const t = theme.people;
   return (
-    <Section>
+    <Section block="people">
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <ul className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+      <ul className={t.list}>
         {d.people.map((p, i) => (
-          <li key={i} className="flex flex-col gap-3">
-            {p.image ? <Img image={p.image} crop={1} className="aspect-square w-full rounded-2xl object-cover" /> : null}
+          <li key={i} className={t.person}>
+            {p.image ? <Img image={p.image} crop={1} className={t.image} /> : null}
             <div>
-              <h3 className="text-xl font-semibold">{p.name}</h3>
-              {p.role ? <p className="opacity-75">{p.role}</p> : null}
+              <h3 className={t.name}>{p.name}</h3>
+              {p.role ? <p className={t.role}>{p.role}</p> : null}
             </div>
-            {p.bio ? <p className="leading-relaxed opacity-85">{p.bio}</p> : null}
+            {p.bio ? <p className={t.bio}>{p.bio}</p> : null}
           </li>
         ))}
       </ul>
@@ -83,16 +85,17 @@ export function People({ block }: { block: BlockOf<"people"> }) {
 
 export function Logos({ block }: { block: BlockOf<"logos"> }) {
   const d = block.data;
+  const t = theme.logos;
   return (
-    <Section>
+    <Section block="logos">
       <SectionHeading heading={d.heading} intro={d.intro} />
-      <ul className="flex flex-wrap items-center gap-x-12 gap-y-6">
+      <ul className={t.list}>
         {d.logos.map((l, i) => {
-          const mark = l.logo ? <Img image={{ src: l.logo.src, alt: l.logo.alt || l.name }} className="h-10 w-auto" /> : <span className="text-lg font-semibold">{l.name}</span>;
+          const mark = l.logo ? <Img image={{ src: l.logo.src, alt: l.logo.alt || l.name }} className={t.image} /> : <span className={t.name}>{l.name}</span>;
           return (
             <li key={i}>
               {l.url ? (
-                <a href={l.url} rel="noopener" className="block opacity-85 hover:opacity-100">
+                <a href={l.url} rel="noopener" className={t.link}>
                   {mark}
                 </a>
               ) : (

package/template/src/hearth/components/EventView.tsx

@@ -0,0 +1,120 @@
+import type { BlockOf, HearthEventDetail } from "@the-smithy/hearth";
+import { JsonLd } from "@the-smithy/hearth/react";
+import { theme } from "@/theme";
+import { Blocks } from "../blocks";
+import { Hero } from "../blocks/content";
+import { volunteerAnchor } from "../blocks/events";
+import { hearthNext } from "../client";
+import { formatEventDate } from "../format";
+import { RegistrationForm } from "../forms/RegistrationForm";
+import { VolunteerForm } from "../forms/VolunteerForm";
+import { siteUrl } from "../site";
+import { fill, Img } from "../ui";
+import { Registration } from "./Registration";
+import { Share } from "./Share";
+
+/**
+ * An event's page: header with date, place and registration, then its blocks. Used at /events/… and /<collection>/….
+ * When the event's blocks start with a hero, the hero is the header (its heading is the page's only h1, the event's
+ * name its eyebrow, the event's image its picture if it has none) and the details sit in a band under it.
+ * Volunteer sign-up goes at the bottom, unless a Volunteer sign-up block for the event is placed on the page.
+ */
+export async function EventView({ event }: { event: HearthEventDetail }) {
+  const t = theme.event;
+  const site = await hearthNext.getSite();
+  const base = siteUrl(site);
+  const { location } = event;
+  const [first, ...rest] = event.blocks;
+  const hero = first?.type === "hero" ? (first as BlockOf<"hero">) : null;
+  // A Volunteer sign-up block for this event puts the form where the editor placed it, instead of at the bottom.
+  const volunteerBlock = event.blocks.some((b) => b.type === "volunteerSignup" && (b as BlockOf<"volunteerSignup">).data.event.slug === event.slug);
+  const online = event.attendance === "online" ? theme.text.online : event.attendance === "mixed" ? theme.text.onlineAndInPerson : null;
+
+  const cancelled = event.status === "cancelled" ? <p className={t.cancelled}>{theme.text.cancelledEvent}</p> : null;
+  const when = (
+    <p className={t.when}>
+      <time dateTime={event.startsAt}>{formatEventDate(event)}</time>
+    </p>
+  );
+  const where =
+    location.name || location.address || online ? (
+      <p className={t.where}>
+        {location.name ? <span className={t.placeName}>{location.name}</span> : null}
+        {location.address ? <span className={t.address}>{location.address}</span> : null}
+        {online ? <span className={t.online}>{online}</span> : null}
+      </p>
+    ) : null;
+  const summary = event.summary ? <p className={t.summary}>{event.summary}</p> : null;
+  const actions = (
+    <div className={t.actions}>
+      <Registration event={event} />
+      {event.volunteering?.open ? (
+        <a href={volunteerBlock ? `#${volunteerAnchor(event.slug)}` : "#volunteer"} className={t.volunteer}>
+          {theme.text.volunteer}
+        </a>
+      ) : null}
+      {base && event.status !== "cancelled" ? <Share title={event.title} url={`${base}${event.path}`} message={`${event.title}, ${formatEventDate(event)}: ${base}${event.path}`} heading={`Share ${event.title}`} /> : null}
+    </div>
+  );
+
+  return (
+    <>
+      <JsonLd data={event.meta.jsonLd} />
+      {hero ? (
+        <>
+          <Hero block={{ ...hero, data: { ...hero.data, eyebrow: hero.data.eyebrow ?? event.title, image: hero.data.image ?? event.image ?? undefined } }} />
+          <section className={t.band}>
+            <div className={t.bandInner}>
+              <div className={t.bandDetails}>
+                {cancelled}
+                {when}
+                {where}
+                {hero.data.body ? null : summary}
+              </div>
+              {actions}
+            </div>
+          </section>
+        </>
+      ) : (
+        <section className={t.header}>
+          <div className={t.headerInner}>
+            <div className={t.details}>
+              {event.collection ? <p className={t.collection}>{event.collection.name}</p> : null}
+              {cancelled}
+              <h1 className={t.title}>{event.title}</h1>
+              {when}
+              {where}
+              {summary}
+              {actions}
+            </div>
+            {event.image ? <Img image={event.image} crop={4 / 3} className={t.image} /> : null}
+          </div>
+        </section>
+      )}
+      <Blocks blocks={hero ? rest : event.blocks} />
+      {event.registration?.open ? (
+        <section id="register" className={t.section}>
+          <div className={t.sectionInner}>
+            <h2 className={t.sectionTitle}>{theme.text.register}</h2>
+            {event.registration.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.ticketsSupport, { fundraiser: event.registration.fundraiser.title })}</p> : null}
+            <div className={t.form}>
+              <RegistrationForm slug={event.slug} tickets={event.registration.tickets} />
+            </div>
+          </div>
+        </section>
+      ) : null}
+      {event.volunteering?.open && !volunteerBlock ? (
+        <section id="volunteer" className={t.section}>
+          <div className={t.sectionInner}>
+            <h2 className={t.sectionTitle}>{theme.text.volunteer}</h2>
+            {event.volunteering.intro ? <p className={t.sectionIntro}>{event.volunteering.intro}</p> : null}
+            {event.volunteering.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.supports, { fundraiser: event.volunteering.fundraiser.title })}</p> : null}
+            <div className={t.form}>
+              <VolunteerForm slug={event.slug} timezone={event.timezone} volunteering={event.volunteering} />
+            </div>
+          </div>
+        </section>
+      ) : null}
+    </>
+  );
+}

package/template/src/{components → hearth/components}/Registration.tsx

@@ -1,5 +1,6 @@
 import type { HearthEvent } from "@the-smithy/hearth";
-import { hearthNext } from "@/lib/hearth";
+import { theme } from "@/theme";
+import { hearthNext } from "../client";
 
 /** Upcoming until it ends (or, without an end time, until it starts). */
 const isUpcoming = (e: Pick<HearthEvent, "startsAt" | "endsAt">) => new Date(e.endsAt ?? e.startsAt).getTime() > Date.now();
@@ -11,32 +12,31 @@ const isUpcoming = (e: Pick<HearthEvent, "startsAt" | "endsAt">) => new Date(e.e
  */
 export async function Registration({ event, size = "large" }: { event: HearthEvent; size?: "large" | "small" }) {
   if (event.status === "cancelled" || !isUpcoming(event)) return null;
+  const small = size === "small" ? "small" : undefined;
+  const note = (text: string) => (
+    <p className={theme.registration.note} data-size={small}>
+      {text}
+    </p>
+  );
   if (event.registration) {
     if (!event.registration.open) {
       const soldOut = event.registration.tickets.length > 0 && event.registration.tickets.every((t) => t.soldOut);
-      return <p className={`font-semibold opacity-75 ${size === "large" ? "" : "text-sm"}`}>{soldOut ? "Sold out" : "Registration closed"}</p>;
+      return note(soldOut ? theme.text.soldOut : theme.text.registrationClosed);
     }
     return (
-      <a
-        href={`${event.path}#register`}
-        className={`relative z-10 w-fit rounded-lg bg-accent font-semibold text-accent-ink hover:opacity-90 ${size === "large" ? "px-6 py-3.5" : "px-4 py-2 text-sm"}`}
-      >
-        Register
+      <a href={`${event.path}#register`} className={theme.button.primary} data-size={small}>
+        {theme.text.register}
       </a>
     );
   }
   if (event.registrationUrl) {
     return (
-      <a
-        href={event.registrationUrl}
-        rel="noopener"
-        className={`relative z-10 w-fit rounded-lg bg-accent font-semibold text-accent-ink hover:opacity-90 ${size === "large" ? "px-6 py-3.5" : "px-4 py-2 text-sm"}`}
-      >
-        Register
+      <a href={event.registrationUrl} rel="noopener" className={theme.button.primary} data-size={small}>
+        {theme.text.register}
       </a>
     );
   }
   const { events } = (await hearthNext.getSite()).settings;
   if (!events.registrationComingSoon) return null;
-  return <p className={`font-semibold opacity-75 ${size === "large" ? "" : "text-sm"}`}>{events.comingSoonText || "Registration coming soon"}</p>;
+  return note(events.comingSoonText || theme.text.comingSoon);
 }

package/template/src/hearth/components/Share.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { theme } from "@/theme";
+
+const t = theme.share;
+
+/**
+ * A Share button (event and fundraiser pages): a dialog with a message people can edit, copy buttons, and links to
+ * share it by Facebook, X, email or text, or the phone's own share sheet.
+ */
+export function Share({ title, url, message, heading }: { title: string; url: string; message: string; heading: string }) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const id = useId();
+  const [text, setText] = useState(message);
+  const [status, setStatus] = useState("");
+  const [nativeShare, setNativeShare] = useState(false);
+
+  // navigator.share only exists in the browser, and mostly on phones.
+  // eslint-disable-next-line react-hooks/set-state-in-effect -- feature detection after mount
+  useEffect(() => setNativeShare(typeof navigator.share === "function"), []);
+
+  async function copy(value: string, label: string) {
+    try {
+      await navigator.clipboard.writeText(value);
+      setStatus(`${label} copied.`);
+    } catch {
+      setStatus("Couldn't copy automatically. Select the text and copy it.");
+    }
+  }
+
+  const enc = encodeURIComponent;
+  const targets = [
+    { label: "Facebook", href: `https://www.facebook.com/sharer/sharer.php?u=${enc(url)}` },
+    { label: "X", href: `https://x.com/intent/post?text=${enc(text)}` },
+    { label: "Email", href: `mailto:?subject=${enc(title)}&body=${enc(text)}` },
+    { label: "Text message", href: `sms:?&body=${enc(text)}` },
+  ];
+
+  return (
+    <>
+      <button
+        type="button"
+        className={t.button}
+        onClick={() => {
+          setText(message);
+          setStatus("");
+          dialog.current?.showModal();
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v14" />
+        </svg>
+        {theme.text.share}
+      </button>
+      <dialog ref={dialog} aria-labelledby={`${id}-title`} className={t.dialog} onClick={(e) => e.target === e.currentTarget && e.currentTarget.close()}>
+        <div className={t.top}>
+          <h2 id={`${id}-title`} className={t.title}>
+            {heading}
+          </h2>
+          <button type="button" onClick={() => dialog.current?.close()} className={t.close} aria-label={theme.text.close}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+              <path d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </button>
+        </div>
+        <div className={t.body}>
+          <label className={theme.form.field}>
+            <span className={theme.form.label}>Your message</span>
+            <textarea id={`${id}-message`} rows={5} value={text} onChange={(e) => setText(e.target.value)} className={t.message} />
+          </label>
+          <div className={t.copy}>
+            <button type="button" onClick={() => copy(text, "Message")} className={t.copyButton}>
+              Copy message
+            </button>
+            <button type="button" onClick={() => copy(url, "Link")} className={t.copyButton}>
+              Copy link
+            </button>
+          </div>
+          <p role="status" aria-live="polite" className={t.status}>
+            {status}
+          </p>
+          <div>
+            <p className={t.targetsLabel}>Or share to</p>
+            <div className={t.targets}>
+              {nativeShare ? (
+                <button type="button" className={t.target} onClick={() => navigator.share({ title, text }).catch(() => {})}>
+                  More apps…
+                </button>
+              ) : null}
+              {targets.map((x) => (
+                <a key={x.label} href={x.href} target={x.href.startsWith("http") ? "_blank" : undefined} rel="noopener noreferrer" className={t.target}>
+                  {x.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </dialog>
+    </>
+  );
+}

package/template/src/hearth/format.ts

@@ -0,0 +1,31 @@
+import type { HearthEvent } from "@the-smithy/hearth";
+
+/** "Sat, Oct 18 · 6:00 – 9:00 PM", in the event's own time zone. */
+export function formatEventDate(e: Pick<HearthEvent, "startsAt" | "endsAt" | "allDay" | "timezone">) {
+  const tz = { timeZone: e.timezone };
+  const day = new Intl.DateTimeFormat("en-US", { ...tz, weekday: "short", month: "short", day: "numeric", year: "numeric" });
+  const time = new Intl.DateTimeFormat("en-US", { ...tz, hour: "numeric", minute: "2-digit" });
+  const start = new Date(e.startsAt);
+  const end = e.endsAt ? new Date(e.endsAt) : null;
+  const sameDay = end && day.format(start) === day.format(end);
+  if (e.allDay) return end && !sameDay ? `${day.format(start)} – ${day.format(end)}` : day.format(start);
+  if (!end) return `${day.format(start)} · ${time.format(start)}`;
+  return sameDay ? `${day.format(start)} · ${time.format(start)} – ${time.format(end)}` : `${day.format(start)} ${time.format(start)} – ${day.format(end)} ${time.format(end)}`;
+}
+
+/** A shift's day and time in the event's time zone: "Sat, Nov 14 · 8:00 AM – 11:00 AM". */
+export function formatShift(s: { startsAt: string; endsAt: string }, timeZone: string) {
+  const day = (d: string) => new Date(d).toLocaleDateString("en-US", { timeZone, weekday: "short", month: "short", day: "numeric" });
+  const time = (d: string) => new Date(d).toLocaleTimeString("en-US", { timeZone, hour: "numeric", minute: "2-digit" });
+  return day(s.startsAt) === day(s.endsAt) ? `${day(s.startsAt)} · ${time(s.startsAt)} – ${time(s.endsAt)}` : `${day(s.startsAt)} ${time(s.startsAt)} – ${day(s.endsAt)} ${time(s.endsAt)}`;
+}
+
+/** A collection entry's date ("2026-10-03") as "October 3, 2026". */
+export const formatEntryDate = (iso: string) =>
+  new Date(`${iso.slice(0, 10)}T12:00:00Z`).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });
+
+/** Cents → "$1,250". */
+export const money = (cents: number) => (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: cents % 100 ? 2 : 0 });
+
+/** A ticket price: "$25" or "Free". */
+export const price = (cents: number) => (cents ? money(cents) : "Free");

package/template/src/hearth/forms/ContactForm.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { BlockOf } from "@the-smithy/hearth";
+import { useActionState } from "react";
+import { theme } from "@/theme";
+import { submitHearthForm, type FormState } from "../actions";
+import { Alert, Honeypot, Question, Submit, Success } from "./fields";
+
+type FormData_ = BlockOf<"form">["data"];
+
+/** The fields of a Hearth `form` block, posted through a server action. */
+export function HearthForm({ form }: { form: FormData_ }) {
+  const [state, action] = useActionState<FormState, FormData>(submitHearthForm.bind(null, form.formKey), {});
+
+  if (state.ok) return <Success>{state.message || form.successMessage}</Success>;
+
+  return (
+    <form action={action} className={theme.form.root} noValidate>
+      {state.message ? <Alert>{state.message}</Alert> : null}
+      <Honeypot />
+      {form.fields.map((f) => (
+        <Question key={f.name} field={f} idPrefix={form.formKey} error={state.fieldErrors?.[f.name]} value={state.values?.[f.name]} />
+      ))}
+      <Submit label={form.submitLabel} pending="Sending…" />
+    </form>
+  );
+}

package/template/src/hearth/forms/DonateForm.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useActionState, useState } from "react";
+import type { FormResult } from "@the-smithy/hearth";
+import { theme } from "@/theme";
+import { donate } from "../actions";
+import { money } from "../format";
+import { Alert, Checkbox, FieldError, Submit, TextField } from "./fields";
+
+const t = theme.form;
+
+/**
+ * Suggested amounts (from Hearth's Giving settings), a custom amount and optional details. Submitting starts a
+ * checkout through Hearth and sends the donor to the payment page; they come back to /donate/thank-you.
+ */
+export function DonateForm({
+  presetsCents,
+  minCents,
+  maxCents,
+  fundraiser,
+  submitLabel = theme.text.donate,
+}: {
+  presetsCents: number[];
+  minCents: number;
+  maxCents: number;
+  fundraiser?: string;
+  submitLabel?: string;
+}) {
+  const [state, action] = useActionState<FormResult | null, FormData>(donate, null);
+  const [amount, setAmount] = useState(presetsCents[1] !== undefined ? String(presetsCents[1] / 100) : "custom");
+  const errors = state && !state.ok ? state.fieldErrors : {};
+
+  return (
+    <form action={action} className={t.root} id="donate">
+      {state && !state.ok ? <Alert>{state.message}</Alert> : null}
+      {fundraiser ? <input type="hidden" name="fundraiser" value={fundraiser} /> : null}
+      <fieldset>
+        <legend className={t.legend}>Amount</legend>
+        <div className={t.amounts}>
+          {[...presetsCents.map((cents) => ({ value: String(cents / 100), label: money(cents) })), { value: "custom", label: "Other" }].map((a) => (
+            <label key={a.value} className={t.amount}>
+              <input type="radio" name="amount" value={a.value} checked={amount === a.value} onChange={(e) => setAmount(e.target.value)} className="sr-only" />
+              {a.label}
+            </label>
+          ))}
+        </div>
+        {amount === "custom" ? (
+          <div className={t.customAmount}>
+            <TextField label="Amount in dollars" name="customAmount" inputMode="decimal" required placeholder={String(minCents / 100)} />
+          </div>
+        ) : null}
+        <p className={t.hint}>
+          {money(minCents)} to {money(maxCents)}.
+        </p>
+        <FieldError>{errors.amount}</FieldError>
+      </fieldset>
+      <div className={t.row}>
+        <TextField label="Name" name="name" autoComplete="name" error={errors.name} />
+        <TextField label="Email for your receipt" name="email" type="email" autoComplete="email" error={errors.email} />
+      </div>
+      <TextField label="Message" optional name="message" textarea rows={3} maxLength={500} error={errors.message} />
+      <Checkbox name="anonymous" label="Don't show my name publicly" />
+      {/* Opt-in only, unticked: the fundraiser's updates go to donors who ask (and give an email). */}
+      {fundraiser ? <Checkbox name="updates" label="Send me updates about this fundraiser" /> : null}
+      <Submit label={submitLabel} pending="Opening secure checkout…" />
+      <p className={t.note}>You&apos;ll finish on a secure payment page.</p>
+    </form>
+  );
+}

package/template/src/{components/blocks → hearth/forms}/EmberFormBlock.tsx

@@ -2,11 +2,12 @@
 
 import { EmberForm } from "@the-smithy/ember/react";
 import type { ReactNode } from "react";
+import { theme } from "@/theme";
 
 /**
  * A Form block set to an Ember form (`emberFormId`): rendered by the Ember SDK, so submissions become leads in
  * Ember, The Smithy's CRM. The visitor's browser submits it straight to Ember. It takes the site's colors through
- * the CSS variables in globals.css (they reach into the form's Shadow DOM); restyle with `appearance`.
+ * the color and font tokens in src/theme/theme.css (they reach into the form's Shadow DOM); its shape comes from the theme's `emberForm` slots.
  * `fallback` (the site's own form) shows until the Ember form loads, and stays if Ember can't be reached.
  */
 export function EmberFormBlock({ formId, fallback }: { formId: string; fallback: ReactNode }) {
@@ -25,11 +26,11 @@ export function EmberFormBlock({ formId, fallback }: { formId: string; fallback:
           inputBackground: "var(--color-surface)",
           border: "var(--color-field)",
           successBackground: "var(--color-muted)",
-          radius: "8px",
+          radius: theme.emberForm.radius,
           maxWidth: "none",
           font: "var(--font-sans)",
-          fontSize: "16px",
-          gap: "20px",
+          fontSize: theme.emberForm.fontSize,
+          gap: theme.emberForm.gap,
         },
       }}
       fallback={fallback}

package/template/src/hearth/forms/RegistrationForm.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useActionState, useState } from "react";
+import type { EventTicket, FormResult } from "@the-smithy/hearth";
+import { theme } from "@/theme";
+import { register } from "../actions";
+import { price } from "../format";
+import { Alert, FieldError, OptionCard, Submit, Success, TextField } from "./fields";
+
+const t = theme.form;
+
+/**
+ * On-site registration (sites with Tickets): pick a ticket, give contact details and attendee names. Free tickets
+ * are confirmed here; paid ones go to the payment page and come back to /registered.
+ */
+export function RegistrationForm({ slug, tickets }: { slug: string; tickets: EventTicket[] }) {
+  const [state, action] = useActionState<FormResult | null, FormData>(register.bind(null, slug), null);
+  const available = tickets.filter((ticket) => !ticket.soldOut);
+  const [ticketId, setTicketId] = useState(available[0]?.id ?? "");
+  const ticket = tickets.find((x) => x.id === ticketId);
+  const errors = state && !state.ok ? state.fieldErrors : {};
+  const paid = Boolean(ticket?.priceCents);
+  const attendee = ticket?.attendeeLabel ?? "Attendee";
+
+  if (state?.ok) return <Success>{state.message}</Success>;
+
+  return (
+    <form action={action} className={t.root}>
+      {state && !state.ok ? <Alert>{state.message}</Alert> : null}
+      <fieldset>
+        <legend className={t.legend}>Ticket</legend>
+        <div className={t.options}>
+          {tickets.map((x) => (
+            <OptionCard
+              key={x.id}
+              input={<input type="radio" name="ticket" value={x.id} checked={ticketId === x.id} disabled={x.soldOut} onChange={() => setTicketId(x.id)} className={t.optionInput} />}
+              title={x.name}
+              meta={x.soldOut ? "Sold out" : price(x.priceCents)}
+            >
+              {x.description ? <span className={t.optionDetail}>{x.description}</span> : null}
+              {x.remaining !== null && !x.soldOut && x.remaining <= 10 ? <span className={t.optionDetail}>{x.remaining} left</span> : null}
+            </OptionCard>
+          ))}
+        </div>
+        <FieldError>{errors.ticket}</FieldError>
+      </fieldset>
+      <div className={t.row}>
+        <TextField label="Name" name="name" required autoComplete="name" error={errors.name} />
+        <TextField label="Email" name="email" type="email" required autoComplete="email" error={errors.email} />
+        <TextField label="Phone" optional name="phone" type="tel" autoComplete="tel" error={errors.phone} />
+        <TextField label="Team or organization" optional name="teamName" error={errors.teamName} />
+      </div>
+      {ticket && ticket.attendeesPerRegistration > 0 ? (
+        <fieldset>
+          <legend className={t.legend}>{ticket.attendeesPerRegistration === 1 ? attendee : `${attendee}s`}</legend>
+          <div className={t.row}>
+            {Array.from({ length: ticket.attendeesPerRegistration }, (_, i) => (
+              <input key={`${ticket.id}-${i}`} name="attendee" required aria-label={`${attendee} ${i + 1}`} placeholder={`${attendee} ${i + 1}`} className={t.input} />
+            ))}
+          </div>
+          <FieldError>{errors.attendees}</FieldError>
+        </fieldset>
+      ) : null}
+      <TextField label="Notes" optional name="notes" textarea rows={3} maxLength={1000} error={errors.notes} />
+      <Submit label={paid ? "Continue to payment" : theme.text.register} pending={paid ? "Opening secure checkout…" : "Registering…"} />
+    </form>
+  );
+}