@jtakeit/kit 0.4.0 → 0.5.1

package/README.md

@@ -58,6 +58,15 @@ A form written by hand is wired too, as long as it keeps the `data-*` hooks
 and the input `name`s of the rendered one: `wireAll()` walks the document at
 load and again on the panel's `fl:placed`.
 
+**By default the form arrives dressed** — two steps, the day as a week of
+seven that never offers yesterday, the times by the part of the day, a drawn
+choice of whom, a master chosen greying out what they do not do, the time kept
+across changes, the end of the visit, a 24-hour clock, and the success showing
+the booking's link whole with *Copy* (`@jtakeit/kit/elements/booking-ui`,
+switched on by `renderBookingForm`'s `ui`, `false` for the plain form). Pass
+`open` (the days the business opens) and each resource's `does` for the week
+and the greying to know.
+
 **The look** is the site's to give. `@jtakeit/kit/booking.css` makes the form
 legible and nothing more; `field`, `field__input`, `booking__slot`,
 `booking__submit` are names to restyle with the site's own fields and
@@ -163,6 +172,25 @@ build that way yourself (`SITE_URL=https://x.invalid/p/check/`) and pass
 `--dist`. `@jtakeit/astro catalogue` is this tool, signing the file as the
 scaffold.
 
+## The page says where it is
+
+```
+npx jtkit session <session_id> <watch_key>      # --api https://api.stg.jtakeit.com on staging
+npx jtkit session --forget
+```
+
+Under `astro dev` every page carries a small card, bottom right: the seven
+phases of a site being written — the brief, the layout, the writing, read
+off the files; the judge's word, the repository, the build and the preview
+from the platform — and the steps of the panel's setting up the developer
+can take meanwhile, with the way there. The platform's half comes through
+the dev session: `open_dev_session` answers with a `watch_key`, and this
+command keeps it in `jtk/session.json`, out of git, for the dev server to
+present. The key reads that one session's progress and nothing else, and
+dies with the session. The card is `@jtakeit/kit/writing`; the rules it
+draws by are `@jtakeit/kit/phases`, the panel's own; and nothing of it is in
+a build.
+
 ## Also here
 
 - `@jtakeit/kit/progress` — where the site is, read off the files: the brief's
@@ -170,6 +198,9 @@ scaffold.
   scaffold's dev server serves it as `/_jtk/progress.json` for the panel, and
   `jtkit progress` prints the same list for the agent; a rule in one is a
   rule in both, and nothing in it is declared.
+- `@jtakeit/kit/phases` — the seven phases from the two halves, by the panel's
+  rules: a later phase counts only once every one before it does; written is
+  the still-to-do list being empty.
 - `@jtakeit/kit/money` — a price as the page says it: «2 300 ₴», no kopecks
   on a whole price, no sign where the site has not said its currency.
 - `@jtakeit/kit/booking/words` — the form's words per language, the salon's

package/bin/jtkit.mjs

@@ -11,6 +11,8 @@
  *       the annotation lint the platform's build runs, on this working tree
  *   jtkit progress [--root .] [--json]
  *       where the site is, read off the files: the brief, the pages, the entries, what is missing
+ *   jtkit session <session_id> <watch_key> [--api <url>] [--root .]   |   jtkit session --forget
+ *       let the page the dev server serves read the platform's half through the dev session
  */
 import { pathToFileURL } from 'node:url';
 import { join, dirname, resolve } from 'node:path';
@@ -48,6 +50,37 @@ switch (command) {
     }
     break;
   }
