@jtakeit/kit 0.0.0-stage → 0.1.0

package/elements/lead.js

@@ -0,0 +1,134 @@
+/**
+ * `<jtk-lead>` — the enquiry form, spared the navigation.
+ *
+ * Progressive enhancement only. Every branch here has a working no-JS
+ * equivalent: without this module the browser posts the form and the
+ * platform answers with a page. What this adds is the answer in place — the
+ * sentence the form carries in `data-success` or `data-error`, and the
+ * platform's two refusals by name put beside the field they are about.
+ *
+ * Import once on the page and every `<form data-lead-form>` is wired: the
+ * ones inside a `<jtk-lead>` by the element's lifecycle, which also covers
+ * markup the panel places later (`fl:placed`); the ones written bare by a
+ * walk of the document at load.
+ */
+
+/**
+ * Wires one form. Idempotent: a form already wired is left alone.
+ * @param {HTMLFormElement} form
+ */
+export function wireLead(form) {
+  if (form.dataset.jtkWired === '1') return;
+  form.dataset.jtkWired = '1';
+
+  /** @type {HTMLElement | null} */ const status = form.querySelector('[data-status]');
+  /** @type {HTMLButtonElement | null} */ const button = form.querySelector('[data-submit]');
+  /** @type {HTMLElement | null} */ const label = form.querySelector('[data-submit-label]');
+  if (!status || !button) return;
+  const original = label?.textContent ?? '';
+
+  /** @param {string} field @param {string} message */
+  const showError = (field, message) => {
+    /** @type {HTMLElement | null} */ const el = form.querySelector(`[data-error-for="${field}"]`);
+    if (!el) return;
+    el.textContent = message;
+    el.hidden = !message;
+  };
+
+  const clearErrors = () => {
+    for (const el of /** @type {NodeListOf<HTMLElement>} */ (form.querySelectorAll('[data-error-for]'))) {
+      el.textContent = '';
+      el.hidden = true;
+    }
+  };
+
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    clearErrors();
+    status.textContent = '';
+    form.removeAttribute('data-state');
+
+    const data = new FormData(form);
+    let ok = true;
+    for (const field of ['name', 'contact']) {
+      const input = /** @type {HTMLInputElement | null} */ (form.elements.namedItem(field));
+      if (!input?.value.trim()) {
+        showError(field, input?.dataset.message ?? '');
+        ok = false;
+      }
+    }
+    if (!ok) return;
+
+    button.disabled = true;
+    if (label) label.textContent = form.dataset.sending ?? original;
+
+    try {
+      const response = await fetch(form.action, {
+        method: 'POST',
+        headers: { accept: 'application/json' },
+        body: data,
+      });
+      const body = await response.json();
+
+      if (response.ok && body.ok) {
+        form.reset();
+        status.textContent = form.dataset.success ?? '';
+        // Preview only: the destination is not connected, so nothing was
+        // delivered. Visible to the studio, meaningless to a visitor. It
+        // disappears in production.
+        if (body.demo) status.textContent += ' ⚠︎';
+      } else if (body.error === 'anonymous' || body.error === 'unreachable') {
+        // The platform refuses by name — no name, no way back to the sender —
+        // and the sentence for each is the one the field already carries.
+        const field = body.error === 'anonymous' ? 'name' : 'contact';
+        const input = /** @type {HTMLInputElement | null} */ (form.elements.namedItem(field));
+        showError(field, input?.dataset.message ?? '');
+        input?.focus();
+      } else {
+        form.setAttribute('data-state', 'error');
+        status.textContent = body.message ?? form.dataset.error ?? '';
+      }
+    } catch {
+      form.setAttribute('data-state', 'error');
+      status.textContent = form.dataset.error ?? '';
+    } finally {
+      button.disabled = false;
+      if (label) label.textContent = original;
+    }
+  });
+}
+
+/**
+ * Wires every enquiry form under a root that is not wired yet.
+ * @param {ParentNode} [root]
+ */
+export function wireAll(root = document) {
+  for (const form of /** @type {NodeListOf<HTMLFormElement>} */ (root.querySelectorAll('form[data-lead-form]'))) wireLead(form);
+  if (root instanceof HTMLFormElement && root.matches('[data-lead-form]')) wireLead(root);
+}
+
+const BaseElement = typeof HTMLElement === 'undefined' ? class {} : HTMLElement;
+
+/** `<jtk-lead>` wraps the form `renderLeadForm` wrote and wires it when it reaches the document. */
+export class JtkLead extends BaseElement {
+  connectedCallback() {
+    wireAll(/** @type {any} */ (this));
+  }
+}
+
+/** @param {string} [name] */
+export function defineLead(name = 'jtk-lead') {
+  if (typeof customElements === 'undefined' || customElements.get(name)) return;
+  customElements.define(name, JtkLead);
+}
+
+if (typeof document !== 'undefined') {
+  defineLead();
+  const start = () => wireAll(document);
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once: true });
+  else start();
+  document.addEventListener('fl:placed', (event) => {
+    const at = event.target;
+    if (at instanceof Element) wireAll(at);
+  });
+}

