#12 - form live preview

FORMS.md

@@ -64,4 +64,4 @@ Last thing inspired by Problem Details RFC are extensions. The response can cont
 
 ## Success handling
 
-Even success must be handled. The user must know that the submission is successfully finished. The form definition can contain a success message as HTML.
+Even success must be handled. The user must know that the submission is successfully finished. What is shown is a templated HTML code that is defined by user. It can contain custom elements, like `<reservation-summary>`.

PLAN.md

@@ -0,0 +1,181 @@
+# Implementation Brief: Live form preview in the form editor
+
+## Goal
+Add a real-time form preview pane beside the elements editor on the form **edit** page. Reuse the existing PHP renderer (`RsvFormHtmlRenderer`) via a new admin REST endpoint — do **not** build a JS renderer.
+
+## Context you need (don't re-derive)
+- **Editor**: `includes/Views/RsvFormsPage.php`. `show_edit()` renders the edit page; `elements_table_script()` emits the inline `<script>` that drives the elements table. Elements live in an in-memory JS object `rsv_elements_source`; `rsv_elements_source.get_all()` returns the elements array (without internal `id`). Nothing is persisted until the form is saved (PUT).
+- **Renderer**: `includes/Services/Forms/RsvFormHtmlRenderer.php`. `draw(RsvFormDefinition $form): bool` **echoes** the real `<form>` HTML; returns `false` and echoes nothing when the form has no elements. This is the same renderer the frontend uses (`src/render.php`).
+- **Definition object**: `new RsvFormDefinition(string $id, array $definition)` where `$definition` has keys `elements` (array), `email_key`, `success_message`.
+- **Assets**: admin already enqueues the `rsv-client` bundle (`rsv_enqueue_admin_assets` in `includes/RsvAssetsDefinition.php`). It defines the custom elements (`<rsv-reservation-selector>`, `<rsv-reservation-summary>`) and bundles the form CSS (`RsvFormStyles.css` -> confirmed in `build/client.css`). **So form HTML injected via `innerHTML` into the admin page is styled and auto-upgrades its custom elements — no extra assets needed.**
+- `ReservairServiceAPI.nonce` and `ReservairServiceAPI.restUrl` are available globally in admin (localized onto `rsv-client`).
+- The registries `$rsv_form_registry` / `$rsv_template_registry` are populated on `plugins_loaded` (`rsv_bootstrap`), which runs for REST requests too.
+- REST errors are handled globally by the `rest_dispatch_request` filter in `includes/RsvRestApiDefinition.php` (any `Throwable` -> 500 JSON `{error}`), so the endpoint needs no try/catch.
+- `RsvColumnLayout::split('3:2')->column(fn)->column(fn)->output()` (`modules/Layout/RsvColumnLayout.php`) renders side-by-side columns; each callable just echoes. CSS for `.rsv-cols`/`.rsv-col` already exists (used on the list page).
+
+## The plan is JS-inline only — no webpack rebuild
+All new editor JS goes inside the existing inline `<script>` in `elements_table_script()`. Do **not** add CSS to `assets/css/*` (that would require a webpack rebuild); use inline `style=""`/a `<style>` block in the PHP if you want the sticky preview.
+
+---
+
+## Task 1 — Preview endpoint
+**File:** `includes/Controllers/RsvFormDefinitionController.php`
+
+In `register_routes()`, add a standalone route (the `\d+` id route won't match the non-numeric `preview`, so order is safe):
+
+```php
+register_rest_route($this->namespace, '/' . $this->resource_name . '/preview', [
+    'methods'             => 'POST',
+    'callback'            => [$this, 'preview'],
+    'permission_callback' => [RsvRestPolicy::class, 'admin'],
+]);
+```
+
+Add the method:
+
+```php
+/** Renders an unsaved definition to HTML for the editor's live preview. */
+function preview(WP_REST_Request $request): WP_REST_Response {
+    $definition = $request->get_json_params()['definition'] ?? [];
+    if (!is_array($definition)) {
+        $definition = [];
+    }
+
+    ob_start();
+    (new RsvFormHtmlRenderer())->draw(new RsvFormDefinition('preview', $definition));
+    $html = ob_get_clean();
+
+    return new WP_REST_Response(['html' => $html], 200);
+}
+```
+
+Notes: no-elements case -> `$html` is `''` (handled client-side). A malformed element payload would throw, but the global filter turns it into a 500 the client catch handles gracefully.
+
+---
+
+## Task 2 — Editor layout (two columns + preview pane)
+**File:** `includes/Views/RsvFormsPage.php`, `show_edit()`.
+
+Replace the current Form Elements block (the `<h2>Form Elements</h2>` heading, `#form_elements_table`, the add button, and the submit button — currently around lines 133–142) with a split layout. **Keep the existing IDs `form_elements_table` and `rsv_add_element_btn`.** `RsvColumnLayout` is already imported at the top of the file.
+
+```php
+        <hr>
+        <h2>Form Elements</h2>
+        <p>Define the fields that will appear in this form.</p>
+        <?php
+        RsvColumnLayout::split('3:2')
+            ->column(function (): void { ?>
+                <div id="form_elements_table"></div>
+                <p>
+                    <button type="button" class="button" id="rsv_add_element_btn">+ Add Element</button>
+                </p>
+                <p class="submit">
+                    <button type="submit" form="edit_form_definition" class="button button-primary">Update Form Definition</button>
+                </p>
+            <?php })
+            ->column(function (): void { ?>
+                <h3>Live preview</h3>
+                <div id="rsv_form_preview" class="rsv-form-preview" style="position: sticky; top: 40px;"></div>
+            <?php })
+            ->output();
+        ?>
+```
+
+The container is `rsv-form-preview` (a plain wrapper) — **not** `reservair-form`; the injected HTML brings its own `<form class="reservair-form ...">`.
+
+---
+
+## Task 3 — Editor wiring (inline JS in `elements_table_script()`)
+
+### 3a. Shared definition collector + preview functions
+Add at the top level of the script (right after the `rsv_elements_source` IIFE). `<?= $form_id ?>` is the meta form's id (`edit_form_definition` on the edit page):
+
+```js
+function rsv_collect_definition() {
+    const form = document.getElementById('<?= $form_id ?>');
+    const get  = (n) => form?.querySelector(`[name="${n}"]`)?.value ?? '';
+    return {
+        name: get('name'),
+        definition: {
+            email_key:       get('definition.email_key'),
+            success_message: get('definition.success_message'),
+            elements:        rsv_elements_source.get_all(),
+        },
+    };
+}
+
+const rsv_preview_el = document.getElementById('rsv_form_preview');
+let rsv_preview_timer = null;
+
+function rsv_schedule_preview() {
+    if (!rsv_preview_el) return;
+    clearTimeout(rsv_preview_timer);
+    rsv_preview_timer = setTimeout(rsv_render_preview, 300);
+}
+
+function rsv_render_preview() {
+    if (!rsv_preview_el) return;
+    fetch('<?= get_rest_url(null, 'reservations/v1/form-definition/preview') ?>', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+            'X-WP-Nonce': ReservairServiceAPI.nonce,
+        },
+        body: JSON.stringify(rsv_collect_definition()),
+    })
+    .then(r => r.ok ? r.json() : r.json().then(e => { throw new Error(e.error || 'Preview failed'); }))
+    .then(data => {
+        rsv_preview_el.innerHTML = data.html || '<p class="rsv-preview-empty">No fields to preview yet.</p>';
+    })
+    .catch(() => { rsv_preview_el.innerHTML = '<p class="rsv-preview-empty">Preview unavailable.</p>'; });
+}
+
+// The preview form is inert: block submission (capture so it works after re-render).
+rsv_preview_el?.addEventListener('submit', (e) => e.preventDefault(), true);
+```
+
+### 3b. Trigger preview on every mutation
+- **Inline edit** (`rsv_render_element_inline_form`, the `builder.build({...})` options): change the two callbacks to also schedule a preview:
+  ```js
+  on_success: () => { elements_dt.refresh(); rsv_schedule_preview(); },
+  on_cancel:  () => { elements_dt.refresh(); rsv_schedule_preview(); },
+  ```
+- **Move Up / Move Down / Remove** `func_action`s and the **`rsv_add_element_btn` onclick**: add `rsv_schedule_preview();` right after each `dt.refresh()` / `elements_dt.refresh()`.
+- **Meta fields**: after the existing `rsv_email_key_select` block, add:
+  ```js
+  const rsv_meta_form = document.getElementById('<?= $form_id ?>');
+  ['name', 'definition.email_key', 'definition.success_message'].forEach((n) => {
+      const el = rsv_meta_form?.querySelector(`[name="${n}"]`);
+      el?.addEventListener('input', rsv_schedule_preview);
+      el?.addEventListener('change', rsv_schedule_preview);
+  });
+  ```
+
+### 3c. Reuse the collector for saving
+Simplify the existing `RsvAdminForm.bind(...)` `transform` to reuse the collector (keeps preview == saved shape):
+```js
+transform: () => rsv_collect_definition(),
+```
+
+### 3d. Initial render
+At the end of the script add:
+```js
+rsv_render_preview();
+```
+(`rsv_render_preview` no-ops when `#rsv_form_preview` is absent, e.g. the create page, so the shared script stays safe there.)
+
+---
+
+## Edge cases / constraints
+- A freshly-added element defaults to `type: 'text'`, which has no registered handler -> silently skipped in the preview until a real type is chosen. Expected.
+- The `<rsv-reservation-selector>` in the preview will fetch availability read-only by `timetable-id` — fine, makes the preview realistic.
+- Use form id `'preview'` (already in the endpoint) so it never collides with a real numeric form id.
+- Don't touch `RsvFormHtmlRenderer` — submission is neutralized client-side.
+
+## Verification
+- `php -l includes/Controllers/RsvFormDefinitionController.php includes/Views/RsvFormsPage.php`
+- `composer lint` (runs phpcs, phpstan, psalm) — must pass.
+- No JS build needed (all editor JS is inline).
+- Manual: open a form's edit page -> edit/add/reorder elements and change the meta fields -> preview updates within ~300 ms and matches the frontend form.

assets/css/components/RsvCalendarStyles.css

@@ -74,6 +74,21 @@
     overflow: hidden;
 }
 
