makersclaw 0.2.0 → 0.3.0

package/registry/blocks/email-render/email.jsx

@@ -0,0 +1,221 @@
+// The email parts: react-email's components with the workspace theme laid
+// on as concrete values. Server-safe (no hooks, no context): the same tree
+// renders in the browser for a preview and on the server for a send.
+//
+// Every part takes `theme` (resolveEmailTheme(root) in the browser, or
+// EMAIL_FALLBACK) and reads its colours from it. Styles are inline, which
+// is what email clients keep; widths are a 600px column, the size every
+// client draws well.
+import { Body, Button, Column, Container, Head, Heading, Hr, Html, Img, Link, Preview, Row, Section, Text } from "@react-email/components";
+import { EMAIL_FALLBACK, emailColor } from "./theme";
+
+/** The width of an email's column, in px. */
+export const EMAIL_WIDTH = 600;
+
+const themeOf = (theme) => theme ?? EMAIL_FALLBACK;
+
+/**
+ * The whole email: <html>, the preview line inboxes show after the
+ * subject, the page background and a centred 600px column.
+ *
+ *   preview   the preheader: up to ~110 characters shown in the inbox list
+ *   lang      the document's language ("en")
+ *   title     the <title> (some clients show it in a browser view)
+ */
+export function EmailLayout({ theme, preview, title, lang = "en", children }) {
+  const t = themeOf(theme);
+  return (
+    <Html lang={lang} dir="ltr">
+      <Head>
+        <meta name="color-scheme" content={t.scheme === "dark" ? "dark" : "light"} />
+        <meta name="supported-color-schemes" content={t.scheme === "dark" ? "dark" : "light"} />
+        {title ? <title>{title}</title> : null}
+      </Head>
+      {preview ? <Preview>{preview}</Preview> : null}
+      <Body
+        style={{
+          margin: 0,
+          padding: "32px 12px",
+          backgroundColor: emailColor(t, "background"),
+          color: emailColor(t, "foreground"),
+          fontFamily: t.font,
+          WebkitFontSmoothing: "antialiased",
+        }}
+      >
+        <Container style={{ width: "100%", maxWidth: `${EMAIL_WIDTH}px`, margin: "0 auto" }}>{children}</Container>
+      </Body>
+    </Html>
+  );
+}
+
+/** A raised panel inside the column: the card colour, a hairline, the
+ *  theme's corner. `padding` in px. */
+export function EmailCard({ theme, padding = 32, children }) {
+  const t = themeOf(theme);
+  return (
+    <Section
+      style={{
+        backgroundColor: emailColor(t, "card"),
+        color: emailColor(t, "card-foreground"),
+        border: `1px solid ${emailColor(t, "border")}`,
+        borderRadius: t.radius,
+        padding: `${padding}px`,
+      }}
+    >
+      {children}
+    </Section>
+  );
+}
+
+/**
+ * The brand line at the top: a logo or the name, linked to the site.
+ *   band   "none" (default: on the page background) · "primary" · "muted"
+ *          · "card" — a filled strip; the words take the matching
+ *          foreground
+ *   align  "left" (default) · "center"
+ */
+export function EmailHeader({ theme, name, logoUrl, logoAlt, logoHeight = 28, href, band = "none", align = "left", tagline }) {
+  const t = themeOf(theme);
+  const filled = band && band !== "none";
+  const fill = filled ? emailColor(t, band) : undefined;
+  const ink = filled ? emailColor(t, band === "card" ? "card-foreground" : `${band}-foreground`) : emailColor(t, "foreground");
+  const mark = logoUrl ? (
+    <Img src={logoUrl} alt={logoAlt || name || ""} height={logoHeight} style={{ display: align === "center" ? "inline-block" : "block", height: `${logoHeight}px`, width: "auto", border: 0 }} />
+  ) : (
+    <Text style={{ margin: 0, fontFamily: t.fontDisplay, fontSize: "18px", lineHeight: "24px", fontWeight: 700, letterSpacing: "-0.01em", color: ink }}>{name}</Text>
+  );
+  return (
+    <Section
+      style={{
+        padding: filled ? "18px 24px" : "0 4px 20px",
+        backgroundColor: fill,
+        borderRadius: filled ? t.radius : undefined,
+        marginBottom: filled ? "16px" : undefined,
+        textAlign: align,
+      }}
+    >
+      <Row>
+        <Column style={{ textAlign: align }}>
+          {href ? (
+            <Link href={href} style={{ color: ink, textDecoration: "none" }}>
+              {mark}
+            </Link>
+          ) : (
+            mark
+          )}
+          {tagline ? (
+            <Text style={{ margin: "4px 0 0", fontSize: "13px", lineHeight: "18px", color: filled ? ink : emailColor(t, "muted-foreground"), opacity: filled ? 0.8 : 1 }}>{tagline}</Text>
+          ) : null}
+        </Column>
+      </Row>
+    </Section>
+  );
+}
+
+/**
+ * The small print at the bottom: a line or two about why the reader gets
+ * this, the sender's postal address (the law in most places wants it) and
+ * the unsubscribe link.
+ *   note             "You get this because you signed up at acme.com."
+ *   address          "Acme, 12 Market St, Leeds LS1 4AB"
+ *   unsubscribeUrl   the address your sender fills in ("{{unsubscribe_url}}")
+ *   links            [{ label, href }] — a row above the small print
+ */
+export function EmailFooter({ theme, note, address, unsubscribeUrl, unsubscribeLabel = "Unsubscribe", links = [], align = "center" }) {
+  const t = themeOf(theme);
+  const muted = emailColor(t, "muted-foreground");
+  const small = { margin: "0 0 6px", fontSize: "12px", lineHeight: "18px", color: muted };
+  return (
+    <Section style={{ padding: "24px 16px 8px", textAlign: align }}>
+      {links.length ? (
+        <Text style={{ ...small, marginBottom: "12px", fontSize: "13px" }}>
+          {links.map((l, i) => (
+            <span key={`${l.href}-${i}`}>
+              {i ? <span style={{ padding: "0 8px" }}>·</span> : null}
+              <Link href={l.href} style={{ color: muted, textDecoration: "underline" }}>
+                {l.label}
+              </Link>
+            </span>
+          ))}
+        </Text>
+      ) : null}
+      {note ? <Text style={small}>{note}</Text> : null}
+      {address ? <Text style={small}>{address}</Text> : null}
+      {unsubscribeUrl ? (
+        <Text style={small}>
+          <Link href={unsubscribeUrl} style={{ color: muted, textDecoration: "underline" }}>
+            {unsubscribeLabel}
+          </Link>
+        </Text>
+      ) : null}
+    </Section>
+  );
+}
+
+/** A button that works in every client (a padded link, no images).
+ *  tone "primary" (default) · "secondary" · "foreground". */
+export function EmailButton({ theme, href, tone = "primary", align = "left", children }) {
+  const t = themeOf(theme);
+  const fill = emailColor(t, tone === "foreground" ? "foreground" : tone);
+  const ink = emailColor(t, tone === "foreground" ? "background" : `${tone}-foreground`);
+  return (
+    <Section style={{ textAlign: align, margin: "8px 0 24px" }}>
+      <Button
+        href={href || "#"}
+        style={{
+          display: "inline-block",
+          backgroundColor: fill,
+          color: ink,
+          borderRadius: t.radius,
+          padding: "12px 22px",
+          fontSize: "15px",
+          lineHeight: "20px",
+          fontWeight: 600,
+          textDecoration: "none",
+        }}
+      >
+        {children}
+      </Button>
+    </Section>
+  );
+}
+
+const HEADING_SIZES = { 1: ["28px", "34px"], 2: ["22px", "28px"], 3: ["18px", "24px"] };
+
+/** A heading in the display face. level 1 · 2 · 3. */
+export function EmailHeading({ theme, level = 2, align, children }) {
+  const t = themeOf(theme);
+  const [size, line] = HEADING_SIZES[level] ?? HEADING_SIZES[2];
+  return (
+    <Heading
+      as={`h${Math.min(3, Math.max(1, level))}`}
+      style={{ margin: level === 1 ? "0 0 16px" : "24px 0 12px", fontFamily: t.fontDisplay, fontSize: size, lineHeight: line, fontWeight: 700, letterSpacing: "-0.015em", color: emailColor(t, "card-foreground"), textAlign: align }}
+    >
+      {children}
+    </Heading>
+  );
+}
+
+/** A paragraph. `muted` for secondary words, `size` "md" (16px) · "sm". */
+export function EmailText({ theme, muted = false, size = "md", align, children }) {
+  const t = themeOf(theme);
+  return (
+    <Text
+      style={{
+        margin: "0 0 16px",
+        fontSize: size === "sm" ? "14px" : "16px",
+        lineHeight: size === "sm" ? "22px" : "26px",
+        color: emailColor(t, muted ? "muted-foreground" : "card-foreground"),
+        textAlign: align,
+      }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+/** A hairline. */
+export function EmailDivider({ theme }) {
+  const t = themeOf(theme);
+  return <Hr style={{ border: 0, borderTop: `1px solid ${emailColor(t, "border")}`, margin: "24px 0" }} />;
+}

package/registry/blocks/email-render/index.js

@@ -0,0 +1,10 @@
+// The EmailRender block — `makersclaw add email-render`. Fixed: compose it
+// through its exports (README.md beside this file). The door to
+// react-email: themed email parts, a doc-editor document as email markup,
+// and renderEmail() → { html, text }. Server-safe: the same tree renders
+// in a browser preview and in a server send. Blocks built on this one
+// (newsletter-builder…) import it, never @react-email/* directly.
+export { EmailLayout, EmailCard, EmailHeader, EmailFooter, EmailButton, EmailHeading, EmailText, EmailDivider, EMAIL_WIDTH } from "./email";
+export { DocEmail, fieldText } from "./doc-email";
+export { renderEmail, emailPlainText } from "./render";
+export { EMAIL_TOKENS, EMAIL_FALLBACK, resolveEmailTheme, emailColor, emailFontStack, emailThemeKey, luminance, toHex } from "./theme";

package/registry/blocks/email-render/render.js

@@ -0,0 +1,50 @@
+// renderEmail — a react-email tree → the HTML and the plain text a sender
+// needs. The one door to @react-email/render; blocks built on this one
+// never import it.
+//
+// Works in the browser (a live preview) and on the server (a send). It is
+// async: react-email renders through React's streaming renderer, so an
+// image or a font can load before the HTML is final.
+import { render, toPlainText } from "@react-email/render";
+
+// The plain-text part reads like the email: headings in their own case
+// (html-to-text shouts them by default) and tables as rows and columns.
+const TEXT_OPTIONS = {
+  selectors: [
+    { selector: "h1", options: { uppercase: false } },
+    { selector: "h2", options: { uppercase: false } },
+    { selector: "h3", options: { uppercase: false } },
+    { selector: "table", format: "dataTable" },
+  ],
+};
+
+/**
+ * `await renderEmail(<EmailLayout …/>)` →
+ *   { ok: true, html, text }            html: a full <!DOCTYPE html> document
+ *   { ok: false, error }                a render that threw, in words
+ *
+ * `pretty: true` indents the HTML (slower; for reading, not for sending).
+ */
+export async function renderEmail(element, { pretty = false } = {}) {
+  try {
+    const html = await render(element, { pretty });
+    let text = "";
+    try {
+      text = toPlainText(html, TEXT_OPTIONS);
+    } catch {
+      text = "";
+    }
+    return { ok: true, html, text };
+  } catch (e) {
+    return { ok: false, error: e?.message ? `The email could not be drawn: ${e.message}` : "The email could not be drawn." };
+  }
+}
+
+/** The plain-text part for HTML you already have. */
+export function emailPlainText(html) {
+  try {
+    return toPlainText(String(html ?? ""), TEXT_OPTIONS);
+  } catch {
+    return "";
+  }
+}

package/registry/blocks/email-render/theme.js

@@ -0,0 +1,215 @@
+// The email's theme: the workspace tokens, resolved to concrete values.
+//
+// Why: an email is read in Gmail, Outlook and Apple Mail, which never see
+// the app's stylesheet and mostly ignore CSS variables. So an email cannot
+// say var(--color-primary) the way a page does. At render time we read
+// what each token IS where the editor sits (its light or dark scheme, any
+// [data-theme] scope) and hand the email plain hex values. The source of
+// truth stays the theme; the email carries a copy made when it is rendered.
+//
+//   resolveEmailTheme(root)   browser: read the tokens at `root`
+//   EMAIL_FALLBACK            a neutral light theme, for the server or a
+//                             test, when there is no page to read
+//   emailColor(theme, name)   a token name ("primary") → its hex
+//
+// A theme is plain data, so it can travel to the server with a send:
+//   { colors: { background, foreground, primary, … }, font, fontDisplay,
+//     fontMono, radius, scheme }
+
+/** The tokens an email may name, in the order a picker would show them. */
+export const EMAIL_TOKENS = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "border",
+  "destructive",
+  "success",
+  "warning",
+  "info",
+];
+
+// Web-safe tails for each face: most clients only have these installed.
+const SANS_TAIL = ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "sans-serif"];
+const MONO_TAIL = ["SFMono-Regular", "Menlo", "Consolas", "monospace"];
+
+const byte = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+
+/** [r, g, b] → "#rrggbb". */
+export function toHex([r, g, b]) {
+  return "#" + byte(r) + byte(g) + byte(b);
+}
+
+const grey = (v) => toHex([v, v, v]);
+
+/** A neutral light theme: what an email wears when no page can be read
+ *  (the server, a test). Greys only, so it never claims a brand. */
+export const EMAIL_FALLBACK = Object.freeze({
+  colors: Object.freeze({
+    background: grey(244),
+    foreground: grey(23),
+    card: grey(255),
+    "card-foreground": grey(23),
+    primary: grey(23),
+    "primary-foreground": grey(250),
+    secondary: grey(240),
+    "secondary-foreground": grey(23),
+    muted: grey(245),
+    "muted-foreground": grey(107),
+    accent: grey(240),
+    "accent-foreground": grey(23),
+    border: grey(226),
+    destructive: toHex([185, 28, 28]),
+    success: toHex([21, 112, 58]),
+    warning: toHex([154, 74, 6]),
+    info: toHex([29, 78, 216]),
+  }),
+  font: SANS_TAIL.map(quoteFamily).join(", "),
+  fontDisplay: SANS_TAIL.map(quoteFamily).join(", "),
+  fontMono: MONO_TAIL.map(quoteFamily).join(", "),
+  radius: "8px",
+  scheme: "light",
+});
+
+/** A token name → its hex in `theme`, else the fallback's. A value that is
+ *  not a token name ("" or unknown) gives `fallback`. */
+export function emailColor(theme, name, fallback = "") {
+  const colors = theme?.colors ?? EMAIL_FALLBACK.colors;
+  return colors[name] ?? EMAIL_FALLBACK.colors[name] ?? fallback;
+}
+
+/** Quote a family name that needs it ("Segoe UI" → '"Segoe UI"'). */
+function quoteFamily(name) {
+  const n = String(name).trim().replace(/^["']|["']$/g, "");
+  return /^[a-z-]+$/i.test(n) ? n : `"${n}"`;
+}
+
+/** A computed font-family → an email-safe stack: the theme's own families
+ *  first (a reader who has them sees them), next/font's hashed aliases
+ *  ("__Inter_a1b2") dropped, a web-safe tail added. */
+export function emailFontStack(computed, tail = SANS_TAIL) {
+  const seen = new Set();
+  const out = [];
+  for (const raw of String(computed ?? "").split(",")) {
+    const name = raw.trim().replace(/^["']|["']$/g, "");
+    if (!name || name.startsWith("__") || /^var\(/.test(name)) continue;
+    if (["system-ui", "ui-sans-serif", "ui-monospace"].includes(name)) continue;
+    const key = name.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(quoteFamily(name));
+  }
+  for (const name of tail) {
+    const key = name.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(quoteFamily(name));
+  }
+  return out.join(", ");
+}
+
+/** Relative luminance of "#rrggbb" (0 black … 1 white). */
+export function luminance(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(String(hex ?? ""));
+  if (!m) return 1;
+  const n = parseInt(m[1], 16);
+  const lin = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin((n >> 16) & 255) + 0.7152 * lin((n >> 8) & 255) + 0.0722 * lin(n & 255);
+}
+
+/**
+ * Browser only: the theme as it is painted at `root` (default: the body).
+ *
+ * Each colour goes through a hidden probe (`color: var(--color-x)`), so
+ * light-dark(), color-mix() and a [data-theme] scope resolve exactly as
+ * the app paints them. A 1×1 canvas then turns the computed colour into
+ * bytes whatever syntax the browser wrote it in; a colour with alpha is
+ * laid over the background first, because email has no transparency to
+ * rely on. Faces and the corner radius are read the same way.
+ */
+export function resolveEmailTheme(root) {
+  if (typeof document === "undefined") return EMAIL_FALLBACK;
+  const host = root ?? document.body;
+  if (!host) return EMAIL_FALLBACK;
+  const probe = document.createElement("span");
+  probe.setAttribute("aria-hidden", "true");
+  probe.style.position = "absolute";
+  probe.style.visibility = "hidden";
+  probe.style.pointerEvents = "none";
+  host.appendChild(probe);
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  const colors = {};
+  const read = (token, under) => {
+    probe.style.color = "";
+    probe.style.color = `var(--color-${token})`;
+    const computed = getComputedStyle(probe).color;
+    if (!computed || !ctx) return null;
+    ctx.clearRect(0, 0, 1, 1);
+    if (under) {
+      ctx.fillStyle = under;
+      ctx.fillRect(0, 0, 1, 1);
+    }
+    ctx.fillStyle = "transparent";
+    ctx.fillStyle = computed;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+    if (a === 0) return null;
+    return toHex([r, g, b]);
+  };
+  let theme = EMAIL_FALLBACK;
+  try {
+    const bg = read("background", null) ?? EMAIL_FALLBACK.colors.background;
+    colors.background = bg;
+    for (const token of EMAIL_TOKENS) {
+      if (token === "background") continue;
+      colors[token] = read(token, bg) ?? EMAIL_FALLBACK.colors[token];
+    }
+    probe.style.fontFamily = "var(--theme-font-sans)";
+    const sans = getComputedStyle(probe).fontFamily;
+    probe.style.fontFamily = "var(--theme-font-display)";
+    const display = getComputedStyle(probe).fontFamily;
+    probe.style.fontFamily = "var(--theme-font-mono)";
+    const mono = getComputedStyle(probe).fontFamily;
+    probe.style.borderRadius = "var(--theme-radius)";
+    const radius = getComputedStyle(probe).borderTopLeftRadius;
+    const px = Number.parseFloat(radius);
+    theme = {
+      colors,
+      font: emailFontStack(sans),
+      fontDisplay: emailFontStack(display || sans),
+      fontMono: emailFontStack(mono, MONO_TAIL),
+      radius: Number.isFinite(px) ? `${Math.min(24, Math.round(px))}px` : EMAIL_FALLBACK.radius,
+      scheme: luminance(bg) < 0.35 ? "dark" : "light",
+    };
+  } finally {
+    probe.remove();
+  }
+  return theme;
+}
+
+/** A stable fingerprint of a theme: equal strings, nothing to re-render. */
+export function emailThemeKey(theme) {
+  const t = theme ?? EMAIL_FALLBACK;
+  return [
+    ...Object.keys(t.colors ?? {})
+      .sort()
+      .map((k) => `${k}=${t.colors[k]}`),
+    t.font,
+    t.fontDisplay,
+    t.radius,
+  ].join(";");
+}

package/registry/blocks/faq/README.md

@@ -0,0 +1,101 @@
+# FAQ
+
+A marketing section of questions and answers. Three layouts over the
+same rows: an **accordion** built on the kit's `Accordion` (one open at a
+time, or several; arrow keys move between questions, and find-in-page
+opens a closed one), a **grid** of cards with an optional icon each, and
+a plain **list** with every answer shown. The title sits above the
+questions or beside them, and an optional "need more help?" call to
+action closes the section. It is a full-width section: it pads itself
+and centres its content.
+
+```jsx
+import { Faq } from "../components/blocks/faq";   // a Makersclaw app ("./blocks/faq" from components/)
+import { Faq } from "@/components/makersclaw/blocks/faq";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component.
+
+## The data
+
+`items` is the questions, in order:
+
+```js
+{
+  question: "How long is the free trial?",   // required; a row without one is skipped
+  answer: "Fourteen days, with every feature on.",   // a string, or a node (paragraphs, a link)
+  id?: "trial",                              // a stable key; the accordion's open value
+  icon?: "clock",                            // a name from the kit's Icon: a badge in the grid, a glyph otherwise
+  anchor?: "trial",                          // grid and list: the element id, for /pricing#trial
+}
+```
+
+## Props
+
+- `items` — the questions, as above. Required.
+- `layout` — `accordion` (default) · `grid` · `list`.
+- `kicker`, `title`, `description` — the header. `title` defaults to
+  "Frequently asked questions".
+- `titlePosition` — `top` (default, centred) · `start` (the header and
+  the call to action in a column beside the questions from `lg` up).
+- `columns` — the grid: `1` · `2` · `3`. Default `3`, or `2` when the
+  title is beside it. One column on a phone.
+- `look` — the grid's cards: `card` (default) · `plain` (no box, a rule
+  under each question).
+- `type` — the accordion: `single` (default: opening one closes the
+  rest) · `multiple`.
+- `defaultOpen` — the accordion's open question at first: an `id` (or
+  the index as a string) when single, an array of them when multiple.
+- `open`, `onOpenChange(next)` — control the accordion yourself: `next`
+  is an id or `null` when single, an array when multiple.
+- `cta` — `{ title?, body?, label?, href?, onClick?, icon? }`: "Still
+  have a question?" and one primary button. Under the questions, or under
+  the title when it is beside them.
+- `loading` — `true` draws placeholder rows or cards (`aria-busy`).
+- `empty` — `{ title?, body? }` when there are no `items`. Default "No
+  questions yet".
+- `label` — what a screen reader calls the section. Default the title.
+- `className` — the section's spacing and width. Never colour.
+
+## Example
+
+```jsx
+// components/PricingFaq.jsx
+"use client";
+import { Faq } from "./blocks/faq";
+
+const FAQS = [
+  { id: "trial", question: "How long is the free trial?", answer: "Fourteen days, with every feature on." },
+  { id: "seats", question: "Do I pay per person?", answer: "Plans include five seats; each extra seat is $8 a month." },
+  { id: "cancel", question: "What happens if I cancel?", answer: "Your workspace stays readable for 90 days." },
+];
+
+export default function PricingFaq() {
+  return (
+    <Faq
+      items={FAQS}
+      defaultOpen="trial"
+      description="The things people ask before they sign up."
+      cta={{ title: "Still have a question?", label: "Send us a note", href: "/contact", icon: "mail" }}
+    />
+  );
+}
+```
+
+## What it will not do
+
+- Search or filter questions, or group them under categories: a help
+  centre is a page of its own.
+- Render Markdown: pass a node for rich answers.
+- Add FAQ structured data (JSON-LD) to the page: that belongs in your
+  page's metadata.
+
+A section 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 faq` restores them.
+
+## Credits
+
+Layouts ported from Creative Tim UI's FAQ blocks
+(https://github.com/creativetimofficial/ui, MIT), rewritten on the
+Makersclaw kit.

package/registry/blocks/faq/block.json

@@ -0,0 +1,11 @@
+{
+  "name": "faq",
+  "title": "FAQ",
+  "description": "A marketing section of questions and answers: an accordion (one open at a time, or several), a grid of cards with optional icons, or a plain list with every answer shown; the title above or beside them, and an optional \"need more help?\" call to action. Loading and empty states.",
+  "useWhen": "The questions section of a public page: a landing page, pricing, a help centre's front page, a product page. Not for a searchable help centre with articles and categories, or collapsible settings inside an app (use the kit's Accordion).",
+  "tags": ["faq", "questions", "answers", "accordion", "help", "support", "marketing", "landing page", "pricing", "q&a"],
+  "exports": ["Faq"],
+  "files": ["index.js", "faq.jsx"],
+  "requires": [],
+  "frame": "bleed"
+}