domma-cms 0.102.1 → 0.104.0

package/plugins/booking/admin/css/index.css

@@ -0,0 +1,192 @@
+/* Booking admin - only --dm-* tokens, so it follows the admin theme (light, dark, custom). */
+.bk, .bk-form { --bk-soft: color-mix(in srgb, var(--dm-text) 5%, transparent); --bk-line: var(--dm-border, rgba(128, 128, 128, .3)); }
+.bk [hidden], .bk-form [hidden] { display: none !important; }
+.bk { display: flex; flex-direction: column; gap: 1rem; }
+.bk-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
+.bk-error { color: var(--dm-danger); }
+.bk-muted { color: var(--dm-text-muted); }
+.bk-note { margin: 0; font-size: var(--dm-text-sm); color: var(--dm-text-muted); }
+.bk-note.is-bad { color: var(--dm-danger); }
+.bk-note.is-warn { color: color-mix(in srgb, var(--dm-warning) 60%, var(--dm-text)); }
+.bk-spacer { flex: 1; }
+.bk-link { border: 0; background: none; padding: 0; color: var(--dm-primary); cursor: pointer; font: inherit; text-align: left; }
+.bk-link:hover { text-decoration: underline; }
+.bk-danger-text { color: var(--dm-danger) !important; }
+
+/* Tabs under the banner */
+.bk-nav { display: flex; flex-wrap: wrap; gap: .15rem; border-bottom: 1px solid var(--bk-line); }
+.bk-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; color: var(--dm-text-muted); text-decoration: none;
+    font-size: var(--dm-text-sm); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--dm-radius-sm) var(--dm-radius-sm) 0 0; }
+.bk-nav a:hover { color: var(--dm-text); background: var(--bk-soft); }
+.bk-nav a.is-on { color: var(--dm-primary); border-bottom-color: var(--dm-primary); font-weight: 600; }
+.bk-nav a.is-ext::after { content: 'Pro'; font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: .05rem .35rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-primary) 15%, transparent); color: var(--dm-primary); }
+
+/* Cards, bars, chips */
+.bk-card { border: 1px solid var(--bk-line); border-radius: var(--dm-radius-md); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem;
+    background: var(--dm-surface, transparent); min-width: 0; }
+.bk-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.bk-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.bk-date { width: auto; max-width: 11rem; }
+.bk-when { font-size: var(--dm-text-sm); }
+.bk-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--bk-line); border-radius: var(--dm-radius-md); overflow: hidden; }
+.bk-seg button { border: 0; background: none; color: var(--dm-text); padding: .32rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm);
+    display: inline-flex; align-items: center; gap: .3rem; }
+.bk-seg button + button { border-left: 1px solid var(--bk-line); }
+.bk-seg button b { font-weight: 500; opacity: .6; }
+.bk-seg button:hover { background: var(--bk-soft); }
+.bk-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text, #fff); }
+.bk-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--dm-text-xs); font-weight: 600; padding: .12rem .55rem; border-radius: 999px;
+    white-space: nowrap; background: color-mix(in srgb, var(--dm-text) 9%, transparent); color: var(--dm-text-muted); }
+.bk-chip.is-primary { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }
+.bk-chip.is-success { background: color-mix(in srgb, var(--dm-success) 15%, transparent); color: var(--dm-success); }
+.bk-chip.is-warning { background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: color-mix(in srgb, var(--dm-warning) 55%, var(--dm-text)); }
+.bk-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-danger); }
+.bk-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 2rem 1rem; color: var(--dm-text-muted); }
+.bk-empty p { margin: 0; }
+.bk-empty strong { color: var(--dm-text); }
+
+/* Colours - one hue per name, mixed with the theme so they read on light and dark */
+[data-colour] { --bk-c: var(--dm-primary); }
+[data-colour="blue"] { --bk-c: var(--dm-blue-500, #3b82f6); }
+[data-colour="green"] { --bk-c: var(--dm-green-500, #16a34a); }
+[data-colour="teal"] { --bk-c: #0d9488; }
+[data-colour="purple"] { --bk-c: #8b5cf6; }
+[data-colour="pink"] { --bk-c: #db2777; }
+[data-colour="orange"] { --bk-c: #ea580c; }
+[data-colour="red"] { --bk-c: var(--dm-red-500, #dc2626); }
+[data-colour="grey"] { --bk-c: var(--dm-gray-500, #6b7280); }
+.bk-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; background: var(--bk-c, var(--dm-text-muted)); }
+
+/* Rows */
+.bk-list { display: flex; flex-direction: column; }
+.bk-row { display: flex; align-items: center; gap: .85rem; padding: .6rem .4rem; border-bottom: 1px solid var(--bk-line); cursor: pointer; border-radius: var(--dm-radius-sm); }
+.bk-row:last-child { border-bottom: 0; }
+.bk-row:hover, .bk-row:focus-visible { background: var(--bk-soft); outline: none; }
+.bk-when-col { display: flex; flex-direction: column; min-width: 8.5rem; font-variant-numeric: tabular-nums; }
+.bk-when-col small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.bk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.bk-main strong, .bk-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bk-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.bk-kebab { border: 0; background: none; cursor: pointer; font-size: 1.15rem; color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .35rem; line-height: 1.6; }
+.bk-kebab:hover { color: var(--dm-primary); background: var(--bk-soft); }
+@media (max-width: 720px) { .bk-when-col { min-width: 6rem; } }
+
+/* Getting started */
+.bk-checklist { border: 1px solid color-mix(in srgb, var(--dm-primary) 40%, var(--bk-line)); border-radius: var(--dm-radius-md); padding: .75rem 1rem;
+    background: color-mix(in srgb, var(--dm-primary) 5%, transparent); }
+.bk-checklist header { display: flex; align-items: center; justify-content: space-between; }
+.bk-checklist h3 { margin: 0; font-size: var(--dm-text-base, 1rem); display: flex; align-items: center; gap: .35rem; }
+.bk-checklist ol { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
+.bk-checklist li { display: flex; align-items: center; gap: .5rem; font-size: var(--dm-text-sm); }
+.bk-checklist li.is-done { color: var(--dm-text-muted); }
+.bk-checklist li:not(.is-done) .bk-link { color: var(--dm-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--dm-text) 35%, transparent); text-underline-offset: 3px; }
+.bk-checklist li.is-done .bk-link { color: var(--dm-text-muted); text-decoration: line-through; }
+.bk-checklist li.is-done svg { color: var(--dm-success); }
+
+/* The Diary */
+.bk-diary-wrap { overflow: auto; max-height: calc(100vh - 16rem); min-height: 20rem; border: 1px solid var(--bk-line); border-radius: var(--dm-radius-sm); }
+.bk-diary-wrap > .bk-note { padding: .5rem .75rem; }
+.bk-diary-grid { --bk-gutter: 3.4rem; min-width: calc(var(--bk-gutter) + var(--bk-cols) * 9rem); }
+.bk-diary-grid.is-week { min-width: calc(var(--bk-gutter) + 7 * 7.5rem); }
+.bk-diary-head, .bk-diary-body { display: grid; grid-template-columns: var(--bk-gutter) repeat(var(--bk-cols), minmax(0, 1fr)); }
+.bk-diary-head { position: sticky; top: 0; z-index: 3; background: var(--dm-surface, var(--dm-bg, #fff)); border-bottom: 1px solid var(--bk-line); }
+.bk-col-head { padding: .45rem .5rem; font-size: var(--dm-text-sm); font-weight: 600; display: flex; align-items: center; gap: .3rem; border-left: 1px solid var(--bk-line);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.bk-col-head[data-colour] { box-shadow: inset 0 -3px 0 var(--bk-c); }
+.bk-col-head.is-today { color: var(--dm-primary); }
+.bk-link-head { cursor: pointer; }
+.bk-link-head:hover { background: var(--bk-soft); }
+.bk-gutter { position: relative; height: var(--bk-h); }
+.bk-gutter span { position: absolute; right: .4rem; transform: translateY(-.55em); font-size: var(--dm-text-xs); color: var(--dm-text-muted); font-variant-numeric: tabular-nums; }
+.bk-gutter span:first-child { transform: none; }
+.bk-col { position: relative; height: var(--bk-h); border-left: 1px solid var(--bk-line); cursor: copy;
+    background-image:
+        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--bk-hour) - 1px), var(--bk-line) calc(var(--bk-hour) - 1px), var(--bk-line) var(--bk-hour)),
+        repeating-linear-gradient(135deg, transparent 0, transparent 7px, color-mix(in srgb, var(--dm-text) 7%, transparent) 7px, color-mix(in srgb, var(--dm-text) 7%, transparent) 8px); }
+/* Opening hours: plain; outside them, hatched. */
+.bk-open { position: absolute; left: 0; right: 0; background-color: var(--dm-surface, var(--dm-bg, #fff)); pointer-events: none;
+    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--bk-hour) - 1px), var(--bk-line) calc(var(--bk-hour) - 1px), var(--bk-line) var(--bk-hour)); }
+.bk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--dm-danger); z-index: 2; pointer-events: none; }
+.bk-block { position: absolute; z-index: 1; border-radius: var(--dm-radius-sm); padding: .2rem .4rem; overflow: hidden; cursor: pointer; font-size: var(--dm-text-xs);
+    line-height: 1.25; background: color-mix(in srgb, var(--bk-c) 18%, var(--dm-surface, var(--dm-bg, #fff))); border-left: 3px solid var(--bk-c);
+    color: var(--dm-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
+.bk-block:hover, .bk-block:focus-visible { background: color-mix(in srgb, var(--bk-c) 28%, var(--dm-surface, var(--dm-bg, #fff))); outline: none; }
+.bk-block:focus-visible { box-shadow: 0 0 0 2px var(--dm-primary); }
+.bk-block strong, .bk-block small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bk-block small { color: var(--dm-text-muted); }
+.bk-block .bk-kebab { float: right; font-size: .95rem; line-height: 1; padding: 0 .15rem; margin: -.05rem -.2rem 0 .1rem; }
+.bk-block.is-cancelled { opacity: .55; text-decoration: line-through; border-left-style: dashed; }
+.bk-block.is-completed { border-left-color: var(--dm-success); }
+.bk-block.is-no-show { border-left-color: var(--dm-danger); }
+
+/* Forms (slideovers) */
+.bk-form { display: flex; flex-direction: column; gap: .75rem; padding: .25rem .1rem 1rem; }
+.bk-form p { margin: 0; }
+.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; align-items: start; }
+.bk-grid > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
+.bk-wide { grid-column: 1 / -1; }
+@media (max-width: 560px) { .bk-grid { grid-template-columns: 1fr; } }
+.bk-form .form-label { margin: 0; display: inline-flex; align-items: center; gap: .3rem; }
+.bk-sub { margin: .5rem 0 0; font-size: var(--dm-text-sm); font-weight: 600; display: flex; align-items: center; gap: .3rem; }
+.bk-check { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--dm-text-sm); cursor: pointer; }
+.bk-checks { display: flex; flex-direction: column; gap: .4rem; }
+.bk-picks { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
+.bk-inline { display: flex; gap: .4rem; }
+.bk-inline .form-input { max-width: 6rem; }
+.bk-err { color: var(--dm-danger); font-size: var(--dm-text-xs); }
+.bk-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.bk-actions-start { justify-content: flex-start; }
+.bk-copy { display: flex; align-items: center; gap: .4rem; }
+.bk-copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .3rem .5rem; border-radius: var(--dm-radius-sm);
+    background: var(--bk-soft); font-size: var(--dm-text-sm); }
+.bk-alert { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .75rem; border-radius: var(--dm-radius-sm); font-size: var(--dm-text-sm);
+    background: color-mix(in srgb, var(--dm-warning) 14%, transparent); border: 1px solid color-mix(in srgb, var(--dm-warning) 45%, transparent); }
+.bk-alert svg { color: color-mix(in srgb, var(--dm-warning) 60%, var(--dm-text)); flex: none; margin-top: .1rem; }
+.bk-settings-nav { align-self: flex-start; }
+
+/* Free times */
+.bk-picker { display: flex; flex-direction: column; gap: .5rem; }
+.bk-slots { display: flex; flex-wrap: wrap; gap: .35rem; }
+.bk-slot { border: 1px solid var(--bk-line); background: none; color: var(--dm-text); border-radius: var(--dm-radius-sm); padding: .25rem .55rem; cursor: pointer;
+    font: inherit; font-size: var(--dm-text-sm); font-variant-numeric: tabular-nums; }
+.bk-slot:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
+.bk-slot.is-on { background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-primary-text, #fff); }
+
+/* One booking */
+.bk-booking-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
+.bk-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; font-size: var(--dm-text-sm); }
+.bk-dl dt { color: var(--dm-text-muted); }
+.bk-dl dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
+.bk-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: var(--dm-text-sm); }
+.bk-history small { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+
+/* Hours and days off */
+.bk-hours { display: flex; flex-direction: column; border: 1px solid var(--bk-line); border-radius: var(--dm-radius-sm); }
+.bk-day { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .35rem .6rem; }
+.bk-day + .bk-day { border-top: 1px solid var(--bk-line); }
+.bk-day-name { font-size: var(--dm-text-sm); font-weight: 500; }
+.bk-windows { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; font-size: var(--dm-text-sm); }
+.bk-window { display: inline-flex; align-items: center; gap: .25rem; }
+.bk-window .form-input { width: 7.2rem; padding-block: .2rem; }
+.bk-x { opacity: .6; }
+.bk-x:hover { opacity: 1; }
+.bk-off { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .35rem; font-size: var(--dm-text-sm); }
+.bk-off .form-input[type="date"] { width: 10rem; }
+.bk-off .form-input:not([type="date"]) { flex: 1; min-width: 8rem; }
+@media (max-width: 560px) { .bk-day { grid-template-columns: 1fr; } }
+/* Week columns are narrow: the menu is right-click / Shift+F10 there, so the time and name get the room. */
+.bk-diary-grid.is-week .bk-block .bk-kebab { display: none; }
+.bk-col-head.is-today::after { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--dm-primary); flex: none; }
+
+/* ---- 1.1: companions, classes, extension sections, places ---- */
+.bk-block.is-companion { border-left-style: dashed; background: color-mix(in srgb, var(--bk-c) 8%, var(--dm-surface, var(--dm-bg, #fff))); }
+.bk-block.is-companion strong { font-weight: 500; }
+.bk-block.is-session { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-c) 45%, transparent); }
+.bk-session-list .bk-row { width: 100%; text-align: left; background: none; color: inherit; font: inherit; }
+.bk-ext-host:empty { display: none; }
+.bk-ext { border: 1px solid var(--bk-line); border-radius: var(--dm-radius-md, 8px); padding: .75rem .9rem; margin: .9rem 0 0; }
+.bk-ext > .bk-note { margin: 0; }
+.bk-slot small { display: block; font-size: var(--dm-text-xs); color: var(--dm-text-muted); line-height: 1.2; }
+.bk-slot.is-on small { color: inherit; opacity: .85; }
+.bk-answers { margin-bottom: .5rem; }

package/plugins/booking/admin/lib/details.js

@@ -0,0 +1,58 @@
+/**
+ * How a booking reads in the admin - PURE, shared by the booking slideover,
+ * the Bookings list and the Diary, and tested without a browser.
+ *
+ * @module booking/admin/lib/details
+ */
+
+/** "Alex", "Alex and Court 1", "Alex, Court 1 and Projector". */
+export function withNames(b) {
+    const names = [b?.bookableName, ...(Array.isArray(b?.alsoNames) ? b.alsoNames : [])].filter(Boolean);
+    if (names.length < 2) return names[0] || '';
+    return `${names.slice(0, -1).join(', ')} and ${names[names.length - 1]}`;
+}
+
+/** Where a booking came from, in words. */
+export function sourceLabel(source) {
+    return {
+        public: 'Online, on the booking page',
+        admin: 'By staff',
+        waitlist: 'From the waiting list',
+        extension: 'Added by an extension'
+    }[source] || (source ? `From ${source}` : 'By staff');
+}
+
+/** The short form for a list row's meta. */
+export function sourceShort(source) {
+    return {public: 'booked online', admin: 'booked by staff', waitlist: 'from the waiting list', extension: 'added automatically'}[source] || 'booked by staff';
+}
+
+/**
+ * The answers to a service's questions as [label, text] rows, in the
+ * questions' order, then any answer whose question has gone (by its key).
+ *
+ * @param   {Object<string, *>} answers
+ * @param   {object} [service] - its ext['booking-pro'].questions give the labels
+ * @returns {[string, string][]}
+ */
+export function answerRows(answers, service) {
+    if (!answers || typeof answers !== 'object') return [];
+    const questions = Array.isArray(service?.ext?.['booking-pro']?.questions) ? service.ext['booking-pro'].questions : [];
+    const text = (v) => (v === true ? 'Yes' : v === false ? 'No' : Array.isArray(v) ? v.join(', ') : String(v ?? ''));
+    const rows = [];
+    const seen = new Set();
+    for (const q of questions) {
+        if (!q || !(q.id in answers)) continue;
+        seen.add(q.id);
+        rows.push([String(q.label || q.id), text(answers[q.id])]);
+    }
+    for (const [k, v] of Object.entries(answers)) if (!seen.has(k)) rows.push([k, text(v)]);
+    return rows.filter(([, v]) => v !== '');
+}
+
+/** "2 places left" / "1 place left" - for a service that takes more than one. */
+export function placesLabel(left) {
+    const n = Number(left);
+    if (!Number.isFinite(n)) return '';
+    return `${n} place${n === 1 ? '' : 's'} left`;
+}

package/plugins/booking/admin/lib/diary-layout.js

@@ -0,0 +1,140 @@
+/**
+ * The Diary's geometry - PURE, so it can be tested without a browser.
+ *
+ * A day column is a strip of minutes. Bookings are placed by their wall-clock
+ * time in the business zone; bookings that overlap (a clash booked anyway, or
+ * several people's in the week view) sit side by side in lanes.
+ *
+ * Imported relatively (../../public/lib/...) so the same file works in the
+ * browser (/plugins/booking/admin/lib/) and under node --test.
+ *
+ * @module booking/admin/lib/diary-layout
+ */
+
+import {addDays, weekdayOf, wallClock} from '../../public/lib/time.js';
+import {windowsOn} from '../../public/lib/slots.js';
+
+/** Monday of the week a date is in. */
+export function weekStart(date) {
+    const wd = weekdayOf(date);
+    return addDays(date, wd === 0 ? -6 : 1 - wd);
+}
+
+/** The dates a view shows: one for 'day', Monday to Sunday for 'week'. */
+export function datesFor(view, date) {
+    if (view !== 'week') return [date];
+    const first = weekStart(date);
+    return Array.from({length: 7}, (_, i) => addDays(first, i));
+}
+
+/**
+ * The hours the grid shows: from the earliest opening to the latest closing of
+ * any bookable on those dates, widened to take in any booking outside them,
+ * whole hours, never less than 8 hours. 08:00-18:00 when nothing is open.
+ *
+ * @param   {object[]} bookables
+ * @param   {string[]} dates
+ * @param   {{startMin: number, endMin: number}[]} placed - bookings' minutes on those dates
+ * @returns {{from: number, to: number}} minutes since midnight, whole hours
+ */
+export function gridHours(bookables, dates, placed = []) {
+    let from = Infinity;
+    let to = -Infinity;
+    for (const date of dates) {
+        for (const bk of bookables) {
+            for (const w of windowsOn(bk, date)) { from = Math.min(from, w.from); to = Math.max(to, w.to); }
+        }
+    }
+    for (const p of placed) { from = Math.min(from, p.startMin); to = Math.max(to, p.endMin); }
+    if (!Number.isFinite(from)) { from = 480; to = 1080; }
+    from = Math.floor(from / 60) * 60;
+    to = Math.ceil(to / 60) * 60;
+    if (to - from < 480) to = Math.min(1440, from + 480);
+    if (to - from < 480) from = Math.max(0, to - 480);
+    return {from, to};
+}
+
+/**
+ * Where a booking falls: its date and minutes in the zone, clipped to its own
+ * day (a booking past midnight shows to the end of the day it starts on).
+ *
+ * @param   {{startAt: string, endAt: string}} b
+ * @param   {string} tz
+ * @returns {{date: string, startMin: number, endMin: number}}
+ */
+export function placeOf(b, tz) {
+    const s = wallClock(b.startAt, tz);
+    const e = wallClock(b.endAt, tz);
+    const endMin = e.date === s.date ? e.minutes : 1440;
+    return {date: s.date, startMin: s.minutes, endMin: Math.max(endMin, s.minutes + 10)};
+}
+
+/**
+ * Lanes for items in one column: each gets `lane` and `lanes` (how many sit
+ * side by side in its cluster of overlapping items).
+ *
+ * @template T
+ * @param   {(T & {startMin: number, endMin: number})[]} items
+ * @returns {(T & {lane: number, lanes: number})[]}
+ */
+export function layoutColumn(items) {
+    const sorted = [...items].sort((a, b) => a.startMin - b.startMin || b.endMin - a.endMin);
+    const out = [];
+    let cluster = [];
+    let clusterEnd = -1;
+    const flush = () => {
+        const n = cluster.reduce((m, x) => Math.max(m, x.lane + 1), 0);
+        for (const x of cluster) out.push({...x, lanes: n});
+        cluster = [];
+    };
+    for (const it of sorted) {
+        if (cluster.length && it.startMin >= clusterEnd) { flush(); clusterEnd = -1; }
+        const busy = new Set(cluster.filter(x => x.endMin > it.startMin).map(x => x.lane));
+        let lane = 0;
+        while (busy.has(lane)) lane++;
+        cluster.push({...it, lane});
+        clusterEnd = Math.max(clusterEnd, it.endMin);
+    }
+    if (cluster.length) flush();
+    return out;
+}
+
+/** The minute a click at `y` px lands on, rounded down to `snap` minutes. */
+export function minuteAt(y, {from, pxPerMin, snap = 15}) {
+    const raw = from + Math.max(0, y) / pxPerMin;
+    return Math.floor(raw / snap) * snap;
+}
+
+/** Column heading: "Mon 06/10". */
+export function dayLabel(date) {
+    const [, m, d] = date.split('-');
+    return `${['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][weekdayOf(date)]} ${d}/${m}`;
+}
+
+/** The bookables a booking holds: its own, and any it took along. */
+const holdsOf = (b) => (Array.isArray(b?.holds) && b.holds.length ? b.holds : [b?.bookableId]).filter(Boolean);
+
+/**
+ * What one Diary column shows. In the day view (a column per person or room)
+ * a booking appears in every column it holds - the companion copies (a court
+ * booked with a trainer) marked `companion`. Several live bookings of one
+ * session (same service, start and person - a class) become ONE item with all
+ * of them in `bookings`. Cancelled ones are never grouped.
+ *
+ * @param   {object[]} bookings
+ * @param   {{bookableId?: string}} [column] - none: every booking (the week view)
+ * @returns {{key: string, b: object, bookings: object[], companion: boolean, session: boolean}[]}
+ */
+export function columnItems(bookings, {bookableId = ''} = {}) {
+    const groups = new Map();
+    for (const b of bookings || []) {
+        if (bookableId && !holdsOf(b).includes(bookableId)) continue;
+        const companion = Boolean(bookableId) && b.bookableId !== bookableId;
+        const key = b.status === 'cancelled'
+            ? `x|${b.id}`
+            : `s|${b.serviceId}|${b.startAt}|${b.bookableId}${companion ? '|c' : ''}`;
+        if (!groups.has(key)) groups.set(key, {key, b, bookings: [], companion});
+        groups.get(key).bookings.push(b);
+    }
+    return [...groups.values()].map(g => ({...g, session: g.bookings.length > 1}));
+}

package/plugins/booking/admin/lib/extension-sections.js

@@ -0,0 +1,160 @@
+/**
+ * Sections other Tools add to Booking's own slideovers - the host.
+ *
+ * THE CONTRACT (Booking 1.1; Booking Pro is the first to use it)
+ *
+ * GET /api/plugins/booking/bootstrap returns
+ *   `sections: [{owner, serviceEditor?, newBooking?, bookingPanel?}]`
+ * - module paths under /plugins/<owner>/, from what an extension registered
+ *   (Booking's lib/extensions.js `admin`).
+ *
+ * Each module exports `async mount(el, ctx)` and returns an object with any of:
+ *   values()          serviceEditor: the owner's settings for the service - saved as
+ *                     `service.ext[owner]`. newBooking: `{answers?, ext?}` - the host sends
+ *                     `body.answers` (merged over every section) and `body.ext[owner]`.
+ *   validate()        '' when all is well, else a message; the host shows it and does not save.
+ *   after(booking)    newBooking only: awaited after the booking is made (a failure is
+ *                     toasted; the booking stays made).
+ *   dirty()           true when the section holds changes (the slideover asks before closing).
+ *   destroy()         called when the slideover closes.
+ *
+ * ctx = {
+ *   kind: 'serviceEditor' | 'newBooking' | 'bookingPanel',
+ *   owner,
+ *   service,          serviceEditor: the service being edited (null when new);
+ *                     newBooking: the service picked so far (null when none)
+ *   onServiceChange(fn)   newBooking: fn(service|null) whenever the pick changes
+ *   booking,          bookingPanel: the booking shown
+ *   bookables, services, settings,
+ *   api: {request(method, path, body), get(path), post(path, body), put(path, body), delete(path)}
+ *                     the admin's request helper; paths are under /api - e.g. '/plugins/booking-pro/series'.
+ *                     A failure throws with `status` and `body` (the server's answer).
+ *   kit,              the admin's tool-kit (openMenuAt, onceClosed, helpPopovers, ...)
+ *   helpPopovers(el), wire the help popovers (data-help="...") inside el (returns the teardown)
+ *   onChange(),       mark the slideover as changed
+ *   refresh()         bookingPanel: reopen the booking with fresh data
+ * }
+ *
+ * The host puts one bordered `<section class="bk-ext" data-owner="...">` per
+ * extension after Booking's own fields. A module that fails to load or mount
+ * leaves a short muted note - never a broken slideover.
+ *
+ * @module booking/admin/lib/extension-sections
+ */
+
+import {loadKit, request} from './kit.js';
+
+const say = (el, text) => {
+    el.innerHTML = '';
+    const p = document.createElement('p');
+    p.className = 'bk-note';
+    p.textContent = text;
+    el.appendChild(p);
+};
+
+export const sectionApi = {
+    request,
+    get: (p) => request('GET', p),
+    post: (p, b) => request('POST', p, b ?? {}),
+    put: (p, b) => request('PUT', p, b ?? {}),
+    delete: (p) => request('DELETE', p)
+};
+
+/**
+ * Mount every extension's section of one kind into `box`.
+ *
+ * @param   {HTMLElement} box
+ * @param   {'serviceEditor'|'newBooking'|'bookingPanel'} kind
+ * @param   {object} opts - {boot, service?, booking?, onChange?, refresh?}
+ * @returns {Promise<{ready: Promise<void>, validate(): string, values(): Object<string, object>, answers(): object, extFor(): object,
+ *                    after(booking): Promise<void>, dirty(): boolean, serviceChanged(service): void, destroy(): void}>}
+ */
+export function mountSections(box, kind, {boot, service = null, booking = null, onChange = () => {}, refresh = () => {}}) {
+    const mounted = [];   // {owner, api}
+    const listeners = [];
+    let gone = false;
+    const entries = (boot?.sections || []).filter(s => s && typeof s[kind] === 'string' && s[kind].startsWith(`/plugins/${s.owner}/`));
+
+    const ready = (async () => {
+        if (!entries.length) return;
+        const kit = await loadKit();
+        for (const entry of entries) {
+            if (gone) return;
+            const el = document.createElement('section');
+            el.className = 'bk-ext';
+            el.dataset.owner = entry.owner;
+            box.appendChild(el);
+            const ctx = {
+                kind, owner: entry.owner, service, booking,
+                onServiceChange: (fn) => { if (typeof fn === 'function') listeners.push(fn); },
+                bookables: boot.bookables, services: boot.services, settings: boot.settings,
+                api: sectionApi, kit, helpPopovers: (el2) => kit.helpPopovers(el2), onChange, refresh
+            };
+            try {
+                const mod = await import(entry[kind]);
+                if (gone) return;
+                const mount = mod.mount || mod.default?.mount;
+                if (typeof mount !== 'function') throw new Error('no mount()');
+                const api = (await mount(el, ctx)) || {};
+                if (gone) { try { api.destroy?.(); } catch { /* never */ } return; }
+                mounted.push({owner: entry.owner, api});
+                window.I?.scan?.(el);
+            } catch (err) {
+                console.warn(`[booking] ${entry.owner} section (${kind}) could not load:`, err);
+                say(el, `This part (from ${entry.owner}) could not be loaded just now.`);
+            }
+        }
+    })();
+
+    const call = (m, name, ...args) => { try { return m.api[name]?.(...args); } catch (err) { console.warn(`[booking] ${m.owner}.${name}:`, err); return undefined; } };
+
+    return {
+        ready,
+        /** The first problem any section reports, or ''. */
+        validate() {
+            for (const m of mounted) {
+                const why = call(m, 'validate');
+                if (typeof why === 'string' && why) return why;
+            }
+            return '';
+        },
+        /** {owner: values()} for every section that gives any. */
+        values() {
+            const out = {};
+            for (const m of mounted) {
+                const v = call(m, 'values');
+                if (v && typeof v === 'object') out[m.owner] = v;
+            }
+            return out;
+        },
+        /** newBooking: every section's answers, merged. */
+        answers() {
+            const out = {};
+            for (const v of Object.values(this.values())) if (v.answers && typeof v.answers === 'object') Object.assign(out, v.answers);
+            return out;
+        },
+        /** newBooking: {owner: ext} for body.ext. */
+        extFor() {
+            const out = {};
+            for (const [owner, v] of Object.entries(this.values())) if (v.ext && typeof v.ext === 'object') out[owner] = v.ext;
+            return out;
+        },
+        async after(b) {
+            for (const m of mounted) {
+                if (typeof m.api.after !== 'function') continue;
+                try { await m.api.after(b); } catch (err) {
+                    E.toast(`Booked, but ${m.owner} could not finish: ${err?.message || err}`, {type: 'warning', duration: 8000});
+                }
+            }
+        },
+        dirty: () => mounted.some(m => call(m, 'dirty') === true),
+        serviceChanged(svc) {
+            for (const fn of listeners) { try { fn(svc || null); } catch (err) { console.warn('[booking] onServiceChange:', err); } }
+        },
+        destroy() {
+            gone = true;
+            for (const m of mounted) call(m, 'destroy');
+            mounted.length = 0;
+        }
+    };
+}