+/* The component renders inside the host page (e.g. wp-admin in the form editor
+   preview), whose form/table stylesheets restyle bare table cells and reveal
+   the day radios that only carry the [hidden] attribute. Assert the calendar's
+   own appearance here, scoped tightly enough to win that cascade. */
+.rsv-calendar input[type="radio"] {
+    display: none;
+}
+
+.rsv-calendar table,
+.rsv-calendar th,
+.rsv-calendar td {
+    border: 0;
+    background: none;
+}
+
 /*.calendar button {
     border: none;
     background-color: transparent;
@@ -115,6 +130,7 @@
 
 .rsv-calendar td {
     -webkit-user-select:none;user-select:none;
+    padding: 0;
     z-index: -1;
 }
 

assets/css/components/RsvFormStyles.css

@@ -1,19 +1,30 @@
+.rsv-form-btn {
+    border-radius: 1.375rem;
+    border: 1.5px solid #e0e0e0;
+    color: #555;
+    padding: 0 calc(1.25rem + 4px);
+    height: 3.5rem;
+    background-color: white;
+
+    line-height: 140%;
+    font-size: 1rem;
+    font-size: 15px;
+    font-weight: 600;
+    font-family: inherit;
+
+    outline: none;
+}
+
+.rsv-form-btn:hover {
+    background-color: #f5f5f5;
+}
+
 /* Primary CTA (submit / confirm) */
 .rsv-form-btn-primary {
   background: #2563eb;
   color: #fff;
 
-  border-radius: 1.375rem;
-  font-size: 1rem;
-  padding: 0 calc(1.25rem + 4px);
-  line-height: 140%;
-  height: 3.5rem;
-
-
   border: none;
-  font-size: 15px;
-  font-weight: 600;
-  font-family: inherit;
   cursor: pointer;
   width: 100%;
   transition: background .12s;
@@ -43,12 +54,6 @@
     margin-right: auto;
 }
 
-/*.reservair-form button {
-    padding: var(--s-3) !important;
-    font-weight: 400 !important;
-}*/
-
-/*.reservair-form button,*/
 .rsv-form-input {
     border: 1px solid var(--color-gray-300);
     outline: none;
@@ -165,50 +170,48 @@
     box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-red-500) 25%, transparent) !important;
 }
 