package/index.mjs

@@ -0,0 +1,21 @@
+/**
+ * @jtakeit/kit — the half of a site on jtakeit that does not depend on how
+ * the site is built.
+ *
+ * `@jtakeit/astro` is the scaffold: an Astro project with the platform's
+ * contract already on it. Everything in it that is not Astro's lives here,
+ * so a site on any other generator can take the same pieces (wiki/66,
+ * layer B): the booking form, as markup to put on a page at build time and
+ * as an element that makes it work in the browser.
+ *
+ *   import { renderBookingForm } from '@jtakeit/kit/booking';   // build time
+ *   import '@jtakeit/kit/elements/booking';                      // the page
+ *   @import '@jtakeit/kit/booking.css';                          // optional
+ *
+ * and the enquiry form the same way: `@jtakeit/kit/lead`,
+ * `@jtakeit/kit/elements/lead`, `@jtakeit/kit/lead.css`.
+ */
+export { renderBookingForm, SENDS } from './lib/booking/render.mjs';
+export { renderLeadForm, inputType } from './lib/lead/render.mjs';
+export { wordsFor, LOCALES } from './lib/booking/words.mjs';
+export { money } from './lib/money.mjs';

package/lead.css

@@ -0,0 +1,23 @@
+/*
+ * The enquiry form, legible and nothing more — a reference, not a design.
+ * `field`, `field__input`, `btn` are names for the site to restyle with its
+ * own. Keep `.trap` and the `[hidden]` rule whatever you do to the rest.
+ */
+.lead { display: grid; gap: 1.25rem; max-inline-size: 34rem; }
+.lead .field { display: grid; gap: 0.375rem; }
+.lead .field__label { font-size: 0.875rem; }
+.lead .field__input {
+  inline-size: 100%; padding: 0.75rem 0.875rem; font: inherit; color: inherit;
+  background: var(--paper-deep, #f2efea); border: 1px solid var(--line, #d9d4cc); border-radius: var(--r-2, 8px);
+}
+.lead .field__input--area { resize: vertical; }
+.lead .field__error { margin: 0; font-size: 0.8125rem; color: var(--danger, #b3261e); }
+
+/* Bots fill everything; people never see this. Off-screen rather than
+   display:none, which some bots detect. */
+.lead .trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+.lead__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
+.lead__status { margin: 0; font-size: 0.875rem; }
+.lead[data-state='error'] .lead__status { color: var(--danger, #b3261e); }
+.lead [hidden] { display: none !important; }

package/lib/booking/render.mjs

@@ -0,0 +1,210 @@
+/**
+ * The booking form, as markup — made at build time by whatever builds the
+ * site, and made to work in the browser by `@jtakeit/kit/elements/booking`.
+ *
+ * The rules — when the business is open, how long a slot is, whether a time
+ * is still free, what it costs — live in one place, and it is not here: the
+ * platform serves six addresses on the site's own host and the element draws
+ * what they answer. Nothing about availability is computed on the page, and
+ * nothing about the visitor's choice is trusted by the server.
+ *
+ * This is the markup `@jtakeit/astro`'s `BookingForm.astro` used to carry
+ * itself; it is a string now so a site on any generator can put the same form
+ * on a page: Eleventy in a shortcode, Next in `dangerouslySetInnerHTML`, a
+ * Node script in a template literal. Keep the `data-*` hooks and the input
+ * `name`s whatever you do to its classes: the element reads those, and the
+ * platform reads what the element sends.
+ *
+ * ── what the page passes in ─────────────────────────────────────────────────
+ *
+ * The services and the resources are collection entries the owner edits, so
+ * they arrive from the page that reads the collections. Slugs are what the
+ * platform books against; titles are what the visitor reads.
+ *
+ * ── with JavaScript off ─────────────────────────────────────────────────────
+ *
+ * A booking cannot be made without a script — the free times are fetched — so
+ * with scripts off this shows the sentence in `noScript`, and nothing
+ * pretends otherwise.
+ */
+import { money } from '../money.mjs';
+import { wordsFor } from './words.mjs';
+
+/**
+ * What this form sends to /api/book, said on the page. Preflight reads it off
+ * the built page and books in exactly this shape, so a form that sends
+ * `units` for nights, or never sends `count`, fails the check rather than
+ * passing on a request the platform made up (2 October 2026). The element
+ * sends no key that is not here — the list cannot drift from the request,
+ * because the element imports this one.
+ */
+export const SENDS = Object.freeze(['service', 'services', 'resource', 'class', 'party', 'count', 'start', 'name', 'phone', 'email', 'note', 'turnstile']);
+
+/**
+ * @typedef {object} Named
+ * @property {string} slug    what the platform books against
+ * @property {string} title   what the visitor reads
+ * @property {number} [takes] minutes, for the running total when several are picked
+ * @property {number} [costs] minor units, for the same
+ * @property {string} [group] a heading the services are listed under
+ */
+
+/**
+ * @typedef {object} BookingFormProps
+ * @property {Named[]} services
+ * @property {Named[]} [resources]  empty for a solo business: the platform assigns
+ * @property {string} locale        `uk`, `de` or `en` — decides the words drawn before the platform has spoken
+ * @property {number} [daysAhead]   how many days ahead the picker offers; the platform clamps to its own horizon
+ * @property {boolean} [combine]    the module's `combine` setting: several services for one visit, as a checklist
+ * @property {string} [currency]    the site's currency, for the running total
+ * @property {string} [scale]       the module's `scale`: `'daily'` for a business that lets things by the day
+ * @property {string} [kind]        the module's `kind`: for any kind but a salon's the kind's words are held back until the platform has said them
+ * @property {string} [api]         where `/api/` is from this page — under the preview it carries a path, so pass the address as your generator writes a root-relative one (Astro's `under('/api/')`)
+ * @property {string} [tag]         the element's name around the form, `jtk-booking`; `''` for none
+ * @property {Date} [now]           the day the picker starts from; the build's, by default
+ */
+
+const ESCAPE = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+/** @param {unknown} value */
+function esc(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (c) => ESCAPE[c]);
+}
+
+/**
+ * The booking form as HTML.
+ *
+ * @param {BookingFormProps} props
+ * @returns {string}
+ */
+export function renderBookingForm(props) {
+  const {
+    services, resources = [], locale, daysAhead = 30, combine = false, currency = 'CHF', scale = '', kind = '',
+    api = '/api/', tag = 'jtk-booking', now = new Date(),
+  } = props;
+  if (!Array.isArray(services)) throw new TypeError('renderBookingForm: services is a list of { slug, title }');
+  const unsaid = kind !== '' && kind !== 'salon';
+  const WORDS = wordsFor(locale, scale);
+  const lang = locale === 'de' ? 'de-CH' : locale === 'uk' ? 'uk-UA' : 'en';
+
+  // The checklist's runs, in the order the services came, each heading once.
+  /** @type {{ group: string; items: Named[] }[]} */
+  const runs = [];
+  for (const one of services) {
+    const group = one.group ?? '';
+    const run = runs.find((r) => r.group === group);
+    if (run) run.items.push(one);
+    else runs.push({ group, items: [one] });
+  }
+
+  const today = now.toISOString().slice(0, 10);
+  const last = new Date(now.getTime() + daysAhead * 86_400_000).toISOString().slice(0, 10);
+
+  const servicesField = combine
+    ? `<fieldset class="booking__services" data-services>
+        <legend class="field__label" data-say="services">${esc(WORDS.services)}</legend>
+        ${runs.map((run) => `<div class="booking__run">
+            ${run.group !== '' ? `<p class="booking__run-title">${esc(run.group)}</p>` : ''}
+            ${run.items.map((one) => `<label class="booking__service">
+                <input type="checkbox" name="service" value="${esc(one.slug)}" data-takes="${esc(one.takes ?? 0)}" data-costs="${esc(one.costs ?? 0)}">
+                <span class="booking__service-name">${esc(one.title)}</span>
+                <span class="booking__service-meta">${one.takes ? `${esc(one.takes)} min` : ''}${one.costs ? ` · ${esc(money(one.costs, currency, lang))}` : ''}</span>
+              </label>`).join('\n')}
+          </div>`).join('\n')}
+        <p class="booking__total" data-total hidden></p>
+      </fieldset>`
+    : `<label class="field__label" for="booking-service" data-say="service">${esc(WORDS.service)}</label>
+        <select class="field__input" id="booking-service" name="service" required>
+          ${services.map((one) => `<option value="${esc(one.slug)}">${esc(one.title)}</option>`).join('\n')}
+        </select>`;
+
+  const resourcesField = resources.length > 1
+    ? `<div class="field">
+      <label class="field__label" for="booking-resource" data-say="resource">${esc(WORDS.resource)}</label>
+      <select class="field__input" id="booking-resource" name="resource" data-say-wait>
+        <option value="" data-say="any">${esc(WORDS.any)}</option>
+        ${resources.map((one) => `<option value="${esc(one.slug)}">${esc(one.title)}</option>`).join('\n')}
+      </select>
+    </div>`
+    : '';
+
+  // Fixed, the whole form, as the lead form's labels are: every word in it is
+  // the platform's — spoken in the business's kind from the availability
+  // answer, «Забронювати» over the build's «Записатися» — or an entry's own
+  // title, which the owner edits on the entry. None is the owner's to edit
+  // here, and `jtk catalogue` asked whose all seventeen were on a fresh
+  // restaurant (30 September 2026).
+  const form = `<form class="booking${unsaid ? ' booking--unsaid' : ''}" data-booking data-locale="${esc(locale)}" data-currency="${esc(currency)}" data-words="${esc(JSON.stringify(WORDS))}" data-scale="${esc(scale)}" data-api="${esc(api)}" data-sends="${SENDS.join(',')}" novalidate data-jtk-fixed>
+  <noscript><p class="booking__note">${esc(WORDS.noScript)}</p></noscript>
+
+  <div class="field">
+    ${servicesField}
+  </div>
+
+  ${resourcesField}
+
+  <div class="field">
+    <label class="field__label" for="booking-day">${esc(WORDS.day)}</label>
+    <input class="field__input" id="booking-day" name="day" type="date" min="${today}" max="${last}" required>
+  </div>
+
+  <div class="field" data-back-field hidden>
+    <label class="field__label" for="booking-back">${esc(WORDS.back)}</label>
+    <input class="field__input" id="booking-back" name="back" type="date" min="${today}">
+    <p class="booking__hint" data-length hidden></p>
+  </div>
+
+  <div class="field" data-hours-field hidden>
+    <label class="field__label" for="booking-hours">${esc(WORDS.hours)}</label>
+    <select class="field__input" id="booking-hours" name="hours"></select>
+  </div>
+
+  <div class="field" data-party-field hidden>
+    <label class="field__label" for="booking-party">${esc(WORDS.party)}</label>
+    <select class="field__input" id="booking-party" name="party"></select>
+  </div>
+
+  <fieldset class="field booking__times" data-times>
+    <legend class="field__label">${esc(WORDS.time)}</legend>
+    <p class="booking__hint" data-times-hint aria-live="polite">${esc(WORDS.pick)}</p>
+    <div class="booking__slots" data-slots></div>
+    <p class="booking__total" data-stay-total hidden></p>
+  </fieldset>
+
+  <div class="field">
+    <label class="field__label" for="booking-name">${esc(WORDS.name)} <span aria-hidden="true">*</span></label>
+    <input class="field__input" id="booking-name" name="name" type="text" autocomplete="name" required maxlength="120">
+  </div>
+  <div class="field">
+    <label class="field__label" for="booking-phone">${esc(WORDS.phone)}</label>
+    <input class="field__input" id="booking-phone" name="phone" type="tel" inputmode="tel" autocomplete="tel" maxlength="40">
+  </div>
+  <div class="field">
+    <label class="field__label" for="booking-email">${esc(WORDS.email)}</label>
+    <input class="field__input" id="booking-email" name="email" type="email" inputmode="email" autocomplete="email" maxlength="120">
+  </div>
+  <div class="field">
+    <label class="field__label" for="booking-note">${esc(WORDS.note)}</label>
+    <textarea class="field__input field__input--area" id="booking-note" name="note" rows="3" maxlength="2000"></textarea>
+  </div>
+
+  <div class="booking__challenge" data-challenge hidden></div>
+
+  <p class="field__error" data-booking-error role="alert" hidden></p>
+
+  <button class="booking__submit" type="submit" data-submit data-say="book">${esc(WORDS.book)}</button>
+
+  <div class="booking__done" data-done role="status" tabindex="-1" hidden>
+    <p class="booking__done-line" data-done-line></p>
+    <p class="booking__done-when" data-done-when></p>
+    <p class="booking__done-when" data-done-what hidden></p>
+    <p class="booking__note" data-pay-note hidden></p>
+    <p class="booking__links">
+      <a data-pay hidden></a>
+      <a data-manage hidden></a>
+      <a data-telegram hidden target="_blank" rel="noreferrer noopener"></a>
+    </p>
+  </div>
+</form>`;
+
+  return tag ? `<${tag}>${form}</${tag}>` : form;
+}

package/lib/booking/words.mjs

@@ -0,0 +1,88 @@
+/**
+ * The booking form's words, per language, before the platform has spoken.
+ *
+ * These are a salon's. The words that depend on the kind of business —
+ * «Записатися» or «Орендувати», «Майстер» or «Авто» — are the platform's, in
+ * its availability answer (`words`), the kind's dictionary with the site's
+ * own over it; the element hears them and replaces these. A site in a
+ * language not here gets English, which the platform's answer then corrects
+ * for the words it has.
+ */
+
+/** The languages the form carries words in. */
+export const LOCALES = Object.freeze(['uk', 'de', 'en']);
+
+const BASE = {
+  uk: {
+    service: 'Послуга', services: 'Послуги', total: 'Разом', pickService: 'Оберіть хоча б одну послугу.', resource: 'Майстер', any: 'Будь-хто', day: 'День', time: 'Час',
+    name: "Ім'я", phone: 'Телефон', email: 'Електронна пошта', note: 'Коментар',
+    book: 'Записатися', sending: 'Записуємо…', none: 'У цей день вільного часу немає.', noParty: 'Немає вільних місць для такої компанії.',
+    pick: 'Оберіть день', confirmed: 'Ви записані.', pending: 'Запис отримано — ми підтвердимо його найближчим часом.',
+    pay: 'Оплатити', payNote: 'Час зарезервовано на 30 хвилин. Щоб закріпити його, завершіть оплату.',
+    manage: 'Скасувати або перенести запис', telegram: 'Нагадування в Telegram',
+    taken: 'Цей час щойно зайняли — оберіть інший.', failed: 'Не вдалося записатися. Спробуйте ще раз або зателефонуйте.',
+    back: 'До', length: 'Від {min} до {max} діб.', anyOf: 'Будь-яке вільне — {class}', noneOf: '{class} — немає вільних', notFor: '{who} — не для обраного', notForChosen: '{who} — не для обраного. Оберіть іншого або «{any}».', took: 'Ви берете: {what}',
+    party: 'Скільки вас', hours: 'Скільки часу', hourShort: 'год', minuteShort: 'хв', challenge: 'Підтвердіть, що ви не робот, і спробуйте ще раз.', tooMany: 'У вас уже є кілька відкритих записів. Скасуйте один із них або зателефонуйте нам.',
+    needContact: 'Вкажіть телефон або пошту, щоб ми могли з вами звʼязатися.', noScript: 'Онлайн-форма працює з увімкненим JavaScript — увімкніть його або зателефонуйте нам.',
+  },
+  de: {
+    service: 'Leistung', services: 'Leistungen', total: 'Zusammen', pickService: 'Bitte mindestens eine Leistung wählen.', resource: 'Bei', any: 'Egal wer', day: 'Tag', time: 'Uhrzeit',
+    name: 'Name', phone: 'Telefon', email: 'E-Mail', note: 'Bemerkung',
+    book: 'Termin buchen', sending: 'Wird gebucht…', none: 'An diesem Tag ist nichts frei.', noParty: 'Für so viele Personen gibt es keinen freien Platz.',
+    pick: 'Wählen Sie einen Tag', confirmed: 'Ihr Termin ist gebucht.', pending: 'Anfrage erhalten — wir bestätigen den Termin in Kürze.',
+    pay: 'Jetzt bezahlen', payNote: 'Der Termin ist 30 Minuten reserviert. Schliessen Sie die Zahlung ab, um ihn zu behalten.',
+    manage: 'Termin absagen oder verschieben', telegram: 'Erinnerungen per Telegram',
+    taken: 'Diese Zeit wurde gerade vergeben — bitte wählen Sie eine andere.', failed: 'Die Buchung hat nicht geklappt. Bitte erneut versuchen oder anrufen.',
+    back: 'Bis', length: 'Von {min} bis {max} Nächte.', anyOf: 'Beliebig frei — {class}', noneOf: '{class} — nichts verfügbar', notFor: '{who} — nicht für diese Auswahl', notForChosen: '{who} — nicht für diese Auswahl. Bitte jemand anderen oder «{any}» wählen.', took: 'Sie nehmen: {what}',
+    party: 'Wie viele Personen', hours: 'Wie lange', hourShort: 'Std.', minuteShort: 'Min.', challenge: 'Bitte bestätigen Sie, dass Sie kein Roboter sind, und versuchen Sie es erneut.', tooMany: 'Sie haben bereits mehrere offene Termine. Sagen Sie einen ab oder rufen Sie uns an.',
+    needContact: 'Bitte Telefon oder E-Mail angeben, damit wir Sie erreichen können.', noScript: 'Für die Online-Buchung ist JavaScript nötig — oder rufen Sie uns an.',
+  },
+  en: {
+    service: 'Service', services: 'Services', total: 'Total', pickService: 'Pick at least one service.', resource: 'With', any: 'Anyone', day: 'Day', time: 'Time',
+    name: 'Name', phone: 'Phone', email: 'Email', note: 'Note',
+    book: 'Book', sending: 'Booking…', none: 'Nothing is free on that day.', noParty: 'There is no place for a party this large.',
+    pick: 'Choose a day', confirmed: 'You are booked.', pending: 'Received — we will confirm shortly.',
+    pay: 'Pay now', payNote: 'The time is held for 30 minutes. Complete the payment to keep it.',
+    manage: 'Cancel or move the booking', telegram: 'Reminders in Telegram',
+    taken: 'That time has just been taken — please choose another.', failed: 'That did not work. Please try again or ring us.',
+    back: 'Until', length: 'From {min} to {max} nights.', anyOf: 'Any free — {class}', noneOf: '{class} — none available', notFor: '{who} — not for this choice', notForChosen: '{who} — not for this choice. Pick another, or «{any}».', took: 'You are taking: {what}',
+    party: 'How many of you', hours: 'How long', hourShort: 'h', minuteShort: 'min', challenge: 'Please confirm you are not a robot and try again.', tooMany: 'You already have several open bookings. Cancel one, or ring us.',
+    needContact: 'Leave a phone number or an email so we can reach you.', noScript: 'Booking online needs JavaScript — or ring us.',
+  },
+};
+
+// A letting is had for days, not at a time: «Час», «вільного часу немає» and
+// «Час зарезервовано» are a salon's words.
+const DAYS = {
+  uk: {
+    day: 'Від', pick: 'Оберіть дати',
+    time: 'Дні', none: 'Цього дня нічого вільного немає.',
+    payNote: 'Ці дні тримаємо за вами 30 хвилин. Щоб закріпити їх, завершіть оплату.',
+    taken: 'Ці дні щойно зайняли — оберіть інші.',
+  },
+  de: {
+    day: 'Von', pick: 'Wählen Sie die Tage',
+    time: 'Tage', none: 'Ab diesem Tag ist nichts frei.',
+    payNote: 'Die Tage sind 30 Minuten für Sie reserviert. Schliessen Sie die Zahlung ab, um sie zu behalten.',
+    taken: 'Diese Tage wurden gerade vergeben — bitte wählen Sie andere.',
+  },
+  en: {
+    day: 'From', pick: 'Choose the dates',
+    time: 'Days', none: 'Nothing is free from that day.',
+    payNote: 'The days are held for 30 minutes. Complete the payment to keep them.',
+    taken: 'Those days have just been taken — please choose others.',
+  },
+};
+
+/**
+ * The form's words for a language and a scale — the salon's, or a letting
+ * business's by the day — as a fresh object the caller may write over.
+ *
+ * @param {string} locale  `uk`, `de` or `en`; anything else reads as `en`
+ * @param {string} [scale] `'daily'` for a business that lets things by the day
+ * @returns {Record<string, string>}
+ */
+export function wordsFor(locale, scale = '') {
+  const lang = LOCALES.includes(locale) ? locale : 'en';
+  return scale === 'daily' ? { ...BASE[lang], ...DAYS[lang] } : { ...BASE[lang] };
+}