@jtakeit/kit 0.0.0-stage → 0.2.0

package/lib/codes.mjs

@@ -0,0 +1,171 @@
+/**
+ * The names the platform gives to the things a catalogue can get wrong.
+ *
+ * ── this file is a copy, and that is not an accident ────────────────────────
+ *
+ * The set lives in the admin, in `backend/api/registry/errcode.go`, and that
+ * table is the source of truth: it is what `POST /v1/registry/validate` answers
+ * with, what the generated reference (`docs/reference/errors.md`) prints, and
+ * what the troubleshooting page is tested against. Nothing here is authoritative
+ * about anything.
+ *
+ * It is copied because `fl-catalogue` has to work before there is anything to
+ * ask — on a laptop, before a deploy, before a token, on a plane. A local
+ * checker that needs the network to name a fault is a local checker nobody runs.
+ *
+ * The alternative was generating this file from the Go table at build time, and
+ * it was rejected for what it would cost rather than what it would buy: a
+ * generator, a make target, a CI diff guard and a second repository in the
+ * checkout, all so that a list of twenty-one strings can be regenerated on the
+ * few days a year it changes.
+ *
+ * **What keeps it honest is `fl-catalogue --judge`, not anybody remembering.**
+ * That flag posts the emitted catalogue to the real validator and reports every
+ * place the two answers differ — a code the server raised and we did not, or one
+ * we raised and it did not. Every client the studio runs through it is one
+ * sitting of that exam (wiki/35 §5, §7), so a code that has been renamed or a
+ * check that has drifted is found by the next real project rather than by a
+ * reviewer noticing. A copy nobody checks rots in a month; a copy that is
+ * examined weekly is a cache.
+ *
+ * Only the catalogue's codes are here. The build's five — `JTK_E_UNANNOTATED_
+ * FIELD` and its siblings — belong to the annotation lint, which runs in the
+ * platform's build container and is judged there.
+ */
+
+/**
+ * The codes, under the names the Go table gives them, so a reader with both
+ * files open can put them side by side.
+ */
+export const E = Object.freeze({
+  // The file itself, before anything in it is read.
+  UNREADABLE: 'JTK_E_CATALOGUE_UNREADABLE',
+  CONTRACT: 'JTK_E_CONTRACT_UNKNOWN',
+  EMPTY: 'JTK_E_CATALOGUE_EMPTY',
+  GENERATOR: 'JTK_E_GENERATOR_INVALID',
+
+  // Names: what a thing is called, and whether it is called that twice.
+  NAME: 'JTK_E_NAME_INVALID',
+  DUPLICATE: 'JTK_E_NAME_DUPLICATE',
+
+  // Words: the label and the hint an owner reads in the admin.
+  LABEL_MISSING: 'JTK_E_LABEL_MISSING',
+  TEXT: 'JTK_E_TEXT_INVALID',
+
+  // Blocks.
+  BLOCK_VERSION: 'JTK_E_BLOCK_VERSION',
+  BLOCK_EMPTY: 'JTK_E_BLOCK_EMPTY',
+  COLLECTS: 'JTK_E_COLLECTS_UNKNOWN',
+
+  // Fields.
+  KIND: 'JTK_E_KIND_UNKNOWN',
+  BOUNDS: 'JTK_E_BOUNDS_INVALID',
+  OPTIONS: 'JTK_E_SELECT_NO_OPTIONS',
+  LIST: 'JTK_E_LIST_INVALID',
+  MEDIA: 'JTK_E_MEDIA_INVALID',
+
+  // Arrangements.
+  VIEW: 'JTK_E_VIEW_INVALID',
+
+  // Languages.
+  LOCALE: 'JTK_E_LOCALE_INVALID',
+
+  // Collections.
+  COLLECTION: 'JTK_E_COLLECTION_INVALID',
+  ENTRY_TYPE: 'JTK_E_ENTRY_TYPE_INVALID',
+  ORDER: 'JTK_E_ORDER_INVALID',
+});
+
+/**
+ * The judge's second voice: advice, with `JTK_W_` codes. A finding here
+ * refuses nothing — the catalogue is valid — and comes back from
+ * `POST /v1/registry/validate` under `advice`, apart from the refusals. This
+ * checker raises none of them (the rules are the server's, about the bookings
+ * module it runs), so `--judge` prints them and leaves them out of the exam.
+ */
+export const W = Object.freeze({
+  MODULE_TWIN: 'JTK_W_MODULE_TWIN',
+  MODULE_POST: 'JTK_W_MODULE_POST',
+});
+
+export const ADVICE = Object.freeze({
+  [W.MODULE_TWIN]:
+    'A page block types again a fact the bookings module holds — the owner\'s hours, the services\' prices — so the site has two copies and one goes stale.',
+  [W.MODULE_POST]:
+    'An entry type the bookings module reads is shaped as a post — a body, or excerpt, cover and body — or its services get a page each; a service is filled in, not written.',
+});
+
+/** Advice from the judge, never a refusal. */
+export function isAdvice(code) {
+  return typeof code === 'string' && code.startsWith('JTK_W_');
+}
+
+/**
+ * What each one means, in the platform's own words — the `Means` line of its row
+ * in `AllCodes`.
+ *
+ * Copied verbatim rather than paraphrased. A second wording of one rule is how
+ * two documents come to describe two rules, and the developer reading this one
+ * is going to be handed the other by the server a moment later.
+ */
+export const MEANS = Object.freeze({
+  [E.UNREADABLE]: 'The catalogue is not JSON, or carries a key this contract has no place for.',
+  [E.CONTRACT]: 'The catalogue names a contract number this service does not speak.',
+  [E.EMPTY]: 'The catalogue declares no blocks, so it describes no site.',
+  [E.GENERATOR]: 'The `generator` string does not name a tool.',
+
+  [E.NAME]: 'A block type, field key, view key or collection name is not spelled the way an identifier must be.',
+  [E.DUPLICATE]: 'Two things in the same place are called the same thing.',
+
+  [E.LABEL_MISSING]: 'A field, view or collection has no label.',
+  [E.TEXT]:
+    'A label or hint is written both once and per language, names a language that is not one, is empty, or runs too long.',
+
+  [E.BLOCK_VERSION]: 'A block type has no version, or a version below one.',
+  [E.BLOCK_EMPTY]: 'A block type declares no fields.',
+  [E.COLLECTS]: 'A block says it collects something nothing knows about.',
+
+  [E.KIND]: "A field's kind is not one of the thirteen.",
+  [E.BOUNDS]: 'A `min` or `max` is negative, or the minimum is above the maximum.',
+  [E.OPTIONS]: 'A `select` field offers nothing to select.',
+  [E.LIST]: 'A list nests another list, declares no item fields, or `of` appears on a field that is not a list.',
+  [E.MEDIA]:
+    "A media field's `accept`, `ratio` or `multiple` do not go together — or one of the three appears on a field that is not media.",
+
+  [E.VIEW]:
+    "A block declares arrangements but has no gallery to arrange, sets its bounds in two places, or a view's own bounds do not make sense.",
+
+  [E.LOCALE]: "A language is not a language, is declared twice, or the site's own language appears again among the others.",
+
+  [E.COLLECTION]: "A collection's prefix, pagination, entry type or body list is wrong.",
+  [E.ENTRY_TYPE]: 'The block type a collection names cannot be used for entries.',
+  [E.ORDER]: 'A collection is ordered by a field that will not order it.',
+});
+
+/**
+ * The mark on a finding that is this skill's own and will never come back from
+ * the server.
+ *
+ * ── why these may not have a JTK_E_ code ────────────────────────────────────
+ *
+ * A code is a promise the platform's documentation keeps: every one of them has
+ * a row in the generated reference and an anchor in the troubleshooting page,
+ * enforced by a test over there. Inventing a `JTK_E_…` for a rule the platform
+ * has never heard of would put a name in a developer's terminal that leads
+ * nowhere when they go and look it up.
+ *
+ * And these are genuinely not the catalogue's business. Whether every address in
+ * `src/` survives being served under `/p/<slug>/` is about the studio's preview
+ * — our deployment, our arrangement, nothing to do with the format a stranger's
+ * repository declares. The judge is right not to have an opinion on it.
+ *
+ * So they are marked, printed as plainly as anything else, and left out of the
+ * comparison in `--judge`: their absence from the server's answer is the correct
+ * answer rather than a gap.
+ */
+export const LOCAL = 'FL_LOCAL';
+
+/** Whether a finding is one the server can be asked about. */
+export function isPlatformCode(code) {
+  return Object.hasOwn(MEANS, code);
+}