-.rsv-success-message {
+.rsv-success-msg {
     text-align: center;
-    padding: var(--s-5);
     color: var(--color-green-700);
+    width: 320px;
 }
 
-.rsv-success-message p {
+.rsv-success-msg p {
+    margin-top: 0;
     font-size: 1.125rem;
     font-weight: 500;
 }
 
-
+.rsv-success-msg h1,
-.mesg {
+.rsv-success-msg h2,
-    width: 100%;
+.rsv-success-msg h3,
-    text-align: center;
+.rsv-success-msg h4,
-    line-height: 1rem;
+.rsv-success-msg h5,
-    margin-top: var(--s-5);
+.rsv-success-msg h6
-    margin-bottom: var(--s-5);
+{
-    padding: var(--s-4) 0;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
 }
 
-.success-mesg-icon {
+.rsv-summary {
+    margin-bottom: 2rem;
 }
 
-.mesg-icon svg {
+.rsv-success-icon {
-    width: 32px;
+    width: 64px;
-    height: 32px;
+    height: 64px;
-    padding: var(--s-2);
     border-radius: 50%;
-    color: #00000094;
+    background: #dcfce7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
 }
 
-.error-mesg svg {
-    background-color: var(--color-red-200);
-}
-
-.success-mesg svg {
-    background-color: rgba(0, 201, 80, 0.36);
-}
-/* FORM END */
-
 .rsv-timetable-selector {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    background-color: white;
 }
 
 @media (max-width: 768px) {

assets/css/components/RsvTimeSlotsStyles.css

@@ -87,7 +87,7 @@ label.rsv-slots-slot-time>input:checked + .content>.capacity {
   font-weight: 600;
 }
 
-.rsv-slots-slot:hover:not(.rsv-slots-slot-full):not(.rsv-slots-slot-selected) {
+.rsv-slots-slot:hover:not(.rsv-slots-slot-full):not(.rsv-slots-slot-too-soon):not(.rsv-slots-slot-selected) {
   border-color: #2563eb;
   background: #f5f8ff;
 }
@@ -115,6 +115,12 @@ label.rsv-slots-slot-time>input:checked + .content>.capacity {
   cursor: not-allowed;
 }
 
+/* Within minimum lead time — available but not yet bookable */
+.rsv-slots-slot-too-soon {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 /* Selected */
 .rsv-slots-slot-selected {
   background: #2563eb;

assets/js/elements/RsvCalendar.js

@@ -179,6 +179,14 @@ export const RsvCalendarPicker = (() => {
             new InputEvent('change', { bubbles: true, cancelable: true, composed: true })
           );
         },
+
+        // Re-check the radio for the current date. The date lives in JS state, so
+        // this restores the visual selection after a native form.reset() clears it.
+        reselect() {
+          if (this.date === null) return;
+          const radio = this.body.querySelector(`input[id="${this.date.toISOString()}"]`);
+          if (radio) radio.checked = true;
+        },
       };
 
       container.classList.add('rsv-calendar');

assets/js/elements/RsvReservationSelector.js

@@ -37,6 +37,16 @@ class RsvReservationSelector extends HTMLElement {
     this.querySelectorAll('.rsv-slots-slot-selected').forEach(s => s.classList.remove('rsv-slots-slot-selected'));
     this._slots = [];
     this._commit();
+    // _commit clears only the slots; keep the picked date selected, re-asserting
+    // it in case a surrounding form.reset() just unchecked the calendar radio.
+    this._calendar?.reselect();
+  }
+
+  // Reset for a new reservation: drop the local selection (keeping the date) and
+  // reload availability so slots booked by the previous submission show as full.
+  reset() {
+    this.clear();
+    this.querySelector('rsv-timeline')?.refresh();
   }
 
   // ---- Private ------------------------------------------------------------

assets/js/elements/RsvReservationSummary.js

@@ -25,6 +25,31 @@ class RsvReservationSummary extends HTMLElement {
     }
   }
 
+  // ---- Public API ---------------------------------------------------------
+
+  // Detached, static copy of the current selection for the success message.
+  // Mirrors the live layout minus the interactive "clear all" control.
+  snapshot() {
+    const s     = ReservairStrings.summary;
+    const list  = this.querySelector('.rsv-summary-list');
+    const count = this.querySelector('.rsv-summary-count');
+    const price = this.querySelector('.rsv-summary-price');
+
+    const node = document.createElement('div');
+    node.className = 'rsv-summary rsv-summary-snapshot';
+    node.innerHTML = `
+      <div class="rsv-summary-header">
+        <span class="rsv-summary-title">${s.title}</span>
+      </div>
+      <ul class="rsv-summary-list">${list ? list.innerHTML : ''}</ul>
+      <div class="rsv-summary-footer">
+        <span class="rsv-summary-count">${count ? count.textContent : ''}</span>
+        <div class="rsv-summary-price">${price ? price.textContent : ''}</div>
+      </div>
+    `;
+    return node;
+  }
+
   // ---- Private ------------------------------------------------------------
 
   _build() {
@@ -51,7 +76,6 @@ class RsvReservationSummary extends HTMLElement {
     const all_slots = [...this._all_slots.values()].flatMap(({ slots, price_per_block }) =>
       slots.map(s => ({ ...s, price_per_block }))
     );
-    console.log(all_slots);
 
     const n        = all_slots.length;
     const list     = this.querySelector('.rsv-summary-list');

assets/js/elements/RsvTimeline.js

@@ -35,11 +35,19 @@ class RsvTimeline extends HTMLElement {
     this._render();
   }
 
+  // ---- Public API ---------------------------------------------------------
+
+  // Re-fetch availability for the current date, e.g. after a booking occupied
+  // some slots. The date is unchanged, so attributeChangedCallback won't fire.
+  refresh() {
+    this._render();
+  }
+
   // ---- Private ------------------------------------------------------------
 
   _on_click(event) {
     const slot = event.target.closest('.rsv-slots-slot');
-    if (slot && !slot.classList.contains('rsv-slots-slot-full')) {
+    if (slot && !slot.classList.contains('rsv-slots-slot-full') && !slot.classList.contains('rsv-slots-slot-too-soon')) {
       slot.classList.toggle('rsv-slots-slot-selected');
       slot.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -59,10 +67,6 @@ class RsvTimeline extends HTMLElement {
       const occupancy = await RsvTimetableService.get_availability_for_date(this.timetableId, this.date);
       if (v !== this._version) return;
 
-      if(occupancy.length === 0) {
-        this.replaceChildren(this._notice(s.no_blocks));
-        return;
-      }
 
       const header = document.createElement('div');
       header.classList.add('rsv-slots-label');
@@ -70,9 +74,14 @@ class RsvTimeline extends HTMLElement {
         weekday: 'long', day: 'numeric', month: 'long',
       }).replace(',', '');
 
+      if(occupancy.length === 0) {
+        this.replaceChildren(header, this._notice(s.no_blocks));
+        return;
+      }
+
       const blocks = [];
 
-      for (const { from_minutes, to_minutes, block_size_in_minutes, occupancy: block_occ } of occupancy) {
+      for (const { from_minutes, to_minutes, block_size_in_minutes, occupancy: block_occ, lead_time_minutes } of occupancy) {
         if (from_minutes === to_minutes || block_occ.length === 0) {
           continue;
         }
@@ -80,7 +89,7 @@ class RsvTimeline extends HTMLElement {
         const from_block = parseInt(from_minutes) / block_size_in_minutes;
 
         const time_slots = block_occ.map((occ, i) =>
-          this._block(this.date, occ, block_size_in_minutes, from_block + i)
+          this._block(this.date, occ, block_size_in_minutes, from_block + i, lead_time_minutes?.[i] ?? 0)
         );
 
         const time_slot_group = document.createElement('div');
@@ -96,7 +105,7 @@ class RsvTimeline extends HTMLElement {
     }
   }
 
-  _block(date, left, block_size, idx) {
+  _block(date, left, block_size, idx, min_lead_time_minutes = 0) {
     const from = new Date(date);
     from.setHours(0, idx * block_size, 0, 0);
 
@@ -107,7 +116,8 @@ class RsvTimeline extends HTMLElement {
     cell.classList.add('rsv-slots-slot', 'rsv-slots-slot-available');
     cell.dataset.start_utc = from.toISOString();
     cell.dataset.end_utc   = to.toISOString();
-    if (left === 0) cell.classList.add('rsv-slots-slot-full');
+    if (left <= 0) cell.classList.add('rsv-slots-slot-full');
+    else if (from < new Date(Date.now() + min_lead_time_minutes * 60_000)) cell.classList.add('rsv-slots-slot-too-soon');
 
     const time_el = document.createElement('span');
     time_el.classList.add('rsv-slots-slot-time');

assets/js/forms/RsvFormSender.js

@@ -56,24 +56,14 @@ export const RsvFormSender = {
     svg.appendChild(path);
 
     const icon = document.createElement('div');
-    icon.className = 'success-icon';
+    icon.className = 'rsv-success-icon';
     icon.appendChild(svg);
 
-    const title = document.createElement('div');
+    const body = this.build_success_body(form, s);
-    title.className   = 'success-title';
-    title.textContent = s.success_title;
-
-    const subtitle = document.createElement('p');
-    subtitle.className   = 'success-msg';
-    subtitle.textContent = s.success_subtitle;
-
-    const reset_btn = document.createElement('button');
-    reset_btn.className   = 'reset-btn';
-    reset_btn.textContent = s.new_reservation;
 
     const state = document.createElement('div');
-    state.className = 'success-state';
+    state.className = 'rsv-success-state';
-    state.append(icon, title, subtitle, reset_btn);
+    state.append(icon, body);
 
     const msg = document.createElement('div');
     msg.appendChild(state);
@@ -81,12 +71,50 @@ export const RsvFormSender = {
     existing.forEach(child => child.style.display = 'none');
     wrapper.appendChild(msg);
 
-    reset_btn.addEventListener('click', () => {
+    // The form catches every data-rsv-reset button in the card and links it to
+    // its cleanup — so new buttons just need the marker, no wiring here.
+    const reset = () => {
       msg.remove();
       form.reset();
+      // Native reset leaves custom controls untouched; reset the reservation
+      // selectors so their slots, hidden inputs and the summary clear, the date
+      // stays selected and availability reloads with the just-booked slots.
+      form.querySelectorAll('rsv-reservation-selector').forEach(sel => sel.reset());
       this.clear_feedback(form);
       existing.forEach(child => child.style.display = '');
-    });
+    };
+    state.querySelectorAll('[data-rsv-reset]').forEach(btn => btn.addEventListener('click', reset));
+  },
+
+  // Body of the success card. Uses the admin-configured template when the form
+  // ships one, filling the .rsv-success-summary placeholder (expanded server-side
+  // from <reservation-summary>) with a snapshot of the selected slots; otherwise
+  // falls back to the default text.
+  build_success_body(form, strings) {
+    const tpl = form.parentElement?.querySelector('template.rsv-form-success');
+
+    if (!tpl) {
+      const subtitle = document.createElement('p');
+      subtitle.className   = 'rsv-success-msg';
+      subtitle.textContent = strings.success_subtitle;
+      return subtitle;
+    }
+
+    const body = document.createElement('div');
+    body.className = 'rsv-success-msg';
+    body.appendChild(tpl.content.cloneNode(true));
+
+    const placeholder = body.querySelector('.rsv-success-summary');
+    if (placeholder) {
+      const summary = form.querySelector('rsv-reservation-summary');
+      if (summary && typeof summary.snapshot === 'function') {
+        placeholder.replaceWith(summary.snapshot());
+      } else {
+        placeholder.remove();
+      }
+    }
+
+    return body;
   },
 
   set_loading(form, is_loading) {

includes/Controllers/RsvFormDefinitionController.php

@@ -19,6 +19,7 @@ class RsvFormDefinitionController {
                     'required'   => false,
                     'properties' => [
                         'email_key'       => ['type' => 'string', 'required' => false],
+                        'success_message' => ['type' => 'string', 'required' => false],
                         'elements'        => ['type' => 'array',  'default'  => []],
                     ],
                 ],
@@ -41,6 +42,12 @@ class RsvFormDefinitionController {
             ],
         ]);
 
+        register_rest_route($this->namespace, '/' . $this->resource_name . '/preview', [
+            'methods'             => 'POST',
+            'callback'            => [$this, 'preview'],
+            'permission_callback' => [RsvRestPolicy::class, 'admin'],
+        ]);
+
         register_rest_route($this->namespace, '/' . $this->resource_name . '/(?P<id>\d+)', [
             [
                 'methods'             => 'GET',
@@ -78,10 +85,17 @@ class RsvFormDefinitionController {
     }
 
     function create(WP_REST_Request $request): WP_REST_Response {
+        $definition = $request->get_param('definition') ?? [];
+
+        $errors = (new RsvFormDefinitionValidator())->validate($definition);
+        if ($errors !== []) {
+            return new WP_REST_Response(['error' => implode(' ', $errors)], 422);
+        }
+
         try {
             $id = (new RsvFormDefinitionRepository())->add(
                 $request->get_param('name'),
-                $request->get_param('definition') ?? []
+                $definition
             );
         } catch(Throwable $e) {
             Logger::error($e);
@@ -104,6 +118,20 @@ class RsvFormDefinitionController {
         return new WP_REST_Response(null, 204);
     }
 
+    /** Renders an unsaved definition to HTML for the editor's live preview. */
+    function preview(WP_REST_Request $request): WP_REST_Response {
+        $definition = $request->get_json_params()['definition'] ?? [];
+        if (!is_array($definition)) {
+            $definition = [];
+        }
+
+        ob_start();
+        (new RsvFormHtmlRenderer())->draw(new RsvFormDefinition('preview', $definition));
+        $html = ob_get_clean();
+
+        return new WP_REST_Response(['html' => $html], 200);
+    }
+
     function update(WP_REST_Request $request): WP_REST_Response {
         $id   = (int) $request->get_param('id');
         $repo = new RsvFormDefinitionRepository();
@@ -112,7 +140,14 @@ class RsvFormDefinitionController {
             return new WP_REST_Response(['error' => 'Not found'], 404);
         }
 
-        $repo->update($id, $request->get_param('name'), $request->get_param('definition'));
+        $definition = $request->get_param('definition') ?? [];
+
+        $errors = (new RsvFormDefinitionValidator())->validate($definition);
+        if ($errors !== []) {
+            return new WP_REST_Response(['error' => implode(' ', $errors)], 422);
+        }
+
+        $repo->update($id, $request->get_param('name'), $definition);
 
         return new WP_REST_Response(null, 204);
     }

includes/Listeners/RsvEmailListener.php

@@ -1,6 +1,7 @@
 <?php
 
 use Reservair\Logger\Logger;
+use Reservair\Templating\RsvTemplateEngine;
 
 /**
  * Handles all outgoing email for the reservation module.
@@ -22,11 +23,7 @@ class RsvEmailListener {
         <p>Rezervace č. {{reservation_id}} čeká na vaše schválení.</p>
         <p><strong>Datum:</strong> {{date}}</p>
         <p><strong>Čas:</strong> {{start}} – {{end}}</p>
-        <p>
+        <p><reservation-actions></reservation-actions></p>
-            <a href='{{accept_url}}'>Přijmout</a>
-            &nbsp;|&nbsp;
-            <a href='{{refuse_url}}'>Odmítnout</a>
-        </p>
     ";
 
     private const string DEFAULT_ACCEPTED_SUBJECT = 'Rezervace přijata';
@@ -48,17 +45,20 @@ class RsvEmailListener {
 
     public static function on_pending(RsvTimetableReservationPendingEvent $event): void {
         try {
+            global $rsv_template_registry;
+            $engine = new RsvTemplateEngine(registry: $rsv_template_registry);
+
             $tz       = wp_timezone();
             $start_dt = (clone $event->reservation->start_utc)->setTimezone($tz);
             $end_dt   = (clone $event->reservation->end_utc)->setTimezone($tz);
 
-            $body = (new RsvEmailTemplater())->render(self::DEFAULT_PENDING_BODY, [
+            $body = $engine->render(self::DEFAULT_PENDING_BODY, [
                 'reservation_id' => (string) $event->reservation_id,
-                'date'           => esc_html($start_dt->format('Y-m-d')),
+                'date'           => $start_dt->format('Y-m-d'),
-                'start'          => esc_html($start_dt->format('H:i')),
+                'start'          => $start_dt->format('H:i'),
-                'end'            => esc_html($end_dt->format('H:i')),
+                'end'            => $end_dt->format('H:i'),
-                'accept_url'     => esc_url(get_rest_url(null, 'reservations/v1/timetable-reservation/accept/' . $event->code)),
+                'accept_url'     => get_rest_url(null, 'reservations/v1/timetable-reservation/accept/' . $event->code),
-                'refuse_url'     => esc_url(get_rest_url(null, 'reservations/v1/timetable-reservation/refuse/' . $event->code)),
+                'refuse_url'     => get_rest_url(null, 'reservations/v1/timetable-reservation/refuse/' . $event->code),
             ]);
 
             (new RsvEmailSender())->send($event->maintainer_email, self::DEFAULT_PENDING_SUBJECT, $body);
@@ -67,22 +67,6 @@ class RsvEmailListener {
         }
     }
 
-    /**
-     * HTML-escape scalar form values for safe interpolation into an HTML email
-     * body. Non-scalar values (e.g. nested arrays) are dropped to an empty
-     * string since the templater only substitutes plain placeholders.
-     *
-     * @param array<string,mixed> $values
-     * @return array<string,string>
-     */
-    private static function escape_values(array $values): array {
-        $escaped = [];
-        foreach ($values as $key => $value) {
-            $escaped[$key] = is_scalar($value) ? esc_html((string) $value) : '';
-        }
-        return $escaped;
-    }
-
     public static function on_form_submit_closed(RsvFormSubmitClosedEvent $event): void {
         try {
             $form_submit = (new RsvFormSubmitRepository())->get($event->form_submit_id);
@@ -136,15 +120,14 @@ class RsvEmailListener {
             $subject_tpl = trim((string) ($tpl['subject'] ?? '')) !== '' ? $tpl['subject'] : $default_subject;
             $body_tpl    = trim((string) ($tpl['body']    ?? '')) !== '' ? $tpl['body']    : $default_body;
 
-            $templater = new RsvEmailTemplater();
+            global $rsv_template_registry;
+            $engine = new RsvTemplateEngine(registry: $rsv_template_registry);
 
-            // Subject is plain text: render with raw values, then strip any tags
+            // Subject is plain text: render without HTML-escaping, then strip tags/newlines.
-            // or newlines to avoid header issues.
+            $subject = sanitize_text_field($engine->render_plain($subject_tpl, $form_values));
-            $subject = sanitize_text_field($templater->render($subject_tpl, $form_values));
 
-            // Body is HTML: escape the user-submitted values before interpolation
+            // Body is HTML: the engine HTML-escapes all interpolated values.
-            // so they can't inject markup into the message.
+            $body = $engine->render($body_tpl, $form_values);
-            $body = $templater->render($body_tpl, self::escape_values($form_values));
 
             (new RsvEmailSender())->send($user_email, $subject, $body);
         } catch (\Throwable $e) {

includes/Models/RsvTimetableAvailability.php

@@ -6,16 +6,19 @@
 class RsvTimetableAvailability {
     /**
      * @param array<int,int> $occupancy          Number of available seats for each time block
+     * @param array<int,int> $lead_time_minutes   Minimum lead time in minutes required for each block
      */
     public function __construct(
         public int $from_minutes,
         public int $to_minutes,
         public int $block_size_in_minutes,
-        public array $occupancy
+        public array $occupancy,
+        public array $lead_time_minutes = []
     ) { }
 
-    public function push_block(int $capacity) {
+    public function push_block(int $capacity, int $min_lead_time_minutes = 0) {
         $this->occupancy[]         = $capacity;
+        $this->lead_time_minutes[] = $min_lead_time_minutes;
         $this->to_minutes         += $this->block_size_in_minutes;
     }
 }

includes/Repository/RsvTimetableReservationRepository.php

@@ -34,7 +34,8 @@ class RsvTimetableReservationRepository {
                  WHERE timetable_id = %d
                    AND `start_utc` < %s
                    AND `end_utc`   > %s",
-                [$timetable_id, $end_utc, $start_utc]
+                [$timetable_id, $end_utc->format('Y-m-d H:i:s'), $start_utc->format('Y-m-d H:i:s')],
+                ARRAY_A
             )
         );
     }

includes/RsvAssetsDefinition.php

@@ -52,8 +52,15 @@ function rsv_enqueue_assets(): void {
 }
 
 function rsv_enqueue_admin_assets(): void {
-    wp_enqueue_script('rsv-admin', rsv_build_url('admin.js'), [], filemtime(rsv_build_file('admin.js')));
+    // The client bundle defines the custom elements shared by both front-end and
-    wp_enqueue_style('rsv-admin',  rsv_build_url('admin.css'), [], filemtime(rsv_build_file('admin.css')));
+    // admin. enqueue_block_assets already enqueues `rsv-client` in the editor, so
+    // re-using the same handle here keeps it loaded exactly once (WP dedupes by
+    // handle) instead of bundling a second copy into admin.js.
+    wp_enqueue_script('rsv-client', rsv_build_url('client.js'), [], filemtime(rsv_build_file('client.js')));
+    wp_enqueue_style('rsv-client',  rsv_build_url('client.css'), [], filemtime(rsv_build_file('client.css')));
 
-    rsv_localize_api('rsv-admin');
+    wp_enqueue_script('rsv-admin', rsv_build_url('admin.js'), ['rsv-client'], filemtime(rsv_build_file('admin.js')));
+    wp_enqueue_style('rsv-admin',  rsv_build_url('admin.css'), ['rsv-client'], filemtime(rsv_build_file('admin.css')));
+
+    rsv_localize_api('rsv-client');
 }

includes/Services/Emails/RsvEmailTemplater.php

@@ -1,9 +0,0 @@
-<?php
-
-class RsvEmailTemplater {
-    public function render(string $template, array $data) : string {
-        return preg_replace_callback('/{{\s*(\w+)\s*}}/', function($matches) use ($data) {
-            return $data[$matches[1]] ?? '';
-        }, $template);
-    }
-}

includes/Services/Forms/Handlers/RsvButtonElementHandler.php

@@ -5,7 +5,7 @@ class RsvButtonElementHandler implements RsvFormElementHandler {
     public function draw(RsvFormElementDefinition $element): void {
         ?>
         <div class="rsv-form-input-group rsv-form-input-short">
-            <button class="rsv-form-btn-primary"><?= $element->getLabel() ?></button>
+            <button class="rsv-form-btn rsv-form-btn-primary"><?= $element->getLabel() ?></button>
         </div>
         <?php
     }

includes/Services/Forms/Handlers/RsvFormElementHandler.php

@@ -1,6 +1,5 @@
 <?php
 
-
 interface RsvFormElementHandler {
     function draw(RsvFormElementDefinition $def) : void;
 

includes/Services/Forms/Handlers/RsvFormReservationElementHandler.php

@@ -14,7 +14,7 @@ class RsvFormReservationElementHandler implements RsvFormElementHandler {
         $name            = $element->getName();
         ?>
         <div class="rsv-form-input-group">
-            <label><?= esc_html($element->getLabel()) ?></label>
+            <label class="rsv-form-label"><?= esc_html($element->getLabel()) ?></label>
             <rsv-reservation-selector
                 timetable-id="<?= $timetable_id ?>"
                 name="<?= esc_attr($name) ?>"

includes/Services/Forms/Handlers/RsvOutputTextElementHandler.php

@@ -0,0 +1,21 @@
+<?php
+
+
+class RsvOutputTextElementHandler implements RsvFormElementHandler {
+
+    private const ALLOWED_TAGS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+    public function draw(RsvFormElementDefinition $def): void {
+        $raw = $def->getAttr('tag', 'p');
+        $tag = in_array($raw, self::ALLOWED_TAGS, true) ? $raw : 'p';
+        echo '<' . $tag . ' class="rsv-form-output-text">' . esc_html($def->getLabel()) . '</' . $tag . '>';
+    }
+
+    public function submit(RsvFormElementDefinition $def, int $submit_id, array $data, RsvFormSubmitResult $result): bool {
+        return true;
+    }
+
+    public function rollback(RsvFormElementDefinition $def, int $submit_id, array $data, RsvFormSubmitResult $result): void {
+        // No side effects to undo.
+    }
+}

includes/Services/Forms/RsvFormDefinition.php

@@ -7,8 +7,10 @@ class RsvFormDefinition {
 
     public string $email_key = "";
 
+    public string $success_message = "";
+
     /**
-     * @param array<int,mixed> $definition Full definition array including 'elements' and 'email_key'.
+     * @param array<int,mixed> $definition Full definition array including 'elements', 'email_key' and 'success_message'.
      */
     public function __construct(string $id, array $definition) {
         $this->_elements = [];
@@ -21,6 +23,7 @@ class RsvFormDefinition {
 
         $this->_id             = $id;
         $this->email_key       = $definition['email_key'] ?? '';
+        $this->success_message = $definition['success_message'] ?? '';
     }
 
     public function getId(): string {
@@ -31,6 +34,11 @@ class RsvFormDefinition {
         return $this->email_key;
     }
 
+    /** Template shown to the visitor after a successful submission. */
+    public function getSuccessMessage(): string {
+        return $this->success_message;
+    }
+
 
     public function hasElements() : bool {
         return count($this->_elements) > 0;

includes/Services/Forms/RsvFormDefinitionValidator.php

@@ -0,0 +1,112 @@
+<?php
+
+use Reservair\Templating\RsvTemplateEngine;
+
+/**
+ * Validates a form definition before it is persisted.
+ *
+ * Template checks (symbols, syntax, custom elements) are delegated to the
+ * common template validator; on top of that this enforces form-level rules,
+ * such as requiring a submit button once the form defines any fields.
+ */
+final class RsvFormDefinitionValidator {
+
+    /**
+     * @param array<string,mixed> $definition The inner definition (elements, email_key, success_message).
+     * @return list<string> Human-readable problems; empty when the definition is valid.
+     */
+    public function validate(array $definition): array {
+        $elements = is_array($definition['elements'] ?? null) ? $definition['elements'] : [];
+        $symbols  = $this->symbols($elements);
+        $engine   = $this->engine();
+
+        $errors = [];
+
+        // Templates reference submitted values by form-element name.
+        foreach ($this->templates($definition, $elements) as $label => $template) {
+            foreach ($engine->validate($template, $symbols) as $problem) {
+                $errors[] = "{$label}: {$problem}";
+            }
+        }
+
+        // A form that collects fields must give the visitor a way to send them.
+        if ($elements !== [] && !$this->has_submit($elements)) {
+            $errors[] = 'Form must contain a submit button.';
+        }
+
+        return $errors;
+    }
+
+    /**
+     * Names that templates may reference — the form's symbol table.
+     *
+     * @param array<int,mixed> $elements
+     * @return list<string>
+     */
+    private function symbols(array $elements): array {
+        $names = [];
+        foreach ($elements as $el) {
+            $name = is_array($el) ? ($el['name'] ?? '') : '';
+            if (is_string($name) && $name !== '') {
+                $names[] = $name;
+            }
+        }
+        return $names;
+    }
+
+    /**
+     * The definition's admin-authored templates, keyed by a label used to
+     * prefix any problems found in them.
+     *
+     * @param array<string,mixed> $definition
+     * @param array<int,mixed>    $elements
+     * @return array<string,string>
+     */
+    private function templates(array $definition, array $elements): array {
+        $templates = [];
+
+        $success = $definition['success_message'] ?? '';
+        if (is_string($success) && trim($success) !== '') {
+            $templates['Success message'] = $success;
+        }
+
+        foreach ($elements as $el) {
+            if (!is_array($el) || ($el['type'] ?? '') !== 'reservation') {
+                continue;
+            }
+            $email_templates = $el['email_templates'] ?? [];
+            if (!is_array($email_templates)) {
+                continue;
+            }
+            foreach (['on_accepted' => 'accepted', 'on_refused' => 'refused'] as $key => $human) {
+                $tpl = $email_templates[$key] ?? [];
+                if (!is_array($tpl)) {
+                    continue;
+                }
+                foreach (['subject', 'body'] as $part) {
+                    $value = $tpl[$part] ?? '';
+                    if (is_string($value) && trim($value) !== '') {
+                        $templates["Email ({$human} {$part})"] = $value;
+                    }
+                }
+            }
+        }
+
+        return $templates;
+    }
+
+    /** @param array<int,mixed> $elements */
+    private function has_submit(array $elements): bool {
+        foreach ($elements as $el) {
+            if (is_array($el) && ($el['type'] ?? '') === 'button') {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private function engine(): RsvTemplateEngine {
+        global $rsv_template_registry;
+        return new RsvTemplateEngine(registry: $rsv_template_registry);
+    }
+}

includes/Services/Forms/RsvFormHtmlRenderer.php

@@ -1,5 +1,6 @@
 <?php
 
+use Reservair\Templating\RsvTemplateEngine;
 
 class RsvFormHtmlRenderer {
     public function draw(RsvFormDefinition $form): bool {
@@ -20,12 +21,37 @@ class RsvFormHtmlRenderer {
         <?php endforeach; ?>
 
         </form>
+        <?php $this->draw_success_template($form); ?>
         </div>
         <?php
 
         return true;
     }
 
+    /**
+     * Emits the admin-configured success message as an inert <template> that the
+     * client clones once the form is submitted. A <reservation-summary> element
+     * expands to a placeholder div that RsvFormSender fills with the visitor's
+     * selected slots.
+     */
+    private function draw_success_template(RsvFormDefinition $form): void {
+        $message = trim($form->getSuccessMessage());
+        if ($message === '') {
+            return;
+        }
+
+        global $rsv_template_registry;
+        $engine = new RsvTemplateEngine(registry: $rsv_template_registry);
+
+        // Sanitize admin HTML before rendering, allowing the registered template
+        // custom elements through so the engine can expand them.
+        $allowed = $rsv_template_registry->kses_allowed(wp_kses_allowed_html('post'));
+        $html    = $engine->render(wp_kses($message, $allowed));
+        ?>
+        <template class="rsv-form-success"><?= $html ?></template>
+        <?php
+    }
+
     public function draw_element(RsvFormElementDefinition $data): void {
         global $rsv_form_registry;
 

includes/Services/RsvTimetableReservationService.php

@@ -35,6 +35,15 @@ class RsvTimetableReservationService {
             ->get_overlapping_capacity($timetable_id, $start_utc, $end_utc);
 
         if (count($overlapping_capacity) === 0) {
+            Logger::error("No available capacity for timetable_id: $timetable_id, start_utc: " . $start_utc->format('Y-m-d H:i:s') . ", end_utc: " . $end_utc->format('Y-m-d H:i:s'));
+            return false;
+        }
+
+        $max_lead_time    = max(array_map(fn($c) => (int) $c->min_lead_time_minutes, $overlapping_capacity));
+        $earliest_allowed = new DateTime('now', new DateTimeZone('UTC'));
+        $earliest_allowed->modify("+{$max_lead_time} minutes");
+        if ($start_utc < $earliest_allowed) {
+            Logger::error("Reservation rejected: minimum lead time of {$max_lead_time} minutes not met for timetable_id: $timetable_id");
             return false;
         }
 
@@ -42,6 +51,7 @@ class RsvTimetableReservationService {
         $end_min   = $this->time_of_day_minutes($end_utc);
 
         if ((int) $overlapping_capacity[0]->start_time > $start_min) {
+            Logger::error("Overlapping capacity start_time: " . (int) $overlapping_capacity[0]->start_time . " is after the reservation start_time: $start_min");
             return false;
         }
 
@@ -59,6 +69,7 @@ class RsvTimetableReservationService {
 
         $capacity     = (int) $overlapping_capacity[0]->capacity;
         $reservations = $this->repo->get_overlapping($timetable_id, $start_utc, $end_utc);
+        error_log('reservations: ' . json_encode($reservations));
 
         return count($reservations) < $capacity;
     }

includes/Services/RsvTimetableService.php

@@ -98,7 +98,8 @@ class RsvTimetableService {
                     $availabilities[] = new RsvTimetableAvailability($i * $block_length, ($i + 1) * $block_length, $block_length, []);
                 }
 
-                $availabilities[$availability_idx]->push_block($total_capacity - count($reservation_stack));
+                $max_lead_time = empty($capacity_stack) ? 0 : max(array_map(fn($x) => $x->min_lead_time_minutes, $capacity_stack));
+                $availabilities[$availability_idx]->push_block($total_capacity - count($reservation_stack), $max_lead_time);
             } else if($total_capacity === 0 && count($availabilities) !== $availability_idx) {
                 $availability_idx++;
             }

includes/Views/RsvFormsPage.php

@@ -126,19 +126,28 @@ class RsvFormsPage extends RsvAdminPage {
         echo RsvFormBuilder::create('edit_form_definition', get_rest_url(null, 'reservations/v1/form-definition/' . $id), 'PUT', 'Form definition updated.')
             ->text('name', 'Name', '', true, $form_def['name'])
             ->select('definition.email_key', 'Email Key', $email_key_options, "Form field that holds the submitter's email address.", true, $definition['email_key'] ?? '')
+            ->code('definition.success_message', 'Success message', 'Shown to the visitor after a successful submission. HTML is allowed. Use <reservation-summary></reservation-summary> to display the selected reservations. Leave blank for the default message.', $definition['success_message'] ?? '')
             ->render();
         ?>
 
         <hr>
+        <?php
+        RsvColumnLayout::split('3:2')
+            ->column(function (): void { ?>
                 <h2>Form Elements</h2>
                 <p>Define the fields that will appear in this form.</p>
                 <div id="form_elements_table"></div>
                 <p>
                     <button type="button" class="button" id="rsv_add_element_btn">+ Add Element</button>
-        </p>
-        <p class="submit">
                     <button type="submit" form="edit_form_definition" class="button button-primary">Update Form Definition</button>
                 </p>
+            <?php })
+            ->column(function (): void { ?>
+                <h3>Live preview</h3>
+                <div id="rsv_form_preview" class="rsv-form-preview" style="position: sticky; top: 40px;"></div>
+            <?php })
+            ->output();
+        ?>
 
         <?php $this->elements_table_script($elements_with_ids, $next_id, 'edit_form_definition', $element_types, $timetables); ?>
         <?php
@@ -175,7 +184,7 @@ class RsvFormsPage extends RsvAdminPage {
                     if (idx === -1) return Promise.reject(new Error('Element not found'));
                     // Destructure reservation-specific fields so they don't bleed into extra_attrs.
                     const { id: _id, name: _n, label: _l, type: _t, desc: _d, required: _r,
-                            price_per_block: _p, email_templates: _et, timetable_id: _ti, ...extra_attrs } = items[idx];
+                            price_per_block: _p, email_templates: _et, timetable_id: _ti, tag: _tag, ...extra_attrs } = items[idx];
                     items[idx] = {
                         ...extra_attrs,
                         id,
@@ -189,6 +198,9 @@ class RsvFormsPage extends RsvAdminPage {
                             pattern:         data.pattern ?? '',
                             pattern_message: data.pattern_message ?? '',
                         } : {}),
+                        ...(data.type === 'output-text' ? {
+                            tag: data.tag ?? 'p',
+                        } : {}),
                         ...(data.type === 'reservation' ? {
                             timetable_id:    data.timetable_id ? parseInt(data.timetable_id) : null,
                             price_per_block: parseFloat(data.price_per_block ?? '0') || 0,
@@ -231,6 +243,50 @@ class RsvFormsPage extends RsvAdminPage {
             };
         })(<?= $elements_json ?>, <?= $next_id ?>);
 
+        function rsv_collect_definition() {
+            const form = document.getElementById('<?= $form_id ?>');
+            const get  = (n) => form?.querySelector(`[name="${n}"]`)?.value ?? '';
+            return {
+                name: get('name'),
+                definition: {
+                    email_key:       get('definition.email_key'),
+                    success_message: get('definition.success_message'),
+                    elements:        rsv_elements_source.get_all(),
+                },
+            };
+        }
+
+        const rsv_preview_el = document.getElementById('rsv_form_preview');
+        let rsv_preview_timer = null;
+
+        function rsv_schedule_preview() {
+            if (!rsv_preview_el) return;
+            clearTimeout(rsv_preview_timer);
+            rsv_preview_timer = setTimeout(rsv_render_preview, 300);
+        }
+
+        function rsv_render_preview() {
+            if (!rsv_preview_el) return;
+            fetch('<?= get_rest_url(null, 'reservations/v1/form-definition/preview') ?>', {
+                method: 'POST',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                    'X-WP-Nonce': ReservairServiceAPI.nonce,
+                },
+                body: JSON.stringify(rsv_collect_definition()),
+            })
+            .then(r => r.ok ? r.json() : r.json().then(e => { throw new Error(e.error || 'Preview failed'); }))
+            .then(data => {
+                rsv_preview_el.innerHTML = data.html || '<p class="rsv-preview-empty">No fields to preview yet.</p>';
+            })
+            .catch(() => { rsv_preview_el.innerHTML = '<p class="rsv-preview-empty">Preview unavailable.</p>'; });
+        }
+
+        // The preview form is inert: block submission (capture so it works after re-render).
+        rsv_preview_el?.addEventListener('submit', (e) => e.preventDefault(), true);
+
         function rsv_render_element_inline_form(dt, row, data) {
             const builder = RsvInlineFormBuilder.create(rsv_elements_source)
                 .fieldset('Element', '50%')
@@ -261,6 +317,19 @@ class RsvFormsPage extends RsvAdminPage {
                         .input_textarea('email_refused_body', 'Body', refused.body ?? RSV_EMAIL_DEFAULTS.refused_body);
             }
 
+            if ((data?.type ?? rsv_element_types[0]) === 'output-text') {
+                builder
+                    .input_select('tag', 'Tag', [
+                        { value: 'p',  label: 'Paragraph (p)' },
+                        { value: 'h1', label: 'Heading 1 (h1)' },
+                        { value: 'h2', label: 'Heading 2 (h2)' },
+                        { value: 'h3', label: 'Heading 3 (h3)' },
+                        { value: 'h4', label: 'Heading 4 (h4)' },
+                        { value: 'h5', label: 'Heading 5 (h5)' },
+                        { value: 'h6', label: 'Heading 6 (h6)' },
+                    ], data?.tag ?? 'p');
+            }
+
             if ((data?.type ?? rsv_element_types[0]) === 'input-text') {
                 builder
                     .input_select('validation', 'Validation', [
@@ -280,8 +349,8 @@ class RsvFormsPage extends RsvAdminPage {
                 id: data?.id,
                 colspan: 6,
                 save_label: 'Save',
-                on_success: () => elements_dt.refresh(),
+                on_success: () => { elements_dt.refresh(); rsv_schedule_preview(); },
-                on_cancel:  () => elements_dt.refresh(),
+                on_cancel:  () => { elements_dt.refresh(); rsv_schedule_preview(); },
             });
 
             // Type swaps whole fieldsets, so re-render the inline form on change.
@@ -325,14 +394,17 @@ class RsvFormsPage extends RsvAdminPage {
                     'Move Up': RsvDataGrid.func_action(function(dt, row, data) {
                         rsv_elements_source.move_up(data.id);
                         dt.refresh();
+                        rsv_schedule_preview();
                     }),
                     'Move Down': RsvDataGrid.func_action(function(dt, row, data) {
                         rsv_elements_source.move_down(data.id);
                         dt.refresh();
+                        rsv_schedule_preview();
                     }),
                     'Remove': RsvDataGrid.func_action(function(dt, row, data) {
                         rsv_elements_source.remove(data.id);
                         dt.refresh();
+                        rsv_schedule_preview();
                     }),
                 }),
                 'label':    RsvDataGrid.column('Label',       false),
@@ -365,6 +437,7 @@ class RsvFormsPage extends RsvAdminPage {
         document.getElementById('rsv_add_element_btn').onclick = function() {
             rsv_elements_source.add();
             elements_dt.refresh();
+            rsv_schedule_preview();
         };
         }
 
@@ -385,16 +458,19 @@ class RsvFormsPage extends RsvAdminPage {
         }
         rsv_email_key_select?.addEventListener('focus', rsv_sync_email_key_options);
 
+        const rsv_meta_form = document.getElementById('<?= $form_id ?>');
+        ['name', 'definition.email_key', 'definition.success_message'].forEach((n) => {
+            const el = rsv_meta_form?.querySelector(`[name="${n}"]`);
+            el?.addEventListener('input', rsv_schedule_preview);
+            el?.addEventListener('change', rsv_schedule_preview);
+        });
+
         RsvAdminForm.bind(document.getElementById('<?= $form_id ?>'), {
-            transform: (body) => ({
+            transform: () => rsv_collect_definition(),
-                name: body.name,
-                definition: {
-                    email_key: body.definition?.email_key ?? '',
-                    elements:  rsv_elements_source.get_all(),
-                },
-            }),
             refresh: () => { if (typeof forms_dt !== 'undefined') forms_dt.refresh(); },
         });
+
+        rsv_render_preview();
         </script>
         <?php
     }

modules/Database/Db.php

@@ -27,7 +27,9 @@ class Db {
 
     public static function get_results(string $sql, array $params = [], string $output = OBJECT): array {
         global $wpdb;
-        $rows = $wpdb->get_results(empty($params) ? $sql : $wpdb->prepare($sql, $params), $output);
+        $query = empty($params) ? $sql : $wpdb->prepare($sql, $params);
+        error_log($query);
+        $rows = $wpdb->get_results($query, $output);
         self::throw_if_error();
         return $rows ?? [];
     }

modules/Forms/RsvCodeEditor.php

@@ -0,0 +1,76 @@
+<?php
+
+namespace Reservair\Forms;
+
+/**
+ * Wraps WordPress' bundled CodeMirror (wp_enqueue_code_editor) as a drop-in
+ * replacement for a <textarea>.
+ *
+ * The textarea stays the source of truth: CodeMirror mirrors its content back
+ * on every edit, so any form serialization that reads the textarea's value
+ * keeps working unchanged. When the user has turned syntax highlighting off in
+ * their profile, this degrades to the plain textarea.
+ */
+class RsvCodeEditor
+{
+    /**
+     * Renders a code-editor-backed <textarea> and arranges for it to be
+     * upgraded to CodeMirror on the page.
+     *
+     * @param array{name?:string,value?:string,mode?:string,rows?:int,class?:string} $args
+     *        mode is a MIME type understood by wp_enqueue_code_editor, e.g.
+     *        'text/html' or 'text/css'.
+     */
+    public static function render(string $id, array $args = []): string
+    {
+        $name  = $args['name']  ?? $id;
+        $value = $args['value'] ?? '';
+        $mode  = $args['mode']  ?? 'text/html';
+        $rows  = $args['rows']  ?? 8;
+        $class = $args['class'] ?? 'large-text code';
+
+        $textarea = '<textarea id="' . esc_attr($id) . '" name="' . esc_attr($name) . '"'
+                  . ' rows="' . $rows . '" class="' . esc_attr($class) . '">'
+                  . esc_textarea($value)
+                  . '</textarea>';
+
+        $settings = wp_enqueue_code_editor(['type' => $mode]);
+
+        // Syntax highlighting disabled in the user's profile — keep it plain.
+        if ($settings === false) {
+            return $textarea;
+        }
+
+        self::schedule_init($id, $settings);
+
+        return $textarea;
+    }
+
+    /**
+     * Initializes CodeMirror on $id after the code editor script loads, and
+     * keeps the underlying textarea in sync — including dispatching `input` so
+     * listeners (live previews, change tracking) still fire while typing.
+     *
+     * @param array<array-key,mixed> $settings As returned by wp_enqueue_code_editor.
+     */
+    private static function schedule_init(string $id, array $settings): void
+    {
+        $id_json       = wp_json_encode($id);
+        $settings_json = wp_json_encode($settings);
+        if ($id_json === false || $settings_json === false) {
+            return;
+        }
+
+        $script = '(function(){'
+                . 'var ta=document.getElementById(' . $id_json . ');'
+                . 'if(!ta||!window.wp||!wp.codeEditor)return;'
+                . 'var ed=wp.codeEditor.initialize(ta,' . $settings_json . ');'
+                . 'ed.codemirror.on("change",function(cm){'
+                . 'cm.save();'
+                . 'ta.dispatchEvent(new Event("input",{bubbles:true}));'
+                . '});'
+                . '})();';
+
+        wp_add_inline_script('code-editor', $script);
+    }
+}

modules/Forms/RsvFormBuilder.php

@@ -194,6 +194,30 @@ class RsvFormBuilder
         return $this->row($id, $label, $ctrl, $desc);
     }
 
+    /**
+     * Syntax-highlighted editor backed by WordPress' bundled CodeMirror.
+     *
+     * Serializes exactly like {@see textarea()} — the underlying <textarea>
+     * stays the source of truth.
+     *
+     * @param string $mode MIME type for highlighting, e.g. 'text/html'.
+     */
+    public function code(
+        string $id,
+        string $label,
+        string $desc     = '',
+        string $value    = '',
+        string $mode     = 'text/html',
+        int    $rows     = 8
+    ): static {
+        $ctrl = RsvCodeEditor::render($id, [
+            'value' => $value,
+            'mode'  => $mode,
+            'rows'  => $rows,
+        ]);
+        return $this->row($id, $label, $ctrl, $desc);
+    }
+
     public function custom(string $label, callable $fn) : static {
         $this->rows[] = '<tr>'
                       . '<th>' . esc_html($label) . '</th>'

modules/Templating/Elements/RsvReservationActionsElement.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Reservair\Templating\Elements;
+
+use Reservair\Templating\RsvTemplateElement;
+use Reservair\Templating\RsvTemplateSymbols;
+
+/**
+ * Renders accept / refuse action buttons for a reservation, for the maintainer
+ * approval email. The links come from the template's accept_url and refuse_url
+ * symbols; the button labels can be overridden with the accept-label and
+ * refuse-label attributes.
+ */
+class RsvReservationActionsElement implements RsvTemplateElement {
+
+    /** Inline styles, since email clients ignore stylesheets. */
+    private const string ACCEPT_STYLE = 'display:inline-block;padding:10px 18px;margin-right:8px;background:#2e7d32;color:#ffffff;text-decoration:none;border-radius:4px;font-weight:bold;';
+    private const string REFUSE_STYLE = 'display:inline-block;padding:10px 18px;background:#c62828;color:#ffffff;text-decoration:none;border-radius:4px;font-weight:bold;';
+
+    public function render(RsvTemplateSymbols $symbols): string {
+        $accept_url = (string) $symbols->get('accept_url', '');
+        $refuse_url = (string) $symbols->get('refuse_url', '');
+        if ($accept_url === '' && $refuse_url === '') {
+            return '';
+        }
+
+        $accept_label = (string) $symbols->get('accept-label', 'Přijmout');
+        $refuse_label = (string) $symbols->get('refuse-label', 'Odmítnout');
+
+        return '<a href="' . esc_url($accept_url) . '" style="' . self::ACCEPT_STYLE . '">' . esc_html($accept_label) . '</a>'
+             . '<a href="' . esc_url($refuse_url) . '" style="' . self::REFUSE_STYLE . '">' . esc_html($refuse_label) . '</a>';
+    }
+
+    public function symbols(): array {
+        return ['accept-label', 'refuse-label'];
+    }
+}

modules/Templating/Elements/RsvReservationSummaryElement.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Reservair\Templating\Elements;
+
+use Reservair\Templating\RsvTemplateElement;
+use Reservair\Templating\RsvTemplateSymbols;
+
+/**
+ * Emits the client-side summary placeholder. The browser-side RsvFormSender
+ * locates this div after form submission and fills it with the visitor's
+ * selected time slots.
+ */
+class RsvReservationSummaryElement implements RsvTemplateElement {
+
+    public function render(RsvTemplateSymbols $symbols): string {
+        return '<div class="rsv-success-summary"></div>';
+    }
+
+    public function symbols(): array {
+        return [];
+    }
+}

modules/Templating/Elements/RsvResetFormButtonElement.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Reservair\Templating\Elements;
+
+use Reservair\Templating\RsvTemplateElement;
+use Reservair\Templating\RsvTemplateSymbols;
+
+/**
+ * Renders a button that asks the form to clear itself. It only carries the
+ * data-rsv-reset marker; RsvFormSender finds marked buttons in the success card
+ * and links them to the form's cleanup. The label can be overridden with the
+ * label attribute.
+ */
+class RsvResetFormButtonElement implements RsvTemplateElement {
+
+    public function render(RsvTemplateSymbols $symbols): string {
+        $label = (string) $symbols->get('label', 'Odeslat znova');
+        return '<button type="button" class="rsv-form-btn" data-rsv-reset>'
+             . esc_html($label)
+             . '</button>';
+    }
+
+    public function symbols(): array {
+        return ['label'];
+    }
+}

modules/Templating/README.md

@@ -0,0 +1,23 @@
+# Templating
+
+Templates allow to replace place values of symbols in text written in one language. Templating itself requires a language. Therefore the process combines two languages.
+
+This plugin uses templates for success messages of forms & emails. The usage might expand in the future. That is one of the quality attributes of this requirement.
+
+## Language
+
+As both use cases are using HTML (one is an email and another a webpage), the templates in this plugin also uses HTML. The frontend for HTML is `RsvHtmlTemplateParser`, that transforms it into an internal structure. The input language can be changed by writing a new frontend for the compiler in the future.
+
+The main advantage of HTML is that it can be easily extended with custom elements. But we do note that traditional custom elements using JS cannot be used, because JS would not work like that in emails for example.
+
+Extensions and the plugin itself can register custom elements to templates, for example `<reservation-summary>` that auto-expands onto a nice summary of the selected time slots.
+
+Atomic values and strings can be retrieved from submitted data using JSON Path RFC using this syntax: `{{ path }}`. The reason for JSON Path is the simplicity of implementation. We are careful not to overcomplicate the templating language, for a price of being less powerful. Helm language being the example of what not to do.
+
+The language can be easily validated for symbols existence and validity.
+
+## Custom elements
+
+The Templating module calls `rsv-template-register-custom-elements` to register custom elements to templates. Plugins can subscribe to it and in the handler register their own custom elements.
+
+Custom element has a symbol table with values in the input and outputs string. If the custom element has attributes, like `<custom-element attr="test">`, the symbol `attr` with value `test` will also be added to the symbol table.

modules/Templating/RsvTemplateElement.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Reservair\Templating;
+
+/** A registered handler for a hyphenated custom element tag. */
+interface RsvTemplateElement {
+    /** Renders the element to a trusted HTML string given the resolved symbol table. */
+    public function render(RsvTemplateSymbols $symbols): string;
+
+    /**
+     * Returns the symbol names this element understands — used by validation to
+     * report missing or extra attributes.
+     *
+     * @return list<string>
+     */
+    public function symbols(): array;
+}

modules/Templating/RsvTemplateEngine.php

@@ -0,0 +1,250 @@
+<?php
+
+namespace Reservair\Templating;
+
+use Reservair\Logger\Logger;
+
+/**
+ * Renders templates in two phases: first it substitutes {{ path }} interpolations
+ * with values from the data, then it walks the HTML and expands the registered
+ * custom elements. The public entry point for the module.
+ */
+class RsvTemplateEngine {
+
+    public readonly RsvTemplateRegistry $registry;
+
+    public function __construct(?RsvTemplateRegistry $registry = null) {
+        $this->registry = $registry ?? new RsvTemplateRegistry();
+    }
+
+    /**
+     * Renders $source as HTML. Interpolated scalar values are HTML-escaped;
+     * custom elements emit their own trusted markup.
+     *
+     * @param array<string, mixed> $data
+     */
+    public function render(string $source, array $data = []): string {
+        try {
+            return $this->expand_elements(
+                $this->interpolate($source, $data, escape: true),
+                $data,
+            );
+        } catch (RsvTemplateException $e) {
+            throw $e;
+        } catch (\Throwable $e) {
+            Logger::error($e);
+            throw new RsvTemplateException('Template render failed: ' . $e->getMessage(), 0, $e);
+        }
+    }
+
+    /**
+     * Renders $source for a plain-text context such as an email subject: values
+     * are substituted without HTML-escaping and all tags are stripped.
+     *
+     * @param array<string, mixed> $data
+     */
+    public function render_plain(string $source, array $data = []): string {
+        return trim(wp_strip_all_tags($this->interpolate($source, $data, escape: false)));
+    }
+
+    /**
+     * Lists a template's problems without rendering it (empty = valid): empty
+     * interpolations, references to unknown symbols, unregistered custom
+     * elements, and attributes an element does not declare.
+     *
+     * @param list<string>|null $symbols When given, the roots an interpolation may
+     *        reference; a path rooted outside the set is reported as unknown. Null
+     *        skips the reference check (any path is accepted).
+     * @return list<string>
+     */
+    public function validate(string $source, ?array $symbols = null): array {
+        $errors = [];
+
+        if (preg_match_all('/{{\s*([^}]*?)\s*}}/', $source, $matches)) {
+            foreach ($matches[1] as $path) {
+                $expr = trim($path);
+                if ($expr === '') {
+                    $errors[] = 'Empty interpolation: {{ }}';
+                    continue;
+                }
+                $root = $this->tokens($expr)[0] ?? null;
+                if ($symbols !== null && $root !== null && !in_array($root, $symbols, true)) {
+                    $errors[] = "Unknown reference: {{ {$expr} }}";
+                }
+            }
+        }
+
+        foreach ($this->custom_elements($this->load($source)) as $element) {
+            $handler = $this->registry->get($element->tagName);
+            if ($handler === null) {
+                $errors[] = "Unregistered custom element: <{$element->tagName}>";
+                continue;
+            }
+            $allowed = $handler->symbols();
+            foreach ($this->attributes($element) as $name => $value) {
+                if (!in_array($name, $allowed, true)) {
+                    $errors[] = "Unknown attribute \"{$name}\" on <{$element->tagName}>";
+                }
+            }
+        }
+
+        return $errors;
+    }
+
+    // -------------------------------------------------------------------------
+    // Phase 1 — interpolation
+    // -------------------------------------------------------------------------
+
+    /** @param array<string, mixed> $data */
+    private function interpolate(string $source, array $data, bool $escape): string {
+        return preg_replace_callback('/{{\s*([^}]+?)\s*}}/', function (array $match) use ($data, $escape): string {
+            $value = $this->resolve($match[1], $data);
+            if (!is_scalar($value)) {
+                return ''; // null and non-scalar (arrays/objects) render empty
+            }
+            $string = (string) $value;
+            return $escape ? esc_html($string) : $string;
+        }, $source) ?? $source;
+    }
+
+    // -------------------------------------------------------------------------
+    // Phase 2 — custom element expansion
+    // -------------------------------------------------------------------------
+
+    /**
+     * Replaces each registered custom element with its handler's output. The
+     * element is swapped for a unique comment marker, the document is serialised,
+     * and the markers are substituted for the (trusted) handler strings — so the
+     * output is never re-escaped by the serialiser.
+     *
+     * @param array<string, mixed> $data
+     */
+    private function expand_elements(string $html, array $data): string {
+        // Skip the DOM round-trip unless a hyphenated tag could match a handler.
+        if ($this->registry->all() === [] || !preg_match('/<[a-z][a-z0-9]*-/i', $html)) {
+            return $html;
+        }
+
+        $dom          = $this->load($html);
+        $nonce        = 'rsv-' . bin2hex(random_bytes(6));
+        $replacements = [];
+
+        foreach ($this->custom_elements($dom) as $i => $element) {
+            $handler = $this->registry->get($element->tagName);
+            if ($handler === null) {
+                continue; // leave unknown custom elements in place
+            }
+            $token                           = "{$nonce}-{$i}";
+            $replacements["<!--{$token}-->"] = $handler->render(
+                new RsvTemplateSymbols(array_merge($data, $this->attributes($element)))
+            );
+            $element->parentNode?->replaceChild($dom->createComment($token), $element);
+        }
+
+        return strtr($this->serialize($dom), $replacements);
+    }
+
+    // -------------------------------------------------------------------------
+    // JSON Path resolver
+    // -------------------------------------------------------------------------
+
+    /**
+     * Resolves a minimal JSON Path expression against $data.
+     *
+     * Supported forms: bare key, $.key, $.a.b, $.items[0], $['key'].
+     * Returns null for a missing path; the renderer emits an empty string for null.
+     *
+     * @param array<string, mixed> $data
+     */
+    private function resolve(string $path, array $data): mixed {
+        $current = $data;
+
+        foreach ($this->tokens($path) as $token) {
+            if (!is_array($current) || !array_key_exists($token, $current)) {
+                return null;
+            }
+            $current = $current[$token];
+        }
+
+        return $current;
+    }
+
+    /**
+     * Splits a JSON Path into its key tokens, dropping the root sigil and
+     * bracket-notation quotes — e.g. "$.items[0]" yields ['items', '0'].
+     *
+     * @return list<string>
+     */
+    private function tokens(string $path): array {
+        $raw    = preg_split('/[\.\[\]]+/', $path, -1, PREG_SPLIT_NO_EMPTY) ?: [];
+        $tokens = [];
+        foreach ($raw as $token) {
+            if ($token === '$') {
+                continue; // root sigil
+            }
+            $tokens[] = trim($token, "'\""); // strip bracket-notation quotes
+        }
+        return $tokens;
+    }
+
+    // -------------------------------------------------------------------------
+    // DOM helpers
+    // -------------------------------------------------------------------------
+
+    private function load(string $html): \DOMDocument {
+        $dom  = new \DOMDocument();
+        $prev = libxml_use_internal_errors(true);
+        // The XML encoding hint forces UTF-8; NOIMPLIED/NODEFDTD keep the fragment
+        // free of the synthetic <html>/<body>/doctype wrappers libxml adds.
+        $dom->loadHTML(
+            '<?xml encoding="UTF-8">' . $html,
+            LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD,
+        );
+        libxml_clear_errors();
+        libxml_use_internal_errors($prev);
+
+        // Drop the encoding hint, which libxml leaves behind as a stray node.
+        foreach (iterator_to_array($dom->childNodes) as $node) {
+            if ($node instanceof \DOMProcessingInstruction
+                || ($node instanceof \DOMComment && str_contains((string) $node->nodeValue, 'xml encoding'))) {
+                $dom->removeChild($node);
+            }
+        }
+
+        return $dom;
+    }
+
+    /**
+     * Every hyphenated element in document order — registered or not.
+     *
+     * @return list<\DOMElement>
+     */
+    private function custom_elements(\DOMDocument $dom): array {
+        $elements = [];
+        foreach ((new \DOMXPath($dom))->query('//*[contains(local-name(), "-")]') as $node) {
+            if ($node instanceof \DOMElement) {
+                $elements[] = $node;
+            }
+        }
+        return $elements;
+    }
+
+    /** @return array<string, string> */
+    private function attributes(\DOMElement $element): array {
+        $attributes = [];
+        if ($element->hasAttributes()) {
+            foreach ($element->attributes as $attribute) {
+                $attributes[$attribute->name] = $attribute->value;
+            }
+        }
+        return $attributes;
+    }
+
+    private function serialize(\DOMDocument $dom): string {
+        $html = '';
+        foreach ($dom->childNodes as $child) {
+            $html .= $dom->saveHTML($child);
+        }
+        return $html;
+    }
+}

modules/Templating/RsvTemplateException.php

@@ -0,0 +1,5 @@
+<?php
+
+namespace Reservair\Templating;
+
+class RsvTemplateException extends \RuntimeException {}

modules/Templating/RsvTemplateRegistry.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Reservair\Templating;
+
+/** Holds the mapping from custom element tag names to their handlers. */
+class RsvTemplateRegistry {
+    /** @var array<string, RsvTemplateElement> */
+    private array $elements = [];
+
+    public function register(string $tag, RsvTemplateElement $element): void {
+        $this->elements[$tag] = $element;
+    }
+
+    public function get(string $tag): ?RsvTemplateElement {
+        return $this->elements[$tag] ?? null;
+    }
+
+    /** @return array<string, RsvTemplateElement> */
+    public function all(): array {
+        return $this->elements;
+    }
+
+    /**
+     * Extends a wp_kses allowlist so the registered custom elements survive
+     * sanitization of admin HTML. Each element contributes its tag and the
+     * attributes it declares via symbols().
+     *
+     * @param array<string, mixed> $base A wp_kses allowed-html map to extend.
+     * @return array<string, mixed>
+     */
+    public function kses_allowed(array $base = []): array {
+        foreach ($this->elements as $tag => $element) {
+            $attributes = [];
+            foreach ($element->symbols() as $name) {
+                $attributes[$name] = true;
+            }
+            $base[$tag] = $attributes;
+        }
+        return $base;
+    }
+}

modules/Templating/RsvTemplateSymbols.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace Reservair\Templating;
+
+/** Immutable symbol table passed to custom-element handlers. */
+class RsvTemplateSymbols {
+    /** @param array<string, mixed> $data */
+    public function __construct(private readonly array $data) {}
+
+    /** @return array<string, mixed> */
+    public function all(): array {
+        return $this->data;
+    }
+
+    public function get(string $name, mixed $default = null): mixed {
+        return $this->data[$name] ?? $default;
+    }
+}

reservair.php

@@ -1,4 +1,8 @@
 <?php
+
+use Reservair\Templating\Elements\RsvReservationSummaryElement;
+use Reservair\Templating\Elements\RsvReservationActionsElement;
+use Reservair\Templating\Elements\RsvResetFormButtonElement;
 /**
  * Plugin Name:       Reservair
  * Description:       A reservation and booking system for WordPress. Site visitors browse available time slots and submit reservation requests via a Gutenberg block; administrators manage timetables, services, forms, and reservations from the WordPress admin panel.
@@ -29,7 +33,7 @@ register_activation_hook( __FILE__, [ 'RsvInstaller', 'install' ] );
  * plugins we might interact with) is fully loaded.
  */
 function rsv_bootstrap(): void {
-	global $rsv_form_registry;
+	global $rsv_form_registry, $rsv_template_registry;
 
 	// Re-grant the custom capability after a plugin *update* (the activation hook
 	// only runs on activate). No-op once the stored version matches.
@@ -47,6 +51,16 @@ function rsv_bootstrap(): void {
 	$rsv_form_registry->register( 'button',                     new RsvButtonElementHandler() );
 	$rsv_form_registry->register( 'reservation',                new RsvFormReservationElementHandler() );
 	$rsv_form_registry->register( 'output-reservation-summary', new RsvReservationSummaryElementHandler() );
+	$rsv_form_registry->register( 'output-text',                new RsvOutputTextElementHandler() );
+
+	// Template custom-element registry. Extensions register via the action.
+	add_action( 'rsv-template-register-custom-elements', function ( \Reservair\Templating\RsvTemplateRegistry $reg ): void {
+		$reg->register( 'reservation-summary', new RsvReservationSummaryElement() );
+		$reg->register( 'reservation-actions', new RsvReservationActionsElement() );
+		$reg->register( 'reset-form-button',   new RsvResetFormButtonElement() );
+	} );
+	$rsv_template_registry = new \Reservair\Templating\RsvTemplateRegistry();
+	do_action( 'rsv-template-register-custom-elements', $rsv_template_registry );
 }
 
 add_action( 'plugins_loaded', 'rsv_bootstrap' );

src/admin.js

@@ -1,5 +1,6 @@
-import './client.js';
+// The client bundle (custom elements, form sender, client styles) is loaded
-
+// separately under the shared `rsv-client` handle — see rsv_enqueue_admin_assets.
+// Bundling it here too would run customElements.define() twice in the editor.
 import '../assets/css/RsvAdminStyle.css';
 
 import { RsvDataGrid } from '../assets/js/elements/RsvDatagrid.js';