+  case 'session': {
+    // The dev session's watch key, kept beside the content and out of git:
+    // the dev server presents it for one read-only answer — where the site
+    // is on the platform and what the developer can do in the panel — which
+    // the page then shows bottom right (elements/writing.js).
+    const { writeFileSync, unlinkSync, mkdirSync, existsSync } = await import('node:fs');
+    const root = resolve(flag('root', process.cwd()));
+    const file = join(root, 'jtk', 'session.json');
+    if (has('forget')) {
+      if (existsSync(file)) unlinkSync(file);
+      console.log('forgotten: the page no longer reads the platform');
+      break;
+    }
+    const takesValue = new Set(['--api', '--root']);
+    const positional = [];
+    for (let i = 0; i < rest.length; i++) {
+      if (takesValue.has(rest[i])) { i++; continue; }
+      if (rest[i].startsWith('--')) continue;
+      positional.push(rest[i]);
+    }
+    const [session, key] = positional;
+    if (!session || !key) {
+      console.error("jtkit session <session_id> <watch_key> [--api <url>] — both are in open_dev_session's answer");
+      process.exit(1);
+    }
+    const api = flag('api', process.env.JTK_API_URL || 'https://api.jtakeit.com').replace(/\/$/, '');
+    mkdirSync(dirname(file), { recursive: true });
+    writeFileSync(file, JSON.stringify({ session, key, api }, null, 2) + '\n');
+    console.log(`${relative(process.cwd(), file)} written — the page the dev server serves now shows the platform's half through session ${session} at ${api}. Not in git; jtkit session --forget drops it.`);
+    break;
+  }
   case 'progress': {
     // The same reading the scaffold's dev server serves the panel as
     // /_jtk/progress.json — what the owner sees as missing is what this

package/booking.css

@@ -6,7 +6,7 @@
  * buttons, the way the scaffold's booking.md asks. Keep the `data-*` hooks and
  * the `[hidden]` rule below whatever you do to the rest.
  */
-.booking { display: grid; gap: var(--space-4, 1rem); max-width: 34rem; }
+.booking { display: grid; gap: var(--space-4, 1rem); max-width: 34rem; scroll-margin-top: 5rem; }
 
 /* The kind's words, until the platform has said them: the space kept, the
    salon's word not shown at a car rental. */
@@ -30,6 +30,60 @@
 .booking__done-line { font-weight: 600; margin: 0; }
 .booking__done-when { margin: 0; }
 
+/* The look, by default (booking-ui.js): legible, and the site's to restyle.
+   Keep `.is-replaced` and `[data-stage]` whatever you do to the rest. */
+.booking > * { min-width: 0; }
+.booking__ends { margin: 0.35rem 0 0; }
+.booking__service.is-off { opacity: 0.5; cursor: default; }
+.booking__service-off { font-size: 0.8em; opacity: 0.75; }
+/* the native control stays for the form; the drawn one is what is seen */
+.booking .is-replaced { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
+/* the week of days */
+.booking__days-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.4rem; }
+.booking__days-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
+.booking__day, .booking__days-arrow, .booking__part, .booking__next, .booking__back, .booking__dd-trigger, .booking__dd-option, .booking__keep-copy {
+  font: inherit; color: inherit; background: transparent; border: 1px solid var(--color-line, currentColor); border-radius: var(--radius-sm, 0.5rem); cursor: pointer;
+}
+.booking__day { display: grid; gap: 0.1rem; padding: 0.4rem 0.1rem; text-align: center; line-height: 1.2; }
+.booking__day-wd { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
+.booking__day:disabled, .booking__days-arrow:disabled { opacity: 0.35; cursor: default; }
+.booking__day.is-chosen { background: var(--color-ink, #111); color: var(--color-bg, #fff); border-color: var(--color-ink, #111); }
+.booking__days-arrow { padding: 0.3rem 0.6rem; }
+/* the times by the part of the day */
+.booking__parts { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 0.5rem; }
+.booking__part { padding: 0.3rem 0.7rem; border-radius: 999px; }
+.booking__part.is-current { background: var(--color-ink, #111); color: var(--color-bg, #fff); border-color: var(--color-ink, #111); }
+.booking__part-n { font-size: 0.8em; opacity: 0.75; margin-left: 0.35rem; }
+/* the two steps */
+.booking__stepper { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; opacity: 0.75; }
+.booking__step { display: inline-flex; align-items: center; gap: 0.4rem; }
+.booking__step-n { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.8em; }
+.booking__step.is-current { opacity: 1; font-weight: 600; }
+.booking__step.is-current .booking__step-n, .booking__step.is-done .booking__step-n { background: var(--color-ink, #111); color: var(--color-bg, #fff); border-color: var(--color-ink, #111); }
+.booking[data-stage='1'] > [data-step='2'], .booking[data-stage='2'] > [data-step='1'] { display: none; }
+.booking[data-stage='done'] > .booking__stepper, .booking[data-stage='done'] > .booking__summary, .booking[data-stage='done'] > .booking__need, .booking[data-stage='done'] > .booking__next { display: none; }
+.booking__next { padding: 0.6rem 1.2rem; }
+.booking__need { margin: 0; color: var(--color-danger, #b3261e); }
+.booking__summary { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--line, #e5e1d8); border-radius: var(--radius-sm, 0.5rem); }
+.booking__summary-label { margin: 0; font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
+.booking__summary-list { display: grid; gap: 0.4rem; margin: 0; }
+.booking__summary-row dt { font-size: 0.8em; opacity: 0.7; }
+.booking__summary-row dd { margin: 0; }
+.booking__back { justify-self: start; padding: 0.3rem 0.8rem; border-radius: 999px; }
+/* the drawn choice of whom */
+.booking__dd { position: relative; }
+.booking__dd-trigger { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; padding: 0.55rem 0.75rem; text-align: left; }
+.booking__dd-list { position: absolute; inset-inline: 0; top: calc(100% + 0.25rem); z-index: 5; display: grid; padding: 0.25rem; background: var(--color-bg, #fff); border: 1px solid var(--line, #e5e1d8); border-radius: var(--radius-sm, 0.5rem); box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.3); }
+.booking__dd-option { border: 0; padding: 0.5rem 0.6rem; text-align: left; }
+.booking__dd-option:hover, .booking__dd-option:focus-visible { background: var(--line, #e5e1d8); }
+.booking__dd-option.is-chosen { font-weight: 600; }
+.booking__dd-option:disabled { opacity: 0.45; cursor: default; }
+/* the link, kept */
+.booking__keep { display: grid; gap: 0.4rem; }
+.booking__keep-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.booking__keep-link { flex: 1; min-width: 12rem; font: inherit; }
+.booking__keep-copy, .booking__keep-open { display: inline-flex; align-items: center; padding: 0.45rem 0.8rem; text-decoration: none; }
+
 /* `hidden` means hidden, whatever the element's class says: every state here
    is shown and hidden by the attribute, and a class that sets `display` would
    otherwise win (an agent's rehearsal, 30 September 2026). */

package/elements/booking-ui.js

@@ -0,0 +1,371 @@
+/**
+ * The booking form's look, by default: what a visitor on a phone between
+ * two appointments needs, drawn over the kit's own markup.
+ *
+ *   steps   two steps — what and when, then who is coming — with the choice
+ *           summarised beside the name, and a way back
+ *   week    the day as a row of seven, rolling from today, closed days
+ *           struck out, never yesterday
+ *   parts   the times by the part of the day — morning, afternoon, evening —
+ *           one part showing at a time, so thirty pills become a dozen and
+ *           nothing scrolls; a part of one or two times joins its neighbour
+ *   select  the choice of whom as a drawn list rather than the browser's own
+ *
+ * `renderBookingForm` turns all four on with `data-ui` on the form; a site
+ * passes `ui: false` for the plain form, or names the ones it wants. Every
+ * piece reads the element's hooks and leaves them where they are — the
+ * native day input is still what is submitted, the kit's pills are still the
+ * pills — so the protocol is untouched and `preflight` reads the same form.
+ *
+ * The look is the kit's reference and the site's to restyle: `booking.css`
+ * makes it legible, the scaffold's `global.css` makes it the site's.
+ */
+import { PARTS, partsOf, parseDay, ymd, DAY_NAMES, to24 } from '../lib/booking/parts.mjs';
+
+/**
+ * @param {HTMLFormElement} form
+ * @param {Record<string, string>} words
+ */
+export function dressBooking(form, words) {
+  if (form.dataset.dressed === '1') return;
+  form.dataset.dressed = '1';
+  const wants = new Set((form.dataset.ui ?? '').split(/\s+/).filter(Boolean));
+  const lang = document.documentElement.lang || form.dataset.locale || 'en';
+  if (wants.has('select')) {
+    for (const select of /** @type {NodeListOf<HTMLSelectElement>} */ (form.querySelectorAll('select[name=resource], select[name=service]'))) drawnSelect(select);
+  }
+  if (wants.has('week')) {
+    const day = /** @type {HTMLInputElement | null} */ (form.querySelector('input[name=day]'));
+    if (day) weekStrip(day, { open: (form.dataset.open ?? '').split(',').filter(Boolean), lang, words });
+  }
+  if (wants.has('parts')) partsOfDay(form, words);
+  if (wants.has('steps')) twoSteps(form, words, lang);
+}
+
+/**
+ * A week of days in a row: seven chips from the first day that can be
+ * booked, the month above them, arrows for the next and the previous week.
+ * The native input stays — hidden — and is what the form submits; a press on
+ * a day sets it and fires `change`, which is what the element listens to.
+ *
+ * @param {HTMLInputElement} input
+ * @param {{ open: string[]; lang: string; words: Record<string, string> }} options
+ */
+export function weekStrip(input, options) {
+  if (input.dataset.week === '1') return;
+  input.dataset.week = '1';
+  const open = new Set(options.open.length > 0 ? options.open : DAY_NAMES);
+  // Today is the browser's, not the build's: `min` was written when the
+  // site was built, and a site built on Friday is read on Saturday.
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const minSaid = parseDay(input.min);
+  const floor = minSaid && minSaid > today ? minSaid : today;
+  const max = parseDay(input.max) ?? new Date(floor.getFullYear(), floor.getMonth() + 2, floor.getDate());
+  const monthName = new Intl.DateTimeFormat(options.lang, { month: 'long', year: 'numeric' });
+  const weekday = new Intl.DateTimeFormat(options.lang, { weekday: 'short' });
+  const plus = (d, n) => { const out = new Date(d); out.setDate(out.getDate() + n); return out; };
+  const choosable = (d) => d >= floor && d <= max && open.has(DAY_NAMES[(d.getDay() + 6) % 7]);
+
+  const root = document.createElement('div');
+  root.className = 'booking__days';
+  root.setAttribute('role', 'group');
+  root.setAttribute('aria-label', input.labels?.[0]?.textContent?.trim() || options.words.day || 'Day');
+  input.classList.add('is-replaced');
+  input.setAttribute('aria-hidden', 'true');
+  input.tabIndex = -1;
+  input.insertAdjacentElement('afterend', root);
+  const chosenAtStart = parseDay(input.value);
+  let start = chosenAtStart && chosenAtStart >= floor && chosenAtStart > plus(floor, 6) ? chosenAtStart : new Date(floor);
+
+  function draw() {
+    const chosen = input.value;
+    const week = Array.from({ length: 7 }, (_, i) => plus(start, i));
+    const span = week[0].getMonth() === week[6].getMonth()
+      ? monthName.format(week[0])
+      : `${monthName.format(week[0]).split(' ')[0]} – ${monthName.format(week[6])}`;
+    root.innerHTML = `
+      <div class="booking__days-head">
+        <span class="booking__days-month">${span}</span>
+        <span class="booking__days-nav">
+          <button type="button" class="booking__days-arrow" data-go="-7" aria-label="${options.words.prevWeek ?? 'Previous week'}"${plus(start, -1) >= floor ? '' : ' disabled'}>‹</button>
+          <button type="button" class="booking__days-arrow" data-go="7" aria-label="${options.words.nextWeek ?? 'Next week'}"${plus(start, 7) <= max ? '' : ' disabled'}>›</button>
+        </span>
+      </div>
+      <div class="booking__days-row">
+        ${week.map((d) => {
+          const value = ymd(d);
+          const ok = choosable(d);
+          return `<button type="button" class="booking__day${value === chosen ? ' is-chosen' : ''}" data-day="${value}"${ok ? '' : ' disabled'} aria-pressed="${value === chosen}"><span class="booking__day-wd">${weekday.format(d)}</span><span class="booking__day-n">${d.getDate()}</span></button>`;
+        }).join('')}
+      </div>`;
+  }
+  root.addEventListener('click', (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    const arrow = target?.closest('[data-go]');
+    if (arrow instanceof HTMLButtonElement) {
+      start = plus(start, Number(arrow.dataset.go));
+      if (start < floor) start = new Date(floor);
+      draw();
+      return;
+    }
+    const dayButton = target?.closest('[data-day]');
+    if (dayButton instanceof HTMLButtonElement && !dayButton.disabled) {
+      input.value = dayButton.dataset.day ?? '';
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+      draw();
+    }
+  });
+  input.addEventListener('change', draw);
+  draw();
+}
+
+/**
+ * The times by the part of the day, one part showing at a time. The element
+ * writes the pills; this sorts them as they arrive. A pill the element has
+ * chosen decides which part shows.
+ *
+ * @param {HTMLFormElement} form
+ * @param {Record<string, string>} words
+ */
+export function partsOfDay(form, words) {
+  const slots = /** @type {HTMLElement | null} */ (form.querySelector('[data-slots]'));
+  if (!slots || slots.dataset.parts === '1') return;
+  slots.dataset.parts = '1';
+  const tabs = document.createElement('div');
+  tabs.className = 'booking__parts';
+  tabs.setAttribute('role', 'tablist');
+  tabs.hidden = true;
+  slots.insertAdjacentElement('beforebegin', tabs);
+  const timeOf = (pill) => to24((pill.textContent ?? '').trim()).slice(0, 5);
+  const hourOf = (pill) => Number(timeOf(pill).slice(0, 2));
+  /** @type {WeakMap<HTMLElement, string>} */
+  const parts = new WeakMap();
+  let current = '';
+
+  const show = () => {
+    for (const pill of /** @type {NodeListOf<HTMLElement>} */ (slots.querySelectorAll('.booking__slot'))) {
+      pill.hidden = current !== '' && parts.get(pill) !== current;
+    }
+    for (const tab of /** @type {NodeListOf<HTMLElement>} */ (tabs.querySelectorAll('.booking__part'))) {
+      tab.classList.toggle('is-current', tab.dataset.part === current);
+      tab.setAttribute('aria-selected', String(tab.dataset.part === current));
+    }
+  };
+  const sort = () => {
+    const pills = /** @type {HTMLElement[]} */ ([...slots.querySelectorAll('.booking__slot')]);
+    // A time on the pill is the platform's clock in the site's language;
+    // the hour read off it on 24 hours whatever that clock says.
+    const sorted = partsOf(pills.map(hourOf));
+    pills.forEach((pill, i) => parts.set(pill, sorted[i]));
+    const have = new Set(sorted);
+    const chosen = pills.find((pill) => pill.classList.contains('is-chosen'));
+    tabs.innerHTML = PARTS.filter((part) => have.has(part))
+      .map((part) => {
+        const own = pills.filter((pill) => parts.get(pill) === part).map(timeOf);
+        return `<button type="button" class="booking__part" role="tab" data-part="${part}">${words[part] ?? part}<span class="booking__part-n">${own[0]}–${own[own.length - 1]}</span></button>`;
+      })
+      .join('');
+    tabs.hidden = have.size < 2;
+    current = chosen ? parts.get(chosen) ?? '' : have.has(/** @type {never} */ (current)) ? current : [...have][0] ?? '';
+    show();
+  };
+  tabs.addEventListener('click', (event) => {
+    const tab = event.target instanceof Element ? event.target.closest('[data-part]') : null;
+    if (!(tab instanceof HTMLElement)) return;
+    current = tab.dataset.part ?? '';
+    show();
+  });
+  new MutationObserver(sort).observe(slots, { childList: true });
+  sort();
+}
+
+/**
+ * The form in two steps: the services, whom, the day and the time first; the
+ * name and the rest once those are chosen, with the choice summarised beside
+ * them and a way back. One form throughout — every field keeps its place,
+ * the element keeps reading them — so with scripts off it is the one form,
+ * whole. The success is a step of its own: the element shows its box, this
+ * takes the steps and the summary away.
+ *
+ * @param {HTMLFormElement} form
+ * @param {Record<string, string>} words
+ * @param {string} lang
+ */
+export function twoSteps(form, words, lang) {
+  if (form.dataset.steps === '1') return;
+  form.dataset.steps = '1';
+  const firstHalf = new Set(['service', 'resource', 'day', 'back', 'hours', 'party', 'quantity', 'class']);
+  for (const child of /** @type {HTMLElement[]} */ ([...form.children])) {
+    const control = child.querySelector('input, select, textarea');
+    const name = control instanceof HTMLInputElement || control instanceof HTMLSelectElement || control instanceof HTMLTextAreaElement ? control.name : '';
+    const first = child.matches('[data-times]') || firstHalf.has(name) || child.tagName === 'NOSCRIPT' || child.matches('[data-done]');
+    child.dataset.step = first ? '1' : '2';
+  }
+  for (const el of form.querySelectorAll('[data-done], [data-booking-error]')) /** @type {HTMLElement} */ (el).dataset.step = 'both';
+
+  const stepper = document.createElement('ol');
+  stepper.className = 'booking__stepper';
+  stepper.innerHTML = [words.stepWhat ?? 'What and when', words.stepWho ?? 'Who is coming']
+    .map((name, i) => `<li class="booking__step" data-at="${i + 1}"><span class="booking__step-n">${i + 1}</span>${name}</li>`)
+    .join('');
+  form.prepend(stepper);
+
+  const next = document.createElement('button');
+  next.type = 'button';
+  next.className = 'booking__next';
+  next.dataset.step = '1';
+  next.textContent = words.next ?? 'Continue';
+  const need = document.createElement('p');
+  need.className = 'booking__need';
+  need.dataset.step = '1';
+  need.hidden = true;
+  need.textContent = words.needAll ?? 'Pick a service, a day and a time first.';
+  const times = form.querySelector('[data-times]');
+  times?.insertAdjacentElement('afterend', need);
+  need.insertAdjacentElement('afterend', next);
+
+  const summary = document.createElement('div');
+  summary.className = 'booking__summary';
+  summary.dataset.step = '2';
+  form.insertBefore(summary, form.querySelector('[data-step="2"]'));
+
+  const chosen = () => {
+    const names = /** @type {HTMLInputElement[]} */ ([...form.querySelectorAll('input[name=service]:checked')])
+      .map((box) => box.closest('.booking__service')?.querySelector('.booking__service-name')?.textContent?.trim() ?? box.value);
+    const single = /** @type {HTMLSelectElement | null} */ (form.querySelector('select[name=service]'));
+    if (single) names.push(single.options[single.selectedIndex]?.textContent?.trim() ?? '');
+    const who = /** @type {HTMLSelectElement | null} */ (form.querySelector('select[name=resource]'));
+    const dayValue = /** @type {HTMLInputElement | null} */ (form.querySelector('input[name=day]'))?.value ?? '';
+    const dayDate = parseDay(dayValue);
+    const slot = /** @type {HTMLElement | null} */ (form.querySelector('.booking__slot.is-chosen'));
+    const ends = /** @type {HTMLElement | null} */ (form.querySelector('[data-ends]'));
+    return {
+      services: names.filter(Boolean),
+      who: who ? who.options[who.selectedIndex]?.textContent?.trim() ?? '' : '',
+      day: dayDate ? new Intl.DateTimeFormat(lang, { weekday: 'short', day: 'numeric', month: 'long' }).format(dayDate) : dayValue,
+      time: slot ? to24((slot.textContent ?? '').trim()).split('·')[0].trim() : '',
+      until: ends && !ends.hidden ? ends.dataset.clock ?? '' : '',
+      takes: ends && !ends.hidden ? ends.dataset.length ?? '' : '',
+    };
+  };
+
+  const stage = (to) => {
+    // A move between the steps brings the form into view; the first stage,
+    // set as the page loads, must not — it scrolled every visitor to the
+    // form the moment the page opened (10 October 2026).
+    const moved = form.dataset.stage !== undefined && form.dataset.stage !== to;
+    form.dataset.stage = to;
+    for (const step of /** @type {NodeListOf<HTMLElement>} */ (stepper.querySelectorAll('.booking__step'))) {
+      step.classList.toggle('is-current', step.dataset.at === to);
+      step.classList.toggle('is-done', to === 'done' || Number(step.dataset.at) < Number(to));
+    }
+    if (to === '2') {
+      const c = chosen();
+      const row = (label, value) => (value ? `<div class="booking__summary-row"><dt>${label}</dt><dd>${value}</dd></div>` : '');
+      summary.innerHTML = `
+        <p class="booking__summary-label">${words.summary ?? 'Your booking'}</p>
+        <dl class="booking__summary-list">
+          ${row(words.what ?? 'What', c.services.join(', '))}
+          ${row(words.resource ?? 'With', c.who)}
+          ${row(words.when ?? 'When', `${c.day}${c.time ? `, ${c.time}${c.until ? `–${c.until}` : ''}` : ''}`)}
+          ${row(words.takes ?? 'Takes', c.takes)}
+        </dl>
+        <button type="button" class="booking__back">${words.change ?? 'Change'}</button>`;
+      summary.querySelector('.booking__back')?.addEventListener('click', () => stage('1'));
+      /** @type {HTMLInputElement | null} */ (form.querySelector('input[name=name]'))?.focus({ preventScroll: true });
+    }
+    if (moved && to !== 'done') form.scrollIntoView({ block: 'start', behavior: 'smooth' });
+  };
+
+  next.addEventListener('click', () => {
+    const c = chosen();
+    const ready = c.services.length > 0 && /** @type {HTMLInputElement | null} */ (form.querySelector('input[name=day]'))?.value && c.time;
+    need.hidden = Boolean(ready);
+    if (ready) stage('2');
+  });
+  form.addEventListener('change', () => {
+    if (form.dataset.stage === '2') stage('2');
+  });
+  const done = /** @type {HTMLElement | null} */ (form.querySelector('[data-done]'));
+  if (done) {
+    const settle = () => {
+      if (done.hidden || form.dataset.stage === 'done') return;
+      stage('done');
+      form.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    };
+    new MutationObserver(settle).observe(done, { attributes: true, attributeFilter: ['hidden'] });
+    settle();
+  }
+  stage('1');
+}
+
+/**
+ * A `<select>` as a drawn list: the native one stays, hidden, and is what
+ * the form reads; its options are mirrored as they change (the element
+ * rewrites whom from every availability answer), and a pick sets the native
+ * value and fires `change`.
+ *
+ * @param {HTMLSelectElement} select
+ */
+export function drawnSelect(select) {
+  if (select.dataset.drawn === '1') return;
+  select.dataset.drawn = '1';
+  const root = document.createElement('div');
+  root.className = 'booking__dd';
+  const trigger = document.createElement('button');
+  trigger.type = 'button';
+  trigger.className = 'booking__dd-trigger';
+  trigger.setAttribute('aria-haspopup', 'listbox');
+  trigger.setAttribute('aria-expanded', 'false');
+  const list = document.createElement('div');
+  list.className = 'booking__dd-list';
+  list.setAttribute('role', 'listbox');
+  list.hidden = true;
+  root.append(trigger, list);
+  select.classList.add('is-replaced');
+  select.setAttribute('aria-hidden', 'true');
+  select.tabIndex = -1;
+  select.insertAdjacentElement('afterend', root);
+  const label = select.labels?.[0];
+  if (label) trigger.setAttribute('aria-label', label.textContent?.trim() ?? '');
+
+  const draw = () => {
+    const current = select.options[select.selectedIndex];
+    trigger.innerHTML = `<span class="booking__dd-value">${current?.textContent ?? ''}</span><span class="booking__dd-mark" aria-hidden="true">▾</span>`;
+    list.innerHTML = [...select.options]
+      .map((o) => `<button type="button" class="booking__dd-option${o.selected ? ' is-chosen' : ''}" role="option" aria-selected="${o.selected}" data-value="${o.value.replace(/"/g, '&quot;')}"${o.disabled ? ' disabled' : ''}>${o.textContent}</button>`)
+      .join('');
+  };
+  const open = (yes) => {
+    list.hidden = !yes;
+    trigger.setAttribute('aria-expanded', String(yes));
+    if (yes) /** @type {HTMLElement | null} */ (list.querySelector('.is-chosen:not(:disabled), .booking__dd-option:not(:disabled)'))?.focus();
+  };
+  trigger.addEventListener('click', () => open(list.hidden));
+  list.addEventListener('click', (event) => {
+    const option = event.target instanceof Element ? event.target.closest('[data-value]') : null;
+    if (!(option instanceof HTMLButtonElement) || option.disabled) return;
+    select.value = option.dataset.value ?? '';
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    draw();
+    open(false);
+    trigger.focus();
+  });
+  root.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') { open(false); trigger.focus(); }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (list.hidden) { open(true); return; }
+      const options = /** @type {HTMLButtonElement[]} */ ([...list.querySelectorAll('.booking__dd-option:not(:disabled)')]);
+      const at = options.indexOf(/** @type {HTMLButtonElement} */ (document.activeElement));
+      options[(at + (event.key === 'ArrowDown' ? 1 : options.length - 1)) % options.length]?.focus();
+    }
+  });
+  document.addEventListener('click', (event) => {
+    if (!list.hidden && event.target instanceof Node && !root.contains(event.target)) open(false);
+  });
+  new MutationObserver(draw).observe(select, { childList: true, subtree: true, attributes: true });
+  select.addEventListener('change', draw);
+  draw();
+}