package/lib/kits.mjs

@@ -0,0 +1,208 @@
+/**
+ * A booking kit, laid out — the files the platform's `kits.Files` describes,
+ * in the same shapes, into any repository.
+ *
+ * The kit is the platform's (`GET /v1/kits/<kind>`; a page of it at
+ * `jtakeit:///kits/<kind>.md`) and it is judged there. What this does is
+ * write what a kit says into the `jtk/` files: its settings into
+ * `jtk/bookings.json` with `page` at the services' listing and `kit` /
+ * `kit_version` saying which kit and which version they came from, its rates
+ * as entries in the site's language, and — for a site whose catalogue is a
+ * file rather than a declaration — its block types, collections and the
+ * module into `jtk/catalogue.json`. `@jtakeit/astro` writes the same into
+ * `src/content/blocks.ts` instead, and takes the rest from here.
+ *
+ * Nothing written is a fact about the business: the rates carry no price and
+ * the settings no zone and no hours. What the kit says to take from the brief
+ * is in `kit.ask`, for whoever runs this to do next.
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+
+/** Where the platform is, for a kit asked by its kind. */
+export const API = 'https://api.jtakeit.com';
+
+/** A kit, read from a file and checked. @param {string} file */
+export function readKit(file) {
+  let kit;
+  try {
+    kit = JSON.parse(readFileSync(resolve(file), 'utf8'));
+  } catch (why) {
+    throw new Error(`--kit ${file} is not a kit: ${why.message}`);
+  }
+  return checkKit(kit, file);
+}
+
+/**
+ * A kit asked of the platform by its kind (wiki/64 · §4.1): the kit whole,
+ * every part written out, and its version — which the site's settings record
+ * as `kit_version`, so the platform's judge can say when a fix to the kit has
+ * not reached the site (JTK_W_KIT_BEHIND).
+ *
+ * @param {string} kind
+ * @param {string} [api]
+ */
+export async function fetchKit(kind, api = process.env.JTK_API_URL || API) {
+  const base = api.replace(/\/+$/, '');
+  const url = `${base}/v1/kits/${encodeURIComponent(kind)}`;
+  let answer;
+  try {
+    answer = await fetch(url, { headers: { accept: 'application/json' } });
+  } catch (why) {
+    throw new Error(`--kit ${kind}: the platform did not answer at ${url} (${why.message}) — pass --api, or a file: --kit <file>`);
+  }
+  if (answer.status === 404) {
+    let kinds = '';
+    try {
+      const list = await (await fetch(`${base}/v1/kits`)).json();
+      kinds = ` — the kits are ${list.kits.map((one) => one.kind).join(', ')}`;
+    } catch {
+      // The list is a courtesy; the refusal stands without it.
+    }
+    throw new Error(`--kit ${kind}: the platform has no kit of that kind${kinds}`);
+  }
+  if (!answer.ok) throw new Error(`--kit ${kind}: the platform answered ${answer.status} at ${url}`);
+  const body = await answer.json();
+  const kit = checkKit(body.kit, kind);
+  kit.version = body.version;
+  return kit;
+}
+
+/**
+ * A kit by its kind or by a file, whichever the argument is.
+ * @param {string} asked
+ * @param {string} [api]
+ */
+export async function loadKit(asked, api) {
+  if (existsSync(resolve(asked)) || asked.endsWith('.json')) return readKit(asked);
+  if (/^[a-z][a-z_]*$/.test(asked)) return fetchKit(asked, api);
+  throw new Error(`--kit ${asked} is neither a kit's kind nor a file`);
+}
+
+/**
+ * A kit checked for the shape this lays out, wherever it came from: a wrong
+ * file stops here with its name rather than as a broken catalogue.
+ * @param {any} kit
+ * @param {string} from
+ */
+export function checkKit(kit, from) {
+  const bookings = kit?.catalogue?.modules?.bookings;
+  if (typeof kit?.kind !== 'string' || !/^[a-z][a-z_]*$/.test(kit.kind)
+    || !Array.isArray(kit.catalogue?.blocks) || !Array.isArray(kit.catalogue?.collections)
+    || typeof bookings?.services !== 'string' || typeof bookings?.resources !== 'string'
+    || typeof kit.settings !== 'object' || !Array.isArray(kit.entries)) {
+    throw new Error(`--kit ${from} is not a kit — save the JSON under «The kit, whole» on the kit's page, jtakeit:///kits/<kind>.md`);
+  }
+  const services = kit.catalogue.collections.find((one) => one.name === bookings.services);
+  if (!services || services.pages !== false) {
+    throw new Error(`--kit ${from}: its services are not a collection without pages, and the booking page is their listing`);
+  }
+  for (const entry of kit.entries) {
+    if (!kit.catalogue.collections.some((one) => one.name === entry.collection)) {
+      throw new Error(`--kit ${from}: the entry "${entry.slug}" is in "${entry.collection}", which the kit does not declare`);
+    }
+  }
+  return kit;
+}
+
+/** The language a kit's words are taken in: the site's, or English where the kit has not got it. */
+export function kitLanguage(locale) {
+  const lang = String(locale ?? '').slice(0, 2);
+  return ['uk', 'en', 'de', 'ru', 'es', 'it', 'pt', 'fr'].includes(lang) ? lang : 'en';
+}
+
+/**
+ * The diary's settings for a kit, as `jtk/bookings.json` holds them: one
+ * block of type `bookings_config`, `page` at the services' listing, and
+ * which kit and which version they came from.
+ * @param {any} kit
+ */
+export function kitSettings(kit) {
+  const services = kit.catalogue.collections.find((one) => one.name === kit.catalogue.modules.bookings.services);
+  return {
+    type: 'bookings_config', v: 1, ...kit.settings, page: services.prefix,
+    kit: kit.kind, ...(kit.version ? { kit_version: kit.version } : {}),
+  };
+}
+
+/**
+ * The kit's entries as content documents, one per file, in the site's
+ * language: `[path, document]` pairs, the path relative to `jtk/content`.
+ * @param {any} kit
+ * @param {string} locale
+ */
+export function kitEntries(kit, locale) {
+  const lang = kitLanguage(locale);
+  return kit.entries.map((entry, i) => {
+    const collection = kit.catalogue.collections.find((one) => one.name === entry.collection);
+    const block = { _key: `kit${String(i + 1).padStart(5, '0')}`, type: collection.type, v: 1 };
+    for (const [key, value] of Object.entries(entry.fields)) {
+      block[key] = value !== null && typeof value === 'object' ? (value[lang] ?? '') : value;
+    }
+    const path = `${collection.prefix}/${entry.slug}`;
+    const doc = { path, collection: collection.name, visible: true, seo: { title: '', description: '' }, blocks: [block] };
+    return [path, doc];
+  });
+}
+
+/**
+ * A kit's block types, collections and module put into a catalogue object —
+ * for a site whose catalogue is `jtk/catalogue.json` rather than a
+ * declaration. A type or a collection the catalogue already has by that name
+ * is left as it is: the site's own wins.
+ * @param {any} catalogue
+ * @param {any} kit
+ */
+export function mergeKitIntoCatalogue(catalogue, kit) {
+  const out = { contract: 2, ...catalogue };
+  out.blocks = [...(out.blocks ?? [])];
+  for (const block of kit.catalogue.blocks) {
+    if (!out.blocks.some((one) => one.type === block.type)) out.blocks.push(block);
+  }
+  out.collections = [...(out.collections ?? [])];
+  for (const collection of kit.catalogue.collections) {
+    if (!out.collections.some((one) => one.name === collection.name)) out.collections.push(collection);
+  }
+  out.modules = { ...(out.modules ?? {}), ...kit.catalogue.modules };
+  return out;
+}
+
+/**
+ * Lays the kit's `jtk/` files out under a repository: the settings and the
+ * entries always; the catalogue too when `catalogue` is true (a site that
+ * keeps `jtk/catalogue.json` by hand) — `@jtakeit/astro` writes the
+ * declaration itself and passes false.
+ *
+ * @param {string} target     the repository's root
+ * @param {any} kit
+ * @param {object} [options]
+ * @param {string} [options.locale]
+ * @param {boolean} [options.catalogue]
+ * @returns {string[]} the files written
+ */
+export function layKitFiles(target, kit, { locale = 'en', catalogue = false } = {}) {
+  const literal = (value) => JSON.stringify(value, null, 2);
+  const written = [];
+  const settingsFile = join(target, 'jtk', 'bookings.json');
+  mkdirSync(dirname(settingsFile), { recursive: true });
+  writeFileSync(settingsFile, `${literal({ blocks: [kitSettings(kit)] })}\n`, 'utf8');
+  written.push(settingsFile);
+
+  for (const [path, doc] of kitEntries(kit, locale)) {
+    const file = join(target, 'jtk', 'content', ...path.split('/').filter(Boolean)) + '.json';
+    mkdirSync(dirname(file), { recursive: true });
+    writeFileSync(file, `${literal(doc)}\n`, 'utf8');
+    written.push(file);
+  }
+
+  if (catalogue) {
+    const file = join(target, 'jtk', 'catalogue.json');
+    let had = {};
+    if (existsSync(file)) {
+      try { had = JSON.parse(readFileSync(file, 'utf8')); } catch (why) { throw new Error(`${file} is not JSON: ${why.message}`); }
+    }
+    writeFileSync(file, `${literal(mergeKitIntoCatalogue(had, kit))}\n`, 'utf8');
+    written.push(file);
+  }
+  return written;
+}

