makersclaw 0.2.0 → 0.3.0

package/registry/blocks/footer/README.md

@@ -0,0 +1,133 @@
+# Footer
+
+A public site's footer. It holds the brand and a line about it, link
+columns (or one row of links), social buttons drawn with the kit's brand
+marks, and the legal line with its links. Optional parts: a newsletter
+sign-up (with a consent box), a call to action, a large brand statement
+or quote, language and currency selects, and a version badge.
+
+Three layouts:
+- **columns** (default) — the brand, tagline and socials beside the link
+  columns (and an inline sign-up), then the legal row;
+- **simple** — one row: brand, links, socials; then the legal row;
+- **centred** — everything stacked in the middle.
+
+The sign-up checks the email (and the consent, when asked) in place,
+then calls `newsletter.onSubscribe(email, { consent })`, which is async
+and returns `{ ok }`. While it runs the button spins. `{ ok: false,
+error }` (or a throw) shows the error and keeps the email. `{ ok: true }`
+shows "You're subscribed". It is a full-width section: it pads itself
+and centres its content.
+
+```jsx
+import { Footer } from "../components/blocks/footer";   // a Makersclaw app ("./blocks/footer" from components/)
+import { Footer } from "@/components/makersclaw/blocks/footer";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component (a
+layout is the usual place).
+
+## The data
+
+```js
+// a link, anywhere: columns, links, legalLinks
+{ label: "Pricing", href: "/pricing", external?: true }   // external opens a new tab
+
+// columns
+[{ title: "Product", links: [link, …] }, …]               // up to 5 across; 2 on a phone
+
+// socials
+[{ network: "x", href: "https://x.com/fieldline", label? }, …]
+```
+
+`network` is one of `x`, `linkedin`, `github`, `youtube`, `instagram`,
+`facebook`, `google`, `apple`, `microsoft`, `email`, `rss`. Anything
+else needs an `icon` (a kit Icon name) and a `label`. Each is an icon
+button, named to a screen reader ("X", "LinkedIn"), opening a new tab.
+
+## Props
+
+- `layout` — `columns` (default) · `simple` · `centered`.
+- `brand` — a node: your logo, linked home if you like.
+- `tagline` — a line under the brand (columns and centred).
+- `columns` — link columns (columns layout).
+- `links` — one row of links (simple and centred; under the socials in
+  columns).
+- `socials` — as above.
+- `newsletter` — `{ onSubscribe, title?, body?, label?, placeholder?,
+  consent?, look?, doneTitle?, doneBody? }`. `onSubscribe(email, {
+  consent })` is async and returns `{ ok: true }` or `{ ok: false,
+  error? }`; without it there is no sign-up. `consent` is the checkbox's
+  label (a string or a node with a link), and must be ticked. `look`:
+  `inline` (default: a column beside the links) · `card` (a full-width
+  card under them). `label` is the button, default "Subscribe".
+- `cta` — `{ title?, body?, actions: [{ label, href?, onClick?, icon?,
+  variant? }] }`: "Sign in", "Get the app". A band above the legal row;
+  the first action is primary unless it says otherwise.
+- `statement` — a large line at the top: a string, or `{ text, by }` for
+  a quote.
+- `locales` — `[{ id, label, options: [{ value, label }], value?,
+  defaultValue?, onChange? }]`: language, currency, country selects in
+  the legal row. Uncontrolled unless you pass `value`.
+- `version` — "v4.2.0": a code badge in the legal row.
+- `legal` — the copyright line: "© 2026 Fieldline Ltd.". Pass the year;
+  the block does not read the clock.
+- `legalLinks` — privacy, terms, cookies.
+- `onNavigate(link, event)` — called when any link or a `cta` action with
+  an `href` is followed, before navigation; `event.preventDefault()`
+  stops it.
+- `label` — what a screen reader calls the footer and its link row.
+  Default "Site".
+- `className` — the footer's spacing. Never colour.
+
+## Example
+
+```jsx
+// components/SiteFooter.jsx
+"use client";
+import { Icon } from "./ui";
+import { Footer } from "./blocks/footer";
+import { subscribe } from "../lib/actions";   // your server action
+
+export default function SiteFooter() {
+  return (
+    <Footer
+      brand={<span className="inline-flex items-center gap-2"><Icon name="zap" /> Fieldline</span>}
+      tagline="The pipeline small sales teams actually keep up to date."
+      columns={[
+        { title: "Product", links: [{ label: "Pricing", href: "/pricing" }, { label: "Changelog", href: "/changelog" }] },
+        { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Careers", href: "/careers" }] },
+      ]}
+      socials={[{ network: "x", href: "https://x.com/fieldline" }, { network: "linkedin", href: "https://linkedin.com/company/fieldline" }]}
+      newsletter={{
+        body: "One email a month.",
+        consent: "I agree to the privacy policy.",
+        onSubscribe: async (email) => subscribe(email),
+      }}
+      legal="© 2026 Fieldline Ltd. All rights reserved."
+      legalLinks={[{ label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }]}
+    />
+  );
+}
+```
+
+## What it will not do
+
+- Change the language or currency by itself: `locales[].onChange` is
+  yours.
+- Stick to the bottom of a short page: that is your layout's
+  `min-h-dvh` flex column.
+- Paint itself in the primary colour: the look is the workspace
+  theme's.
+- Draw store badges: "Get the app" is two buttons with the Apple and
+  Google marks.
+
+A footer it cannot be is your own component in `components/`, built
+from the kit — not an edit to this block. Its files are fixed: `npm run
+check` refuses a change, and `makersclaw add footer` restores them.
+
+## Credits
+
+Layouts ported from Creative Tim UI's footer blocks
+(https://github.com/creativetimofficial/ui, MIT), rewritten on the
+Makersclaw kit.

package/registry/blocks/footer/block.json

@@ -0,0 +1,11 @@
+{
+  "name": "footer",
+  "title": "Footer",
+  "description": "A public site's footer: brand and tagline, link columns or one row of links, social buttons in the kit's brand marks (X, LinkedIn, GitHub, YouTube, Instagram, Facebook), and the legal line with its links; optionally a newsletter sign-up with consent (validates, saves through an async onSubscribe returning { ok }, shows the failure), a call to action, a large brand statement, language and currency selects, and a version badge. Simple, columns or centred.",
+  "useWhen": "The bottom of every page of a public site: a marketing site, a docs hub, a shop, a customer portal. Not for an app's own status bar or a toolbar pinned to the bottom of a screen.",
+  "tags": ["footer", "site footer", "links", "social", "newsletter", "subscribe", "legal", "copyright", "language", "currency", "marketing", "landing page"],
+  "exports": ["Footer"],
+  "files": ["index.js", "footer.jsx"],
+  "requires": [],
+  "frame": "bleed"
+}

package/registry/blocks/footer/demo.jsx

@@ -0,0 +1,119 @@
+"use client";
+
+// The Footer in every variant — the gallery's and the smoke test's
+// surface. Not installed into apps: `makersclaw add footer` lays index.js
+// and footer.jsx only. Links are caught by onNavigate and only named
+// here; pick whether the next newsletter sign-up succeeds or fails.
+import { useState } from "react";
+import { Field, Icon, Select, ToggleGroup } from "../components/ui";
+import { Footer } from "../components/blocks/footer";
+
+function Logo() {
+  return (
+    <span className="inline-flex items-center gap-2">
+      <Icon name="zap" size={20} className="text-primary" />
+      Fieldline
+    </span>
+  );
+}
+
+const COLUMNS = [
+  { title: "Product", links: [{ label: "Pipeline", href: "/product/pipeline" }, { label: "Automations", href: "/product/automations" }, { label: "Reports", href: "/product/reports" }, { label: "Pricing", href: "/pricing" }] },
+  { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Careers", href: "/careers" }, { label: "Customers", href: "/customers" }, { label: "Press", href: "/press" }] },
+  { title: "Resources", links: [{ label: "Docs", href: "/docs" }, { label: "Guides", href: "/guides" }, { label: "Changelog", href: "/changelog" }, { label: "Status", href: "/status" }] },
+];
+const MORE = [
+  { title: "Solutions", links: [{ label: "Founders", href: "/for/founders" }, { label: "Sales teams", href: "/for/sales" }, { label: "Agencies", href: "/for/agencies" }] },
+  { title: "Support", links: [{ label: "Help centre", href: "/help" }, { label: "Contact", href: "/contact" }, { label: "Security", href: "/security" }] },
+];
+const ROW = [
+  { label: "Product", href: "/product" },
+  { label: "Pricing", href: "/pricing" },
+  { label: "Customers", href: "/customers" },
+  { label: "Docs", href: "/docs" },
+  { label: "Contact", href: "/contact" },
+];
+const SOCIALS = [
+  { network: "x", href: "https://x.com" },
+  { network: "linkedin", href: "https://linkedin.com" },
+  { network: "github", href: "https://github.com" },
+  { network: "youtube", href: "https://youtube.com" },
+  { network: "instagram", href: "https://instagram.com" },
+  { network: "facebook", href: "https://facebook.com" },
+];
+const LEGAL = "© 2026 Fieldline Ltd. All rights reserved.";
+const LEGAL_LINKS = [
+  { label: "Privacy", href: "/privacy" },
+  { label: "Terms", href: "/terms" },
+  { label: "Cookies", href: "/cookies" },
+];
+const TAGLINE = "The pipeline small sales teams actually keep up to date.";
+const NEWS = { title: "Subscribe", body: "One email a month: what shipped, and what we learned selling it.", consent: "I agree to the terms and the privacy policy." };
+const LANGUAGE = { id: "language", label: "Language", options: [{ value: "en", label: "English" }, { value: "de", label: "Deutsch" }, { value: "pt", label: "Português" }, { value: "fr", label: "Français" }] };
+const CURRENCY = { id: "currency", label: "Currency", options: [{ value: "usd", label: "USD $" }, { value: "eur", label: "EUR €" }, { value: "gbp", label: "GBP £" }] };
+const COUNTRY = { id: "country", label: "Country", options: [{ value: "gb", label: "United Kingdom" }, { value: "us", label: "United States" }, { value: "pt", label: "Portugal" }] };
+
+const BASE = { brand: <Logo />, legal: LEGAL };
+
+const VARIANTS = [
+  { id: "01", label: "01 · One row, links and socials", props: { ...BASE, layout: "simple", links: ROW, socials: SOCIALS.slice(0, 4) } },
+  { id: "02", label: "02 · Columns and a sign-up", props: { ...BASE, columns: COLUMNS, newsletter: NEWS, legalLinks: LEGAL_LINKS } },
+  { id: "03", label: "03 · A call to action", props: { ...BASE, layout: "simple", links: ROW, cta: { title: "Ready when you are", body: "Your workspace is one click away.", actions: [{ label: "Sign in", href: "/login", icon: "log-in" }] } } },
+  { id: "04", label: "04 · Sign-up in a card", props: { ...BASE, tagline: TAGLINE, columns: COLUMNS, socials: SOCIALS.slice(0, 3), newsletter: { ...NEWS, title: "Get the monthly letter", look: "card" } } },
+  { id: "05", label: "05 · Language and currency", props: { ...BASE, columns: COLUMNS, locales: [LANGUAGE, CURRENCY], legalLinks: LEGAL_LINKS } },
+  { id: "06", label: "06 · Brand and many columns", props: { ...BASE, tagline: TAGLINE, socials: SOCIALS.slice(0, 3), columns: [...COLUMNS, ...MORE], legalLinks: LEGAL_LINKS } },
+  { id: "07", label: "07 · Country picker", props: { ...BASE, layout: "simple", links: ROW.slice(0, 3), locales: [COUNTRY] } },
+  { id: "08", label: "08 · Version badge", props: { ...BASE, layout: "simple", version: "v4.2.0", legalLinks: LEGAL_LINKS } },
+  { id: "09", label: "09 · A notice and a button", props: { ...BASE, layout: "simple", cta: { body: "New: forecasts now show the deals behind every number.", actions: [{ label: "Read the release", href: "/changelog", variant: "secondary" }] } } },
+  { id: "10", label: "10 · Page links only", props: { legal: LEGAL, layout: "simple", links: ROW } },
+  { id: "11", label: "11 · A large statement", props: { ...BASE, statement: "Sell like a team of ten. Stay a team of three.", tagline: TAGLINE, columns: COLUMNS } },
+  { id: "12", label: "12 · Navigation links", props: { ...BASE, layout: "simple", links: [...ROW, { label: "Careers", href: "/careers" }, { label: "Status", href: "/status" }], legalLinks: LEGAL_LINKS } },
+  { id: "13", label: "13 · Centred", props: { ...BASE, layout: "centered", tagline: TAGLINE, links: ROW, socials: SOCIALS } },
+  { id: "14", label: "14 · Get the app", props: { ...BASE, tagline: TAGLINE, links: ROW, cta: { title: "Get the app", body: "Your pipeline on the train, with offline notes.", actions: [{ label: "App Store", href: "/apps/ios", icon: "apple", variant: "secondary" }, { label: "Google Play", href: "/apps/android", icon: "google", variant: "secondary" }] } } },
+  { id: "15", label: "15 · A quote above the columns", props: { ...BASE, statement: { text: "“We stopped losing deals in a spreadsheet.”", by: "Maya Okafor, Greenhaus" }, columns: COLUMNS, socials: SOCIALS.slice(0, 4) } },
+];
+
+const OUTCOMES = [
+  { value: "ok", label: "Sign-up succeeds" },
+  { value: "fail", label: "Sign-up fails" },
+];
+
+export default function FooterDemo() {
+  const [variant, setVariant] = useState("02");
+  const [outcome, setOutcome] = useState("ok");
+  const [followed, setFollowed] = useState(null);
+  const v = VARIANTS.find((x) => x.id === variant) ?? VARIANTS[0];
+  const props = { ...v.props };
+  if (props.newsletter) {
+    props.newsletter = {
+      ...props.newsletter,
+      onSubscribe: async () => {
+        await new Promise((r) => setTimeout(r, 900));
+        return outcome === "fail" ? { ok: false, error: "The list service did not answer. Try again in a minute." } : { 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="f-variant" label="Variant" className="w-full sm:w-80">
+          <Select id="f-variant" value={variant} onChange={(e) => setVariant(e.target.value)} options={VARIANTS.map((x) => ({ value: x.id, label: x.label }))} />
+        </Field>
+        <ToggleGroup aria-label="Next sign-up" items={OUTCOMES} value={outcome} onChange={setOutcome} />
+      </div>
+      <p className="px-4 text-sm text-muted-foreground sm:px-6">
+        Followed: <span className="font-medium text-foreground">{followed ?? "nothing yet"}</span>
+      </p>
+      <div className="h-24" aria-hidden="true" />
+      <Footer
+        key={variant}
+        {...props}
+        onNavigate={(link, e) => {
+          e.preventDefault();
+          setFollowed(link.href);
+        }}
+      />
+    </div>
+  );
+}

package/registry/blocks/footer/footer.jsx

@@ -0,0 +1,406 @@
+"use client";
+
+import { useId, useState } from "react";
+import { Badge, Button, Checkbox, Field, IconButton, Input, Notice, Select, cx } from "../../ui";
+
+// Footer — a public site's footer: the brand and a line about it, link
+// columns (or one row of links), social buttons drawn with the kit's
+// brand marks, and the legal line; optionally a newsletter sign-up (with
+// consent), a call to action, a large brand statement, language or
+// currency pickers, and a version badge. Three layouts: simple (one
+// row), columns, and centred. The sign-up validates the email and saves
+// through `newsletter.onSubscribe(email, extra)` — async, returning
+// { ok } — showing the failure or a subscribed state.
+//
+//   <Footer brand={<Logo />} columns={COLUMNS} socials={SOCIALS}
+//           legal="© 2026 Fieldline Ltd." />
+//
+// README.md beside this file lists every prop.
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// A network's name and its brand glyph.
+const NETWORKS = {
+  x: { label: "X", icon: "x-logo" },
+  linkedin: { label: "LinkedIn", icon: "linkedin" },
+  instagram: { label: "Instagram", icon: "instagram" },
+  youtube: { label: "YouTube", icon: "youtube" },
+  facebook: { label: "Facebook", icon: "facebook" },
+  github: { label: "GitHub", icon: "github" },
+  google: { label: "Google", icon: "google" },
+  apple: { label: "Apple", icon: "apple" },
+  microsoft: { label: "Microsoft", icon: "microsoft" },
+  email: { label: "Email", icon: "mail" },
+  rss: { label: "RSS", icon: "globe" },
+};
+
+const COLUMNS = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-2 sm:grid-cols-3",
+  4: "grid-cols-2 sm:grid-cols-4",
+  5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
+};
+
+function FooterLink({ link, onNavigate }) {
+  return (
+    <Button
+      variant="link"
+      tone="muted"
+      href={link.href}
+      onClick={(e) => onNavigate?.(link, e)}
+      target={link.external ? "_blank" : undefined}
+      rel={link.external ? "noreferrer" : undefined}
+    >
+      {link.label}
+    </Button>
+  );
+}
+
+function LinkRow({ links, onNavigate, center, label }) {
+  if (!links?.length) return null;
+  return (
+    <nav aria-label={label}>
+      <ul className={cx("flex flex-wrap gap-x-6 gap-y-3", center && "justify-center")}>
+        {links.map((l, i) => (
+          <li key={l.href ?? l.label ?? i}>
+            <FooterLink link={l} onNavigate={onNavigate} />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+function Columns({ columns, onNavigate }) {
+  if (!columns?.length) return null;
+  const n = Math.min(columns.length, 5);
+  return (
+    <div className={cx("grid min-w-0 gap-x-6 gap-y-10", COLUMNS[n])}>
+      {columns.map((col, i) => (
+        <nav key={col.title ?? i} aria-label={col.title} className="min-w-0">
+          {col.title ? <h3 className="mb-4 text-sm font-semibold">{col.title}</h3> : null}
+          <ul className="grid gap-3">
+            {(col.links ?? []).map((l, k) => (
+              <li key={l.href ?? l.label ?? k} className="min-w-0">
+                <FooterLink link={l} onNavigate={onNavigate} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ))}
+    </div>
+  );
+}
+
+function Socials({ socials, center }) {
+  if (!socials?.length) return null;
+  return (
+    <ul aria-label="Social links" className={cx("flex flex-wrap items-center gap-1", center && "justify-center")}>
+      {socials.map((s, i) => {
+        const net = NETWORKS[s.network] ?? { label: s.label ?? s.network, icon: s.icon ?? "link" };
+        return (
+          <li key={s.href ?? i}>
+            <IconButton
+              icon={s.icon ?? net.icon}
+              label={s.label ?? net.label}
+              href={s.href}
+              target="_blank"
+              rel="noreferrer"
+            />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function Brand({ brand, tagline, center }) {
+  if (!brand && !tagline) return null;
+  return (
+    <div className={cx("grid min-w-0 content-start gap-3", center && "justify-items-center text-center")}>
+      {brand ? <div className="text-lg font-semibold">{brand}</div> : null}
+      {tagline ? <p className="max-w-sm text-pretty text-sm text-muted-foreground">{tagline}</p> : null}
+    </div>
+  );
+}
+
+function Locales({ locales }) {
+  const [own, setOwn] = useState(() => Object.fromEntries((locales ?? []).map((l) => [l.id, l.defaultValue ?? l.options?.[0]?.value ?? ""])));
+  const uid = useId();
+  if (!locales?.length) return null;
+  return (
+    <div className="flex flex-wrap gap-3">
+      {locales.map((l) => {
+        const value = l.value ?? own[l.id];
+        const fid = `${uid}-${l.id}`;
+        return (
+          <Field key={l.id} id={fid} className="w-full min-w-0 sm:w-44">
+            <label htmlFor={fid} className="sr-only">
+              {l.label}
+            </label>
+            <Select
+              id={fid}
+              value={value}
+              options={l.options}
+              onChange={(e) => {
+                const v = e.target.value;
+                if (l.value === undefined) setOwn((prev) => ({ ...prev, [l.id]: v }));
+                l.onChange?.(v);
+              }}
+            />
+          </Field>
+        );
+      })}
+    </div>
+  );
+}
+
+function Newsletter({ newsletter, center }) {
+  const uid = useId();
+  const [email, setEmail] = useState("");
+  const [agreed, setAgreed] = useState(false);
+  const [error, setError] = useState(null);
+  const [status, setStatus] = useState("idle");
+  const [failure, setFailure] = useState(null);
+  const card = newsletter.look === "card";
+
+  async function submit(ev) {
+    ev.preventDefault();
+    if (status === "sending") return;
+    const value = email.trim();
+    let problem = null;
+    if (!value) problem = "Enter your email.";
+    else if (!EMAIL.test(value)) problem = "That email does not look right.";
+    else if (newsletter.consent && !agreed) problem = "Please agree before subscribing.";
+    setError(problem);
+    if (problem) {
+      document.getElementById(problem.startsWith("Please") ? `${uid}-consent` : `${uid}-email`)?.focus();
+      return;
+    }
+    setStatus("sending");
+    setFailure(null);
+    let res;
+    try {
+      res = await newsletter.onSubscribe(value, { consent: newsletter.consent ? agreed : undefined });
+    } catch (err) {
+      res = { ok: false, error: err?.message };
+    }
+    if (res?.ok) setStatus("done");
+    else {
+      setStatus("idle");
+      setFailure(res?.error || "You were not subscribed. Try again in a minute.");
+    }
+  }
+
+  return (
+    <div
+      className={cx(
+        "grid min-w-0 content-start gap-3",
+        card && "rounded-xl border border-border bg-card p-6 text-card-foreground sm:p-8 md:grid-cols-2 md:items-center md:gap-8",
+        center && !card && "justify-items-center text-center",
+      )}
+    >
+      <div className="grid gap-1">
+        <h3 className={cx("font-semibold", card ? "text-lg" : "text-sm")}>{newsletter.title ?? "Subscribe"}</h3>
+        {newsletter.body ? <p className="max-w-sm text-pretty text-sm text-muted-foreground">{newsletter.body}</p> : null}
+      </div>
+      {status === "done" ? (
+        <Notice tone="success" title={newsletter.doneTitle ?? "You're subscribed"}>
+          {newsletter.doneBody ?? `We'll write to ${email.trim()}.`}
+        </Notice>
+      ) : (
+        <form noValidate onSubmit={submit} className="grid w-full max-w-md gap-2" aria-busy={status === "sending" || undefined}>
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-start">
+            <Field id={`${uid}-email`} className="min-w-0 flex-1" error={error && !error.startsWith("Please") ? error : undefined}>
+              <label htmlFor={`${uid}-email`} className="sr-only">
+                Email
+              </label>
+              <Input
+                id={`${uid}-email`}
+                type="email"
+                inputMode="email"
+                autoComplete="email"
+                placeholder={newsletter.placeholder ?? "you@company.com"}
+                value={email}
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                  if (error) setError(null);
+                }}
+                invalid={!!error && !error.startsWith("Please")}
+                aria-describedby={error && !error.startsWith("Please") ? `${uid}-email-error` : undefined}
+              />
+            </Field>
+            <Button type="submit" variant="primary" loading={status === "sending"} className="shrink-0">
+              {newsletter.label ?? "Subscribe"}
+            </Button>
+          </div>
+          {newsletter.consent ? (
+            <div className="grid gap-1 text-left">
+              <Checkbox
+                id={`${uid}-consent`}
+                checked={agreed}
+                onChange={(e) => {
+                  setAgreed(e.target.checked);
+                  if (error) setError(null);
+                }}
+                aria-invalid={error?.startsWith("Please") ? true : undefined}
+                label={newsletter.consent}
+                className="text-muted-foreground"
+              />
+              {error?.startsWith("Please") ? (
+                <p role="alert" className="text-xs text-destructive">
+                  {error}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+          {failure ? (
+            <Notice tone="danger" title="Not subscribed">
+              {failure}
+            </Notice>
+          ) : null}
+        </form>
+      )}
+    </div>
+  );
+}
+
+function Cta({ cta, center, onNavigate }) {
+  if (!cta) return null;
+  return (
+    <div className={cx("flex flex-col gap-4 md:flex-row md:items-center md:justify-between", center && "items-center text-center md:flex-col")}>
+      <div className="grid min-w-0 gap-1">
+        {cta.title ? <h3 className="text-balance text-2xl font-semibold tracking-tight">{cta.title}</h3> : null}
+        {cta.body ? <p className="max-w-xl text-pretty text-muted-foreground">{cta.body}</p> : null}
+      </div>
+      {cta.actions?.length ? (
+        <div className={cx("flex flex-wrap gap-3", center && "justify-center")}>
+          {cta.actions.map((a, i) => (
+            <Button
+              key={a.label ?? i}
+              variant={a.variant ?? (i === 0 ? "primary" : "secondary")}
+              icon={a.icon}
+              href={a.href}
+              onClick={(e) => {
+                a.onClick?.(e);
+                if (a.href) onNavigate?.(a, e);
+              }}
+            >
+              {a.label}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function Statement({ statement, center }) {
+  if (!statement) return null;
+  const text = typeof statement === "string" ? statement : statement.text;
+  const by = typeof statement === "string" ? null : statement.by;
+  return (
+    <figure className={cx("grid gap-3 border-b border-border pb-10", center && "justify-items-center text-center")}>
+      <blockquote className="max-w-4xl text-balance text-3xl font-semibold tracking-tight sm:text-5xl">{text}</blockquote>
+      {by ? <figcaption className="text-muted-foreground">{by}</figcaption> : null}
+    </figure>
+  );
+}
+
+function Bottom({ legal, legalLinks, version, locales, onNavigate, center }) {
+  if (!legal && !legalLinks?.length && !version && !locales?.length) return null;
+  return (
+    <div
+      className={cx(
+        "flex flex-col gap-4 border-t border-border pt-8 text-sm md:flex-row md:items-center md:justify-between",
+        center && "items-center text-center md:flex-col",
+      )}
+    >
+      <div className={cx("flex min-w-0 flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-6", center && "items-center sm:justify-center")}>
+        {legal ? <p className="text-muted-foreground">{legal}</p> : null}
+        <LinkRow links={legalLinks} onNavigate={onNavigate} center={center} label="Legal" />
+      </div>
+      <div className={cx("flex flex-wrap items-center gap-3", center && "justify-center")}>
+        {version ? <Badge variant="code">{version}</Badge> : null}
+        <Locales locales={locales} />
+      </div>
+    </div>
+  );
+}
+
+export function Footer({
+  layout = "columns",
+  brand,
+  tagline,
+  links,
+  columns,
+  socials,
+  newsletter,
+  cta,
+  statement,
+  locales,
+  version,
+  legal,
+  legalLinks,
+  onNavigate,
+  label = "Site",
+  className,
+}) {
+  const centered = layout === "centered";
+  const news = newsletter?.onSubscribe ? newsletter : null;
+  const newsCard = news?.look === "card";
+
+  let main;
+  if (centered) {
+    main = (
+      <div className="grid justify-items-center gap-6 text-center">
+        <Brand brand={brand} tagline={tagline} center />
+        <LinkRow links={links} onNavigate={onNavigate} center label={label} />
+        <Socials socials={socials} center />
+        {news && !newsCard ? <Newsletter newsletter={news} center /> : null}
+      </div>
+    );
+  } else if (layout === "simple") {
+    main = (
+      <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+        <div className="flex min-w-0 flex-col gap-6 md:flex-row md:items-center md:gap-10">
+          {brand ? <div className="shrink-0 text-lg font-semibold">{brand}</div> : null}
+          <LinkRow links={links} onNavigate={onNavigate} label={label} />
+        </div>
+        <Socials socials={socials} />
+      </div>
+    );
+  } else {
+    main = (
+      <div className={cx("grid gap-12", news && !newsCard ? "lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)_minmax(0,2fr)]" : "lg:grid-cols-[minmax(0,2fr)_minmax(0,5fr)]")}>
+        <div className="grid content-start gap-5">
+          <Brand brand={brand} tagline={tagline} />
+          <Socials socials={socials} />
+          <LinkRow links={links} onNavigate={onNavigate} label={label} />
+        </div>
+        <Columns columns={columns} onNavigate={onNavigate} />
+        {news && !newsCard ? <Newsletter newsletter={news} /> : null}
+      </div>
+    );
+  }
+
+  return (
+    <footer aria-label={label} className={cx("border-t border-border px-4 pt-14 pb-8 sm:px-6 sm:pt-16", className)}>
+      <div className="mx-auto grid w-full max-w-6xl gap-10">
+        <Statement statement={statement} center={centered} />
+        {main}
+        {newsCard ? <Newsletter newsletter={news} /> : null}
+        <Cta cta={cta} center={centered} onNavigate={onNavigate} />
+        <Bottom
+          legal={legal}
+          legalLinks={legalLinks}
+          version={version}
+          locales={locales}
+          onNavigate={onNavigate}
+          center={centered}
+        />
+      </div>
+    </footer>
+  );
+}

package/registry/blocks/footer/index.js

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