makersclaw 0.2.0 → 0.3.0

package/registry/blocks/contact-section/contact-section.jsx

@@ -0,0 +1,509 @@
+"use client";
+
+import { useId, useState } from "react";
+import { Button, Checkbox, Field, Icon, Image, Input, Kicker, Notice, RadioGroup, Textarea, Toggle, cx } from "../../ui";
+
+// ContactSection — a public "contact us" section: a form (name, email,
+// message; optional phone, company, subject, a topic picked from chips
+// or radios, a consent box) and/or the ways to reach you (email, phone,
+// address, hours, offices). Three layouts: the form alone, the form
+// beside an info panel, and info cards (alone, above the form or beside
+// it). The form validates in place, submits through `onSubmit(values)`
+// — async, returning { ok } — and shows the failure, or a sent state.
+//
+//   <ContactSection title="Talk to us" details={DETAILS}
+//                   onSubmit={async (v) => sendMessage(v)} />
+//
+// README.md beside this file lists every prop.
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const OPTIONAL = ["phone", "company", "subject"];
+
+const optionOf = (o) => (typeof o === "string" ? { value: o, label: o } : o);
+
+function Header({ kicker, title, description, center }) {
+  if (!kicker && !title && !description) return null;
+  return (
+    <div className={cx("grid gap-3", center ? "mx-auto max-w-2xl justify-items-center text-center" : "max-w-2xl")}>
+      {kicker ? <Kicker>{kicker}</Kicker> : null}
+      {title ? <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h2> : null}
+      {description ? <p className="text-pretty text-base text-muted-foreground sm:text-lg">{description}</p> : null}
+    </div>
+  );
+}
+
+// A detail's value: a link when it has an href (mailto:, tel:, a map).
+// raw: a plain <a>, not Button: it inherits the colour of the panel it
+// sits on (a filled panel is primary), and these hrefs leave the app.
+function Value({ detail, className }) {
+  if (!detail.href) return <span className={className}>{detail.value}</span>;
+  return (
+    <a href={detail.href} className={cx("break-words rounded-sm underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring", className)}>
+      {detail.value}
+    </a>
+  );
+}
+
+function DetailRows({ details, filled }) {
+  if (!details?.length) return null;
+  return (
+    <ul className="grid gap-5">
+      {details.map((d, i) => (
+        <li key={d.label ?? i} className="flex min-w-0 items-start gap-4">
+          <span className={cx("grid size-10 shrink-0 place-items-center rounded-lg", filled ? "bg-primary-foreground/15" : "bg-muted text-foreground")}>
+            <Icon name={d.icon ?? "info"} size={18} />
+          </span>
+          <div className="grid min-w-0 gap-0.5">
+            {d.label ? <p className={cx("text-sm", filled ? "opacity-80" : "text-muted-foreground")}>{d.label}</p> : null}
+            <Value detail={d} className="font-medium" />
+            {d.description ? <p className={cx("text-sm", filled ? "opacity-80" : "text-muted-foreground")}>{d.description}</p> : null}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Offices({ offices, filled }) {
+  if (!offices?.length) return null;
+  return (
+    <div className="grid gap-6 sm:grid-cols-2">
+      {offices.map((o, i) => (
+        <div key={o.name ?? i} className="grid min-w-0 content-start gap-1">
+          <p className="flex items-center gap-2 font-semibold">
+            <Icon name={o.icon ?? "building"} size={16} className={filled ? "opacity-80" : "text-muted-foreground"} />
+            {o.name}
+          </p>
+          {(o.lines ?? []).map((line, k) => (
+            <p key={k} className={cx("text-sm", filled ? "opacity-80" : "text-muted-foreground")}>
+              {line}
+            </p>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Panel({ title, body, details, offices, look }) {
+  const filled = look === "filled";
+  return (
+    <aside
+      className={cx(
+        "grid min-w-0 content-start gap-8 rounded-xl p-6 sm:p-8",
+        filled ? "bg-primary text-primary-foreground" : "border border-border bg-muted/40",
+      )}
+    >
+      {title || body ? (
+        <div className="grid gap-2">
+          {title ? <h3 className="text-xl font-semibold">{title}</h3> : null}
+          {body ? <p className={cx("text-pretty", filled ? "opacity-80" : "text-muted-foreground")}>{body}</p> : null}
+        </div>
+      ) : null}
+      <DetailRows details={details} filled={filled} />
+      <Offices offices={offices} filled={filled} />
+    </aside>
+  );
+}
+
+function DetailCards({ details, center, columns }) {
+  if (!details?.length) return null;
+  const cols = columns ?? Math.min(details.length, 3);
+  return (
+    <ul className={cx("grid gap-4", cols === 1 ? "grid-cols-1" : cols === 2 ? "sm:grid-cols-2" : cols === 4 ? "sm:grid-cols-2 lg:grid-cols-4" : "sm:grid-cols-2 lg:grid-cols-3")}>
+      {details.map((d, i) => (
+        <li
+          key={d.label ?? i}
+          className={cx("grid min-w-0 content-start gap-3 rounded-lg border border-border bg-card p-6 text-card-foreground", center && "justify-items-center text-center")}
+        >
+          <span className={cx("grid size-12 place-items-center bg-primary text-primary-foreground", center ? "rounded-full" : "rounded-lg")}>
+            <Icon name={d.icon ?? "info"} size={22} />
+          </span>
+          {d.label ? <h3 className="font-semibold">{d.label}</h3> : null}
+          {d.description ? <p className="text-pretty text-sm text-muted-foreground">{d.description}</p> : null}
+          {d.value ? <Value detail={d} className="font-medium text-primary" /> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// The phone, email and hours on one line above a form.
+function DetailLine({ details, center }) {
+  if (!details?.length) return null;
+  return (
+    <ul className={cx("flex flex-wrap gap-x-6 gap-y-2 text-sm", center && "justify-center")}>
+      {details.map((d, i) => (
+        <li key={d.label ?? i} className="flex min-w-0 items-center gap-2">
+          <Icon name={d.icon ?? "info"} size={16} className="shrink-0 text-muted-foreground" />
+          {d.label ? <span className="sr-only">{d.label}: </span> : null}
+          <Value detail={d} className="font-medium" />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function blank(names, fields, topics) {
+  const v = { email: "", message: "" };
+  if (names === "one") v.name = "";
+  else Object.assign(v, { firstName: "", lastName: "" });
+  for (const f of fields) v[f] = "";
+  if (topics) v.topic = "";
+  return v;
+}
+
+function ContactForm({
+  onSubmit,
+  names,
+  fields,
+  topics,
+  consent,
+  messageRows,
+  messageLabel,
+  submitLabel,
+  sent,
+  defaultValues,
+  labels,
+}) {
+  const uid = useId();
+  const id = (k) => `${uid}-${k}`;
+  const start = () => ({ ...blank(names, fields, topics), ...defaultValues, ...(consent ? { consent: false } : {}) });
+  const [values, setValues] = useState(start);
+  const [errors, setErrors] = useState({});
+  const [status, setStatus] = useState("idle");
+  const [failure, setFailure] = useState(null);
+  const L = { firstName: "First name", lastName: "Last name", name: "Name", email: "Email", phone: "Phone", company: "Company", subject: "Subject", ...labels };
+
+  const set = (k, v) => {
+    setValues((prev) => ({ ...prev, [k]: v }));
+    if (errors[k]) setErrors((prev) => ({ ...prev, [k]: undefined }));
+  };
+
+  function validate() {
+    const e = {};
+    if (names === "one" && !values.name?.trim()) e.name = "Tell us your name.";
+    if (names !== "one" && !values.firstName?.trim()) e.firstName = "Tell us your first name.";
+    if (!values.email?.trim()) e.email = "We need an email to reply to.";
+    else if (!EMAIL.test(values.email.trim())) e.email = "That email does not look right.";
+    if (topics?.required && !values.topic) e.topic = "Pick one.";
+    if (!values.message?.trim()) e.message = "Write a line or two.";
+    if (consent && !values.consent) e.consent = "Please agree before sending.";
+    return e;
+  }
+
+  async function submit(ev) {
+    ev.preventDefault();
+    if (status === "sending") return;
+    const e = validate();
+    setErrors(e);
+    const first = Object.keys(e)[0];
+    if (first) {
+      // The first problem gets the focus, so a keyboard user lands on it.
+      const el = document.getElementById(id(first));
+      (el?.matches("input, textarea") ? el : el?.querySelector("input, button, textarea"))?.focus();
+      return;
+    }
+    setStatus("sending");
+    setFailure(null);
+    const out = { ...values };
+    for (const k of Object.keys(out)) if (typeof out[k] === "string") out[k] = out[k].trim();
+    let res;
+    try {
+      res = await onSubmit(out);
+    } catch (err) {
+      res = { ok: false, error: err?.message };
+    }
+    if (res?.ok) {
+      setStatus("sent");
+    } else {
+      setStatus("idle");
+      setFailure(res?.error || "Your message was not sent. Check your connection and try again.");
+    }
+  }
+
+  if (status === "sent")
+    return (
+      <div className="grid gap-4" aria-live="polite">
+        <Notice tone="success" title={sent?.title ?? "Message sent"}>
+          {sent?.body ?? "Thanks — we read every message and reply within one working day."}
+        </Notice>
+        <div>
+          <Button
+            variant="secondary"
+            icon="repeat"
+            onClick={() => {
+              setValues(start());
+              setErrors({});
+              setStatus("idle");
+            }}
+          >
+            Send another
+          </Button>
+        </div>
+      </div>
+    );
+
+  const topicOptions = (topics?.options ?? []).map(optionOf);
+  const sending = status === "sending";
+  return (
+    <form noValidate onSubmit={submit} className="grid gap-5" aria-busy={sending || undefined}>
+      {topics && topics.style !== "radio" ? (
+        <div className="grid gap-2">
+          <p id={id("topic-label")} className="text-sm font-medium">
+            {topics.label ?? "What is it about?"}
+            {topics.required ? <span aria-hidden="true" className="text-destructive"> *</span> : null}
+          </p>
+          <div id={id("topic")} role="group" aria-labelledby={id("topic-label")} className="flex flex-wrap gap-2">
+            {topicOptions.map((o) => (
+              <Toggle
+                key={o.value}
+                size="sm"
+                pressed={values.topic === o.value}
+                onPressedChange={(on) => set("topic", on ? o.value : "")}
+                className="max-w-full"
+              >
+                {o.label}
+              </Toggle>
+            ))}
+          </div>
+          {errors.topic ? (
+            <p role="alert" className="text-xs text-destructive">
+              {errors.topic}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {names === "one" ? (
+        <Field id={id("name")} label={L.name} required error={errors.name}>
+          <Input id={id("name")} name="name" autoComplete="name" value={values.name} onChange={(e) => set("name", e.target.value)} invalid={!!errors.name} />
+        </Field>
+      ) : (
+        <div className="grid gap-5 sm:grid-cols-2">
+          <Field id={id("firstName")} label={L.firstName} required error={errors.firstName}>
+            <Input
+              id={id("firstName")}
+              name="firstName"
+              autoComplete="given-name"
+              value={values.firstName}
+              onChange={(e) => set("firstName", e.target.value)}
+              invalid={!!errors.firstName}
+            />
+          </Field>
+          <Field id={id("lastName")} label={L.lastName}>
+            <Input id={id("lastName")} name="lastName" autoComplete="family-name" value={values.lastName} onChange={(e) => set("lastName", e.target.value)} />
+          </Field>
+        </div>
+      )}
+
+      <div className={cx("grid gap-5", fields.includes("phone") && "sm:grid-cols-2")}>
+        <Field id={id("email")} label={L.email} required error={errors.email}>
+          <Input
+            id={id("email")}
+            name="email"
+            type="email"
+            inputMode="email"
+            autoComplete="email"
+            placeholder="you@company.com"
+            value={values.email}
+            onChange={(e) => set("email", e.target.value)}
+            invalid={!!errors.email}
+          />
+        </Field>
+        {fields.includes("phone") ? (
+          <Field id={id("phone")} label={L.phone} hint="Optional">
+            <Input id={id("phone")} name="phone" type="tel" inputMode="tel" autoComplete="tel" value={values.phone} onChange={(e) => set("phone", e.target.value)} />
+          </Field>
+        ) : null}
+      </div>
+
+      {fields.includes("company") ? (
+        <Field id={id("company")} label={L.company} hint="Optional">
+          <Input id={id("company")} name="company" autoComplete="organization" value={values.company} onChange={(e) => set("company", e.target.value)} />
+        </Field>
+      ) : null}
+
+      {topics && topics.style === "radio" ? (
+        <Field id={id("topic")} label={topics.label ?? "What is it about?"} required={topics.required} error={errors.topic}>
+          <RadioGroup
+            id={id("topic")}
+            name="topic"
+            orientation="horizontal"
+            options={topicOptions}
+            value={values.topic}
+            onChange={(v) => set("topic", v)}
+            invalid={!!errors.topic}
+          />
+        </Field>
+      ) : null}
+
+      {fields.includes("subject") ? (
+        <Field id={id("subject")} label={L.subject}>
+          <Input id={id("subject")} name="subject" value={values.subject} onChange={(e) => set("subject", e.target.value)} />
+        </Field>
+      ) : null}
+
+      <Field id={id("message")} label={messageLabel ?? "Message"} required error={errors.message}>
+        <Textarea
+          id={id("message")}
+          name="message"
+          rows={messageRows}
+          placeholder="What can we help with?"
+          value={values.message}
+          onChange={(e) => set("message", e.target.value)}
+          invalid={!!errors.message}
+        />
+      </Field>
+
+      {consent ? (
+        <div className="grid gap-1">
+          <Checkbox
+            id={id("consent")}
+            name="consent"
+            checked={!!values.consent}
+            onChange={(e) => set("consent", e.target.checked)}
+            aria-invalid={errors.consent ? true : undefined}
+            aria-describedby={errors.consent ? id("consent-error") : undefined}
+            label={consent}
+          />
+          {errors.consent ? (
+            <p id={id("consent-error")} role="alert" className="text-xs text-destructive">
+              {errors.consent}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {failure ? (
+        <Notice tone="danger" title="Not sent">
+          {failure}
+        </Notice>
+      ) : null}
+
+      <div>
+        <Button type="submit" variant="primary" icon="send" loading={sending} className="w-full sm:w-auto">
+          {submitLabel ?? "Send message"}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export function ContactSection({
+  layout = "split",
+  kicker,
+  title = "Get in touch",
+  description,
+  align,
+  details,
+  offices,
+  panel = "plain",
+  panelTitle,
+  panelBody,
+  cardsPosition = "above",
+  cardColumns,
+  image,
+  imageAlt = "",
+  imagePosition = "side",
+  onSubmit,
+  nameFields = "split",
+  fields = [],
+  topics,
+  consent,
+  messageLabel,
+  messageRows = 5,
+  submitLabel,
+  sent,
+  defaultValues,
+  labels,
+  label,
+  className,
+}) {
+  const extra = (fields ?? []).filter((f) => OPTIONAL.includes(f));
+  const center = (align ?? (layout === "split" ? "start" : "center")) === "center";
+  const form = onSubmit ? (
+    <ContactForm
+      onSubmit={onSubmit}
+      names={nameFields === "one" ? "one" : "split"}
+      fields={extra}
+      topics={topics?.options?.length ? topics : null}
+      consent={consent}
+      messageRows={messageRows}
+      messageLabel={messageLabel}
+      submitLabel={submitLabel}
+      sent={sent}
+      defaultValues={defaultValues}
+      labels={labels}
+    />
+  ) : null;
+  const formCard = form ? <div className="min-w-0 rounded-xl border border-border bg-card p-5 text-card-foreground sm:p-8">{form}</div> : null;
+
+  let body;
+  if (layout === "cards") {
+    const cards = <DetailCards details={details} center={center && cardsPosition !== "beside"} columns={cardsPosition === "beside" && form ? 1 : cardColumns} />;
+    body = !form ? (
+      cards
+    ) : cardsPosition === "beside" ? (
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
+        {cards}
+        {formCard}
+      </div>
+    ) : (
+      <div className="grid gap-10">
+        {cards}
+        <div className="mx-auto w-full max-w-2xl">{formCard}</div>
+      </div>
+    );
+  } else if (layout === "form") {
+    if (image && imagePosition === "background" && form)
+      body = (
+        <div className="relative isolate overflow-hidden rounded-xl">
+          <div className="absolute inset-0 -z-10">
+            <Image src={image} alt={imageAlt} rounded="none" className="h-full w-full" />
+          </div>
+          <div className="grid justify-items-center bg-background/70 px-4 py-10 sm:px-8 sm:py-16">
+            <div className="w-full max-w-xl">{formCard}</div>
+          </div>
+        </div>
+      );
+    else if (image && form)
+      body = (
+        <div className="grid items-stretch gap-8 md:grid-cols-2">
+          <div className="hidden md:block">
+            <Image src={image} alt={imageAlt} rounded="lg" className="h-full min-h-96 w-full" />
+          </div>
+          <div className="grid min-w-0 content-start gap-6">
+            <DetailLine details={details} />
+            {formCard}
+          </div>
+        </div>
+      );
+    else
+      body = (
+        <div className="mx-auto grid w-full max-w-2xl gap-6">
+          <DetailLine details={details} center={center} />
+          {formCard}
+        </div>
+      );
+  } else {
+    const side = <Panel title={panelTitle} body={panelBody} details={details} offices={offices} look={panel} />;
+    body = form ? (
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
+        {formCard}
+        {side}
+      </div>
+    ) : (
+      side
+    );
+  }
+
+  return (
+    <section aria-label={label ?? (typeof title === "string" ? title : "Contact")} className={cx("px-4 py-16 sm:px-6 sm:py-20", className)}>
+      <div className="mx-auto grid w-full max-w-6xl gap-10 sm:gap-12">
+        <Header kicker={kicker} title={title} description={description} center={center} />
+        {body}
+      </div>
+    </section>
+  );
+}

package/registry/blocks/contact-section/demo.jsx

@@ -0,0 +1,93 @@
+"use client";
+
+// The ContactSection in every variant — the gallery's and the smoke
+// test's surface. Not installed into apps: `makersclaw add
+// contact-section` lays index.js and contact-section.jsx only. Pick a
+// variant, and whether the next send succeeds or fails; nothing is sent.
+import { useState } from "react";
+import { Field, Select, ToggleGroup } from "../components/ui";
+import { ContactSection } from "../components/blocks/contact-section";
+
+const EMAIL = { icon: "mail", label: "Email", value: "hello@fieldline.io", href: "mailto:hello@fieldline.io" };
+const PHONE = { icon: "phone", label: "Phone", value: "+44 20 7946 0321", href: "tel:+442079460321" };
+const ADDRESS = { icon: "map", label: "Studio", value: "14 Canal Street, Manchester M1 3HE" };
+const HOURS = { icon: "clock", label: "Hours", value: "Mon–Fri, 9:00–18:00 GMT" };
+
+const CARDS = [
+  { ...EMAIL, label: "Email us", description: "For anything at all. A person replies within a working day." },
+  { ...PHONE, label: "Call sales", description: "Talk through a plan for your team, no slides." },
+  { ...ADDRESS, label: "Visit", description: "Coffee is on us. Book ahead so someone is in." },
+];
+
+const QUICK = [
+  { icon: "message-circle", label: "Live chat", description: "Weekdays, usually under five minutes.", value: "Start a chat", href: "/chat" },
+  { icon: "life-buoy", label: "Help centre", description: "Guides for setup, billing and imports.", value: "Browse guides", href: "/help" },
+  { icon: "calendar", label: "Book a call", description: "Thirty minutes with someone from sales.", value: "Pick a time", href: "/book" },
+];
+
+const OFFICES = [
+  { name: "Manchester", lines: ["14 Canal Street", "M1 3HE, United Kingdom", "+44 20 7946 0321"] },
+  { name: "Lisbon", lines: ["Rua da Prata 88", "1100-420 Lisboa, Portugal", "+351 21 555 0192"] },
+];
+
+const TOPICS = ["Sales", "Support", "Partnerships", "Press"];
+const CONSENT = "I agree to the privacy policy and to being contacted about this message.";
+const HEAD = { kicker: "Contact", title: "Talk to a person", description: "Questions about plans, a migration, or a feature you need — write and we reply within one working day." };
+
+const VARIANTS = [
+  { id: "01", label: "01 · Form beside contact info", props: { ...HEAD, layout: "split", details: [EMAIL, PHONE, ADDRESS], consent: CONSENT, panelTitle: "Other ways in", panelBody: "Prefer a call or a visit? Here is where to find us." } },
+  { id: "02", label: "02 · Form with a phone field", props: { ...HEAD, layout: "form", fields: ["phone"], details: [EMAIL, PHONE] } },
+  { id: "03", label: "03 · Form with a filled panel", props: { ...HEAD, layout: "split", panel: "filled", details: [EMAIL, PHONE, ADDRESS], panelTitle: "Contact information", panelBody: "Fill in the form and we reply within one working day." } },
+  { id: "04", label: "04 · Icon cards only", props: { ...HEAD, layout: "cards", align: "start", details: CARDS } },
+  { id: "05", label: "05 · Topic chips above the form", props: { ...HEAD, layout: "form", topics: { label: "What is it about?", options: TOPICS, style: "chips", required: true } } },
+  { id: "06", label: "06 · Round icon cards, centred", props: { ...HEAD, layout: "cards", details: CARDS } },
+  { id: "07", label: "07 · Form with offices", props: { ...HEAD, layout: "split", offices: OFFICES, consent: CONSENT, panelTitle: "Our offices" } },
+  { id: "08", label: "08 · Area of interest radios", props: { ...HEAD, layout: "split", panel: "filled", details: [EMAIL, PHONE], panelTitle: "Contact information", topics: { label: "Area of interest", options: TOPICS, style: "radio" } } },
+  { id: "09", label: "09 · Detailed info panel", props: { ...HEAD, layout: "split", panel: "filled", details: [EMAIL, PHONE, ADDRESS, HOURS], offices: OFFICES.slice(1), panelTitle: "Everything in one place", panelBody: "Email is fastest. For anything urgent on a paid plan, call." } },
+  { id: "10", label: "10 · Info cards above the form", props: { ...HEAD, layout: "cards", details: CARDS } },
+  { id: "11", label: "11 · Phone and email above the form", props: { ...HEAD, layout: "form", details: [PHONE, EMAIL, HOURS] } },
+  { id: "12", label: "12 · Form with a company field", props: { ...HEAD, layout: "form", fields: ["company"], nameFields: "one", consent: CONSENT } },
+  { id: "13", label: "13 · Info cards beside the form", props: { ...HEAD, layout: "cards", cardsPosition: "beside", align: "start", details: [EMAIL, PHONE, HOURS] } },
+  { id: "14", label: "14 · Subject and required marks", props: { ...HEAD, layout: "form", fields: ["subject", "phone"], consent: CONSENT } },
+  { id: "15", label: "15 · Contact options and a quick form", props: { ...HEAD, layout: "cards", details: QUICK, nameFields: "one", fields: ["phone"], messageLabel: "Your question", messageRows: 3, submitLabel: "Send" } },
+];
+
+// Cards-only variants have no form: they get no onSubmit.
+const NO_FORM = new Set(["04", "06"]);
+
+const OUTCOMES = [
+  { value: "ok", label: "Send succeeds" },
+  { value: "fail", label: "Send fails" },
+];
+
+export default function ContactSectionDemo() {
+  const [variant, setVariant] = useState("01");
+  const [outcome, setOutcome] = useState("ok");
+  const [last, setLast] = useState(null);
+  const v = VARIANTS.find((x) => x.id === variant) ?? VARIANTS[0];
+
+  async function send(values) {
+    await new Promise((r) => setTimeout(r, 900));
+    if (outcome === "fail") return { ok: false, error: "Our mail server did not answer. Your message is still here — try again in a minute." };
+    setLast(values);
+    return { ok: true };
+  }
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex flex-wrap items-end gap-3 px-4 pt-4 sm:px-6">
+        <Field id="c-variant" label="Variant" className="w-full sm:w-80">
+          <Select id="c-variant" value={variant} onChange={(e) => setVariant(e.target.value)} options={VARIANTS.map((x) => ({ value: x.id, label: x.label }))} />
+        </Field>
+        <ToggleGroup aria-label="Next send" items={OUTCOMES} value={outcome} onChange={setOutcome} />
+      </div>
+      {last ? (
+        <p className="px-4 text-sm text-muted-foreground sm:px-6">
+          Last sent: <span className="font-medium text-foreground">{last.email}</span>
+          {last.topic ? ` · ${last.topic}` : ""}
+        </p>
+      ) : null}
+      <ContactSection key={variant} {...v.props} onSubmit={NO_FORM.has(variant) ? undefined : send} />
+    </div>
+  );
+}

package/registry/blocks/contact-section/index.js

@@ -0,0 +1,4 @@
+// The ContactSection block — `makersclaw add contact-section`. Fixed:
+// compose it through its props (README.md beside this file); a section
+// it cannot be is your own component in components/.
+export { ContactSection } from "./contact-section";