package/lib/lead/render.mjs

@@ -0,0 +1,166 @@
+/**
+ * The enquiry form, as markup — made at build time by whatever builds the
+ * site, and spared the navigation by `@jtakeit/kit/elements/lead`.
+ *
+ * It is a real `<form method="post">` first and an in-place submission
+ * second: with JavaScript off the browser posts to the same endpoint and the
+ * platform answers with a plain page. Every rule enforced on the page is
+ * enforced again by the platform behind `/api/lead` — the endpoint is public
+ * and the browser's checks are a convenience, not a gate.
+ *
+ * What the platform holds the form to (the build's lint, JTK_E_FORM_*): a
+ * `name` control, one of `contact`, `phone` or `email`, the honeypot
+ * `website`, and nothing else that the collecting block does not declare in
+ * `asks`. The words on it are the site's: the block's own fields (title,
+ * lead, the labels), annotated with their paths so the owner edits them by
+ * tapping, and the `asks` from the catalogue, fixed.
+ */
+
+/**
+ * @typedef {object} Ask
+ * @property {string} key                        the control's name — and the key the inbox labels by
+ * @property {string} label                      in the site's language, already resolved
+ * @property {string} kind                       text, textarea, number, tel, email, url, date, time_of_day, select, bool
+ * @property {boolean} [required]
+ * @property {number} [max]
+ * @property {number} [min]
+ * @property {{ value: string; label: string }[]} [options]  for a select
+ */
+
+/**
+ * @typedef {object} LeadCopy
+ * @property {string} [title]
+ * @property {string} [lead]
+ * @property {string} [name]         the name field's label
+ * @property {string} [contact]      the contact field's label
+ * @property {string} [message]      the message field's label
+ * @property {string} [requiredNote]
+ * @property {string} [submit]
+ * @property {string} [sending]
+ * @property {string} [success]
+ * @property {string} [error]
+ * @property {string} [invalidName]
+ * @property {string} [invalidContact]
+ */
+
+/**
+ * @typedef {object} LeadPaths
+ * The `data-jtk-path` of each of the block's fields the form renders, or
+ * nothing for a build without annotations. Keys: title, lead, name_label,
+ * contact_label, message_label, required_note, cta_label.
+ * @property {string} [title]
+ * @property {string} [lead]
+ * @property {string} [name_label]
+ * @property {string} [contact_label]
+ * @property {string} [message_label]
+ * @property {string} [required_note]
+ * @property {string} [cta_label]
+ */
+
+/**
+ * @typedef {object} LeadFormProps
+ * @property {string} action       where `/api/lead` is from this page — under the preview the site is served at `/p/<slug>/`
+ * @property {LeadCopy} copy
+ * @property {Ask[]} [asks]
+ * @property {LeadPaths} [paths]
+ * @property {string} [tag]        the element's name around the form, `jtk-lead`; `''` for none
+ */
+
+const ESCAPE = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+/** @param {unknown} value */
+function esc(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (c) => ESCAPE[c]);
+}
+/** @param {string} name @param {unknown} value */
+function attr(name, value) {
+  return value === undefined || value === null || value === '' || value === false ? '' : value === true ? ` ${name}` : ` ${name}="${esc(value)}"`;
+}
+/** A `data-jtk-path`, or nothing. @param {string | undefined} path */
+const at = (path) => attr('data-jtk-path', path);
+
+/** The `<input type>` a visitor types this kind into. @param {string} kind */
+export function inputType(kind) {
+  switch (kind) {
+    case 'number': return 'number';
+    case 'tel': return 'tel';
+    case 'email': return 'email';
+    case 'url': return 'url';
+    case 'date': return 'date';
+    case 'time_of_day': return 'time';
+    default: return 'text';
+  }
+}
+
+/** @param {Ask} ask */
+function askControl(ask) {
+  const id = `lead-${ask.key}`;
+  if (ask.kind === 'textarea') {
+    return `<textarea class="field__input field__input--area" id="${esc(id)}" name="${esc(ask.key)}" rows="3"${attr('required', ask.required)}${attr('maxlength', ask.max)}></textarea>`;
+  }
+  if (ask.kind === 'select') {
+    return `<select class="field__input" id="${esc(id)}" name="${esc(ask.key)}"${attr('required', ask.required)}>
+        <option value=""></option>
+        ${(ask.options ?? []).map((o) => `<option value="${esc(o.value)}" data-jtk-fixed>${esc(o.label || o.value)}</option>`).join('\n')}
+      </select>`;
+  }
+  if (ask.kind === 'bool') {
+    return `<input class="field__check" id="${esc(id)}" name="${esc(ask.key)}" type="checkbox" value="yes">`;
+  }
+  const number = ask.kind === 'number';
+  return `<input class="field__input" id="${esc(id)}" name="${esc(ask.key)}" type="${inputType(ask.kind)}"${attr('required', ask.required)}${attr('maxlength', number ? undefined : ask.max)}${attr('min', number ? ask.min : undefined)}${attr('max', number ? ask.max : undefined)}>`;
+}
+
+/**
+ * The enquiry form as HTML.
+ *
+ * @param {LeadFormProps} props
+ * @returns {string}
+ */
+export function renderLeadForm(props) {
+  const { action, copy, asks = [], paths = {}, tag = 'jtk-lead' } = props;
+  if (typeof action !== 'string' || action === '') throw new TypeError('renderLeadForm: action is where /api/lead is from this page');
+  if (!copy || typeof copy !== 'object') throw new TypeError('renderLeadForm: copy is the form\'s words');
+
+  const form = `<form class="lead" method="post" action="${esc(action)}" novalidate data-lead-form${attr('data-success', copy.success)}${attr('data-error', copy.error)}${attr('data-sending', copy.sending)}>
+  <div class="lead__head">
+    ${copy.title ? `<h2 class="lead__title"${at(paths.title)}>${esc(copy.title)}</h2>` : ''}
+    ${copy.lead ? `<p class="lead__lead"${at(paths.lead)}>${esc(copy.lead)}</p>` : ''}
+  </div>
+
+  <div class="field">
+    <label class="field__label" for="lead-name">${copy.name ? `<span${at(paths.name_label)}>${esc(copy.name)}</span>` : ''} <span aria-hidden="true">*</span></label>
+    <input class="field__input" id="lead-name" name="name" type="text" autocomplete="name" required maxlength="120"${attr('data-message', copy.invalidName)}>
+    <p class="field__error" data-error-for="name" hidden></p>
+  </div>
+
+  <div class="field">
+    <label class="field__label" for="lead-contact">${copy.contact ? `<span${at(paths.contact_label)}>${esc(copy.contact)}</span>` : ''} <span aria-hidden="true">*</span></label>
+    <input class="field__input" id="lead-contact" name="contact" type="text" inputmode="tel" autocomplete="tel" required maxlength="120"${attr('data-message', copy.invalidContact)}>
+    <p class="field__error" data-error-for="contact" hidden></p>
+  </div>
+
+  <div class="field">
+    <label class="field__label" for="lead-message">${copy.message ? `<span${at(paths.message_label)}>${esc(copy.message)}</span>` : ''}</label>
+    <textarea class="field__input field__input--area" id="lead-message" name="message" rows="4" maxlength="2000"></textarea>
+  </div>
+
+  ${asks.map((ask) => `<div class="field">
+    <label class="field__label" for="lead-${esc(ask.key)}" data-jtk-fixed>${esc(ask.label)}${ask.required ? ' <span aria-hidden="true">*</span>' : ''}</label>
+    ${askControl(ask)}
+  </div>`).join('\n  ')}
+
+  <div class="trap" aria-hidden="true" data-jtk-fixed>
+    <label for="lead-website">Website</label>
+    <input id="lead-website" name="website" type="text" tabindex="-1" autocomplete="off">
+  </div>
+
+  ${copy.requiredNote ? `<p class="lead__legal"${at(paths.required_note)}>${esc(copy.requiredNote)}</p>` : ''}
+
+  <div class="lead__foot">
+    <button class="btn" type="submit" data-submit>${copy.submit ? `<span data-submit-label${at(paths.cta_label)}>${esc(copy.submit)}</span>` : ''}</button>
+    <p class="lead__status" role="status" data-status></p>
+  </div>
+</form>`;
+
+  return tag ? `<${tag}>${form}</${tag}>` : form;
+}