domma-cms 1.6.37 → 1.6.39

package/plugins/blog/tests/cache.test.js

@@ -0,0 +1,65 @@
+/**
+ * Blog - the short memory behind the public pages and the badge (lib/cache.js),
+ * and the rule that matters: a write is seen by the very next read.
+ */
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import Fastify from 'fastify';
+import {createCache} from '../lib/cache.js';
+
+test('a read is shared for the cache window, then read again', async () => {
+    let now = 0;
+    let reads = 0;
+    const c = createCache({ttl: 30_000, clock: () => now});
+    const load = async () => { reads++; return ['post']; };
+    const [a, b] = await Promise.all([c.get('posts', load), c.get('posts', load)]);
+    assert.equal(reads, 1, 'concurrent misses share one read');
+    assert.equal(a, b, 'the same array - callers must not change it in place');
+    now = 29_999;
+    await c.get('posts', load);
+    assert.equal(reads, 1);
+    now = 30_000;
+    await c.get('posts', load);
+    assert.equal(reads, 2, 'the window passed: read again');
+});
+
+test('forget() retires every key, and a read in flight when the write landed is not kept', async () => {
+    const c = createCache({ttl: 60_000});
+    let value = 'old';
+    let release;
+    const slow = () => new Promise(r => { release = r; });
+    const inFlight = c.get('posts', slow);
+    await c.get('categories', async () => ['cat']);
+    assert.equal(c.size, 2);
+    // The write finishes while the read is still on its way.
+    value = 'new';
+    c.forget();
+    release('old');
+    assert.equal(await inFlight, 'old', 'the caller who started before the write still gets what they read');
+    assert.equal(await c.get('posts', async () => value), 'new', 'the next read is fresh, not the stale one');
+    assert.deepEqual(await c.get('categories', async () => ['fresh']), ['fresh']);
+});
+
+test('a failed read is not remembered', async () => {
+    const c = createCache();
+    await assert.rejects(() => c.get('posts', async () => { throw new Error('adapter down'); }), /adapter down/);
+    assert.equal(c.size, 0);
+    assert.deepEqual(await c.get('posts', async () => ['ok']), ['ok']);
+});
+
+test('the plugin forgets on every write route, before the writer\'s response leaves', async () => {
+    // The hook as plugin.js registers it, on a stand-in app: the point under test
+    // is the method rule and that it fires in onSend (the writer's next read is fresh).
+    const c = createCache();
+    const app = Fastify();
+    app.addHook('onSend', async (request) => { if (request.method !== 'GET' && request.method !== 'HEAD') c.forget(); });
+    app.get('/posts', async () => c.get('posts', async () => ({at: Date.now()})));
+    app.put('/posts/1', async () => ({ok: true}));
+    await c.get('posts', async () => 'stale');
+    assert.equal(c.size, 1);
+    await app.inject({method: 'GET', url: '/posts'});
+    assert.equal(c.size, 1, 'a GET keeps the memory');
+    await app.inject({method: 'PUT', url: '/posts/1', payload: {}});
+    assert.equal(c.size, 0, 'a write retires it');
+    await app.close();
+});

package/plugins/booking/CLAUDE.md

@@ -17,8 +17,8 @@ Calendar events block their times (read from `calendar-occurrences` / `calendar-
 service - no import of the Calendar, which is a separate paid Tool).
 
 `tier: free`, ships with the engine, disabled on arrival. Plan and phases: `dcms-marketplace/docs/booking-plan.md`.
-Booking Pro (not yet built) is an ADD-ON that registers into this one (`lib/extensions.js`), the Cart / Cart Pro
-pattern - it does not supersede it. Payment is Pro only.
+Booking Pro (marketplace `booking-pro`, 0.4.x) is an ADD-ON that registers into this one (`lib/extensions.js`), the
+Cart / Cart Pro pattern - it does not supersede it. Neither takes payment yet.
 
 1.6.0 (2026-09-30): "Add people" in an online booking's call (core with `server/services/callInvites.js` and
 `_lib/call/invite.js`; both imported dynamically - lib/call.js by top-level `await import`, plugin.js beside
@@ -168,3 +168,15 @@ only to roles that hold it.
   the run (restored after) and forges a Host to prove it.
 - The API tests create contacts in domma-cms's `content/collections/contacts-contacts/data.json` (tracked) - they
   snapshot and restore it; a crashed run can leave it changed: `git checkout` it in domma-cms.
+
+## 1.6.4 (2026-10-13 Tool sweep, upgrades)
+- The Diary is domma-reactive end to end: heads, hour gutter and columns are keyed `data-each` lists (`HEAD`, `HOUR`,
+  `COL` in diary.js; each column's open bands and blocks are `{{#each}}` inside it). One `draw` effect works out every
+  measure as a CSS length (`blockRow`) and the markup only binds; the empty state, "add a service" tip and first-run
+  checklist (`STEP`) are bound too. Kebab / right-click / Shift+F10 still come from `wireRows(gridBox, {match: '.bk-block'})`
+  (delegated, so re-rendered blocks need no rewiring). `mergeWindows` moved to admin/lib/diary-layout.js (tested).
+- Settings > Closed days (`CLOSURE_ROW`) and a person's opening hours / days off (`DAY_ROW` with a nested
+  `{{#each windows}}`, `OFF_ROW`) are keyed lists of per-field observables; `hoursOut` / `daysOffOut` / `closuresOut`
+  turn them back into plain data for the dirty snapshot and the save. A "from" after the "to" still pulls "to" along.
+- Icons in rows added after binding are drawn by `I.scan` after a flush (`rescan`), because new rows arrive after
+  the panel's first scan.

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

@@ -138,3 +138,21 @@ export function columnItems(bookings, {bookableId = ''} = {}) {
     }
     return [...groups.values()].map(g => ({...g, session: g.bookings.length > 1}));
 }
+
+/**
+ * Opening windows (minutes) merged where they touch or overlap - the week view's one band per day for everyone.
+ * Moved here from diary.js (1.6.4) so it is tested with the rest of the geometry.
+ *
+ * @param   {{from: number, to: number}[]} list
+ * @returns {{from: number, to: number}[]} sorted, non-overlapping copies
+ */
+export function mergeWindows(list) {
+    const sorted = [...(list || [])].sort((a, b) => a.from - b.from);
+    const out = [];
+    for (const w of sorted) {
+        const last = out[out.length - 1];
+        if (last && w.from <= last.to) last.to = Math.max(last.to, w.to);
+        else out.push({...w});
+    }
+    return out;
+}

package/plugins/booking/admin/views/diary.js

@@ -6,10 +6,14 @@
  * is shaded. A booking is a block: click opens it, right-click / ⋮ /
  * Shift+F10 is its menu. Click an empty time to book it. The first time
  * round, a checklist says what to set up.
+ *
+ * domma-reactive throughout: the heads, the hour gutter and the columns (each
+ * with its open bands and blocks) are keyed lists fed from one `draw` effect
+ * that works the geometry out in JS (diary-layout.js); the markup only binds.
  */
 
 import {STATUS_LABEL, V, api, copy, errText, esc, openPanel, store, wireRows} from '../lib/kit.js';
-import {columnItems, dayLabel, datesFor, gridHours, layoutColumn, minuteAt, placeOf} from '../lib/diary-layout.js';
+import {columnItems, dayLabel, datesFor, gridHours, layoutColumn, mergeWindows, minuteAt, placeOf} from '../lib/diary-layout.js';
 import {withNames} from '../lib/details.js';
 import {addDays, atWallClock, fromMinutes, isDate, wallClock} from '/plugins/booking/public/lib/time.js';
 import {windowsOn} from '/plugins/booking/public/lib/slots.js';
@@ -18,6 +22,37 @@ const PX_PER_MIN = 1;   // an hour is 60px
 const VIEW_KEY = 'booking.diary-view';
 const CANCELLED_KEY = 'booking.diary-cancelled';
 const CHECKLIST_KEY = 'booking.checklist-hidden';
+const STATUS_NOTE = {completed: 'done', 'no-show': 'no-show', cancelled: 'cancelled', pending: 'pending'};
+
+// A first-run step. The two icon wrappers swap with `done` (I.scan replaces the icon span itself).
+const STEP = `
+<li data-bind-class="done && 'is-done'">
+  <span class="bk-step-icon" data-bind-hidden="!done"><span data-icon="check-circle" data-icon-size="14"></span></span>
+  <span class="bk-step-icon" data-bind-hidden="done"><span data-icon="circle" data-icon-size="14"></span></span>
+  <button type="button" class="bk-link" data-on-click="$parent.step($data)" data-bind-text="text"></button>
+</li>`;
+
+// A column heading: a person or room (day view) or a day (week view, a link to it).
+const HEAD = `
+<div class="bk-col-head" data-bind-class="cls" data-bind-data-colour="colour" data-bind-data-date="date" data-bind-title="tip">
+  <span class="bk-kind" data-bind-hidden="kind !== 'person'"><span data-icon="user" data-icon-size="13"></span></span>
+  <span class="bk-kind" data-bind-hidden="kind !== 'resource'"><span data-icon="box" data-icon-size="13"></span></span>
+  <span data-bind-text="title"></span>
+</div>`;
+
+const HOUR = `<span data-bind-style-top="top" data-bind-text="text"></span>`;
+
+// A column: its open bands, the now line and its blocks. Every measure is a CSS length worked out in draw().
+const COL = `
+<div class="bk-col" data-bind-data-date="date" data-bind-data-bookable="bookableId" title="Click an empty time to book it">
+  {{#each windows key=id}}<div class="bk-open" data-bind-style-top="top" data-bind-style-background-position-y="bgY" data-bind-style-height="height"></div>{{/each}}
+  <div class="bk-now" data-bind-hidden="!nowTop" data-bind-style-top="nowTop"></div>
+  {{#each blocks key=id}}<div class="bk-block" data-bind-data-id="id" data-bind-class="cls" data-bind-data-colour="colour" data-bind-title="tip" tabindex="0" role="button"
+      data-bind-style-top="top" data-bind-style-height="height" data-bind-style-left="left" data-bind-style-width="width">
+    <button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
+    <strong data-bind-text="head"></strong><small data-bind-text="sub"></small>
+  </div>{{/each}}
+</div>`;
 
 export async function mount(root, ctx) {
     const {kit, scope, here, boot} = ctx;
@@ -33,6 +68,16 @@ export async function mount(root, ctx) {
     const loading = M.observable(true);
     const error = M.observable('');
     const label = M.observable('');
+    // What the grid shows, as rows for the keyed lists.
+    const hasBookables = M.observable(boot.bookables.length > 0);
+    const hasServices = M.observable(boot.services.length > 0);
+    const heads = M.observable([]);
+    const hours = M.observable([]);
+    const cols = M.observable([]);
+    const gridCols = M.observable('1');
+    const gridH = M.observable('0px');
+    const steps = M.observable([]);
+    const checklistOn = M.observable(false);
     scope(M.effect(() => store.set(VIEW_KEY, view.value)));
     scope(M.effect(() => store.set(CANCELLED_KEY, showCancelled.value)));
 
@@ -40,7 +85,11 @@ export async function mount(root, ctx) {
     const card = document.createElement('div');
     card.className = 'bk-card bk-diary';
     card.innerHTML = `
-<div class="bk-checklist" data-part="checklist" hidden></div>
+<div class="bk-checklist" data-bind-hidden="!checklistOn.value">
+  <header><h3><span data-icon="clipboard-list" data-icon-size="15"></span> Getting started</h3>
+    <button type="button" class="btn btn-xs btn-ghost" data-on-click="hideChecklist" title="Hide this list">Hide</button></header>
+  <ol data-each="steps.value key=id">${STEP}</ol>
+</div>
 <div class="bk-bar">
   <div class="bk-seg" role="group" aria-label="View">
     <button type="button" data-view="day" data-bind-class="view.value === 'day' && 'is-on'">Day</button>
@@ -58,16 +107,37 @@ export async function mount(root, ctx) {
   <span data-help-title="The Diary" data-help="Bookings in your business's time zone (${esc(ctx.tz)}). Hatched times are outside opening hours. Click a booking to open it; right-click it (or ⋮, or Shift+F10) for Move, Done, No-show and Cancel. Click an empty time to book it. Keys: ← → earlier and later, T today, D day, W week."></span>
 </div>
 <p class="bk-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
-<div class="bk-diary-wrap" data-part="grid" tabindex="-1"></div>`;
+<div class="bk-diary-wrap" data-part="grid" tabindex="-1">
+  <div class="bk-empty" data-bind-hidden="hasBookables.value"><span data-icon="users" data-icon-size="28"></span>
+    <p><strong>Add who or what can be booked.</strong><br>A person (for appointments) or a room or thing - each with their opening hours.</p>
+    <button type="button" class="btn btn-sm btn-primary" data-on-click="addPerson"><span data-icon="plus" data-icon-size="13"></span> Add a person or room</button></div>
+  <p class="bk-note" data-bind-hidden="!hasBookables.value || hasServices.value">Next: <button type="button" class="bk-link" data-on-click="addService">add a service</button> - what can be booked, for how long, and with whom.</p>
+  <div class="bk-diary-grid" data-bind-hidden="!hasBookables.value" data-bind-class="'is-' + view.value"
+       data-bind-style---bk-cols="gridCols.value" data-bind-style---bk-h="gridH.value" style="--bk-hour: ${60 * PX_PER_MIN}px">
+    <div class="bk-diary-head" data-part="heads"><span></span><div class="bk-heads" data-each="heads.value key=key">${HEAD}</div></div>
+    <div class="bk-diary-body">
+      <div class="bk-gutter" data-each="hours.value key=id">${HOUR}</div>
+      <div class="bk-cols" data-each="cols.value key=key">${COL}</div>
+    </div>
+  </div>
+</div>`;
     root.appendChild(card);
     const gridBox = card.querySelector('[data-part="grid"]');
     const dateIn = card.querySelector('[data-part="date"]');
     const cancelledBox = card.querySelector('[data-part="cancelled"]');
-    const checklist = card.querySelector('[data-part="checklist"]');
     scope(kit.helpPopovers(card, {position: 'bottom'}));
-    const bindings = M.applyBindings({view, label, error}, card);
+    const model = {
+        view, label, error, hasBookables, hasServices, heads, hours, cols, gridCols, gridH, steps, checklistOn,
+        hideChecklist() { store.set(CHECKLIST_KEY, true); checklistOn.value = false; },
+        step(s) { s.go(); },
+        addPerson: () => ctx.go('people', 'new'),
+        addService: () => ctx.go('services', 'new')
+    };
+    const bindings = M.applyBindings(model, card);
     scope(() => bindings.dispose());
     I.scan(card);
+    // Heads come and go with the view; their icons are drawn once the rows are in.
+    scope(M.effect(() => { heads.value; steps.value; requestAnimationFrame(() => { if (card.isConnected) I.scan(card); }); }));
 
     cancelledBox.checked = showCancelled.peek();
     cancelledBox.addEventListener('change', () => { showCancelled.value = cancelledBox.checked; });
@@ -84,6 +154,11 @@ export async function mount(root, ctx) {
         const s = e.target.closest('[data-step]');
         if (s) step(Number(s.dataset.step));
     });
+    // A week head is a link to its day.
+    card.querySelector('[data-part="heads"]').addEventListener('click', (e) => {
+        const h = e.target.closest('.bk-col-head[data-date]');
+        if (h) { date.value = h.dataset.date; view.value = 'day'; }
+    });
     const onKey = (e) => {
         if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
         if (e.target.closest('input, textarea, select, [contenteditable], .dm-slideover, [role="dialog"]')) return;
@@ -103,28 +178,16 @@ export async function mount(root, ctx) {
     // ---- The first-run checklist --------------------------------------------------
 
     function drawChecklist() {
-        const steps = [
-            {done: boot.bookables.length > 0, text: 'Add who or what can be booked - a person or a room', go: () => ctx.go('people', 'new')},
-            {done: boot.services.length > 0, text: 'Add a service: what can be booked, for how long, and with whom', go: () => ctx.go('services', 'new')},
-            {done: store.get('booking.settings-seen') === true, text: boot.mailReady ? 'Check the settings: your booking page, notice rules and emails' : 'Check the settings - and set up outgoing mail, or no confirmation emails are sent',
+        const list = [
+            {id: 'people', done: boot.bookables.length > 0, text: 'Add who or what can be booked - a person or a room', go: () => ctx.go('people', 'new')},
+            {id: 'services', done: boot.services.length > 0, text: 'Add a service: what can be booked, for how long, and with whom', go: () => ctx.go('services', 'new')},
+            {id: 'settings', done: store.get('booking.settings-seen') === true, text: boot.mailReady ? 'Check the settings: your booking page, notice rules and emails' : 'Check the settings - and set up outgoing mail, or no confirmation emails are sent',
                 go: () => { store.set('booking.settings-seen', true); ctx.openSettings(); drawChecklist(); }},
-            {done: store.get('booking.link-shared') === true, text: `Share your booking page: ${location.origin}${ctx.settings.bookingPath}`,
+            {id: 'share', done: store.get('booking.link-shared') === true, text: `Share your booking page: ${location.origin}${ctx.settings.bookingPath}`,
                 go: () => { store.set('booking.link-shared', true); copy(`${location.origin}${ctx.settings.bookingPath}`, 'Booking page address copied'); drawChecklist(); }}
         ];
-        const left = steps.filter(s => !s.done).length;
-        if (!left || store.get(CHECKLIST_KEY) === true) { checklist.hidden = true; return; }
-        checklist.hidden = false;
-        checklist.innerHTML = `
-<header><h3><span data-icon="clipboard-list" data-icon-size="15"></span> Getting started</h3>
-  <button type="button" class="btn btn-xs btn-ghost" data-hide title="Hide this list">Hide</button></header>
-<ol>${steps.map((s, i) => `<li class="${s.done ? 'is-done' : ''}"><span data-icon="${s.done ? 'check-circle' : 'circle'}" data-icon-size="14"></span>
-  <button type="button" class="bk-link" data-step-i="${i}">${esc(s.text)}</button></li>`).join('')}</ol>`;
-        I.scan(checklist);
-        checklist.onclick = (e) => {
-            if (e.target.closest('[data-hide]')) { store.set(CHECKLIST_KEY, true); checklist.hidden = true; return; }
-            const i = e.target.closest('[data-step-i]')?.dataset.stepI;
-            if (i !== undefined) steps[Number(i)].go();
-        };
+        steps.value = list;
+        checklistOn.value = list.some(s => !s.done) && store.get(CHECKLIST_KEY) !== true;
     }
     drawChecklist();
 
@@ -168,134 +231,84 @@ export async function mount(root, ctx) {
             windows: windowsOn(b, d, ctx.settings.closures)}));
     }
 
+    const px = (n) => `${n}px`;
+
+    /** One block's row: where it sits and what it says. */
+    function blockRow(p, {from, to, week, colours}) {
+        const b = p.b;
+        let id = b.id;
+        if (p.session) { sessions.set(p.key, p.bookings); id = `session:${p.key}`; }
+        const s = wallClock(b.startAt, ctx.tz).time;
+        const e = wallClock(b.endAt, ctx.tz).time;
+        const time = week ? s : `${s}-${e}`;
+        const statusNote = b.status !== 'confirmed' ? ` · ${STATUS_NOTE[b.status] || b.status}` : '';
+        let head;
+        let sub;
+        let tip;
+        if (p.session) {
+            // A class: one block for everyone in it.
+            head = `${time} ${b.serviceName} · ${p.bookings.length} booked`;
+            sub = `${p.companion ? `with ${b.bookableName}` : p.bookings.map(x => x.name).join(', ')}${week && b.bookableName ? ` · ${b.bookableName}` : ''}`;
+            tip = `${s}-${e} ${b.serviceName}: ${p.bookings.length} booked${b.bookableName ? ` (with ${withNames(b)})` : ''}`;
+        } else if (p.companion) {
+            // Held along with someone else's booking (a court with the trainer).
+            head = `${time} ${b.name}`;
+            sub = `${b.serviceName} · with ${b.bookableName}${statusNote}`;
+            tip = `${s}-${e} ${b.serviceName}: ${b.name} - held with ${b.bookableName}'s booking`;
+        } else {
+            head = `${time} ${b.name}`;
+            sub = `${b.serviceName}${week && b.bookableName ? ` · ${withNames(b)}` : b.alsoNames?.length ? ` · with ${b.alsoNames.join(', ')}` : ''}${statusNote}`;
+            tip = `${s}-${e} ${b.serviceName}: ${b.name}${withNames(b) ? ` (with ${withNames(b)})` : ''}`;
+        }
+        return {
+            id, head, sub, tip,
+            cls: `is-${b.status}${p.companion ? ' is-companion' : ''}${p.session ? ' is-session' : ''}`,
+            colour: colours.get(b.bookableId) || 'grey',
+            top: px((Math.max(p.startMin, from) - from) * PX_PER_MIN),
+            height: px(Math.max(18, (Math.min(p.endMin, to) - Math.max(p.startMin, from)) * PX_PER_MIN - 2)),
+            left: `calc(${(p.lane / p.lanes) * 100}% + 2px)`,
+            width: `calc(${100 / p.lanes}% - 4px)`
+        };
+    }
+
     function draw() {
         const list = bookings.value.filter(b => showCancelled.value || b.status !== 'cancelled');
+        const week = view.value === 'week';
         const ds = datesFor(view.value, date.value);
-        label.value = view.value === 'week' ? `${dayLabel(ds[0])} - ${dayLabel(ds[6])} ${ds[6].slice(0, 4)}` : `${dayLabel(ds[0])} ${ds[0].slice(0, 4)}`;
-        const cols = columns();
-        gridBox.innerHTML = '';
-        if (!boot.bookables.length) {
-            gridBox.innerHTML = `<div class="bk-empty"><span data-icon="users" data-icon-size="28"></span>
-  <p><strong>Add who or what can be booked.</strong><br>A person (for appointments) or a room or thing - each with their opening hours.</p>
-  <button type="button" class="btn btn-sm btn-primary" data-go="people"><span data-icon="plus" data-icon-size="13"></span> Add a person or room</button></div>`;
-            gridBox.querySelector('[data-go]').onclick = () => ctx.go('people', 'new');
-            I.scan(gridBox);
-            return;
-        }
-        const colours = new Map(boot.bookables.map(b => [b.id, b.colour || 'blue']));
+        label.value = week ? `${dayLabel(ds[0])} - ${dayLabel(ds[6])} ${ds[6].slice(0, 4)}` : `${dayLabel(ds[0])} ${ds[0].slice(0, 4)}`;
+        hasBookables.value = boot.bookables.length > 0;
+        hasServices.value = boot.services.length > 0;
         sessions.clear();
+        if (!boot.bookables.length) { heads.value = []; hours.value = []; cols.value = []; return; }
+        const defs = columns();
+        const colours = new Map(boot.bookables.map(b => [b.id, b.colour || 'blue']));
         const placed = list.map(b => ({b, ...placeOf(b, ctx.tz)})).filter(p => ds.includes(p.date));
         const {from, to} = gridHours(boot.bookables.filter(b => b.active !== false), ds, placed);
-        const height = (to - from) * PX_PER_MIN;
-
-        const grid = document.createElement('div');
-        grid.className = `bk-diary-grid is-${view.value}`;
-        grid.style.setProperty('--bk-cols', String(cols.length));
-        grid.style.setProperty('--bk-h', `${height}px`);
-        grid.style.setProperty('--bk-hour', `${60 * PX_PER_MIN}px`);
-
-        // Heads
-        const head = document.createElement('div');
-        head.className = 'bk-diary-head';
-        head.appendChild(document.createElement('span'));
-        for (const c of cols) {
-            const h = document.createElement('div');
-            h.className = `bk-col-head${c.today && view.value === 'week' ? ' is-today' : ''}`;
-            if (c.colour) h.dataset.colour = c.colour;
-            h.innerHTML = `${c.kind ? `<span data-icon="${c.kind === 'resource' ? 'box' : 'user'}" data-icon-size="13"></span> ` : ''}<span>${esc(c.title)}</span>`;
-            if (view.value === 'week') { h.classList.add('bk-link-head'); h.title = 'Show this day'; h.onclick = () => { date.value = c.date; view.value = 'day'; }; }
-            head.appendChild(h);
-        }
-        grid.appendChild(head);
+        gridCols.value = String(defs.length);
+        gridH.value = px((to - from) * PX_PER_MIN);
 
-        // Time gutter + columns
-        const bodyRow = document.createElement('div');
-        bodyRow.className = 'bk-diary-body';
-        const gutter = document.createElement('div');
-        gutter.className = 'bk-gutter';
-        for (let m = from; m < to; m += 60) {
-            const t = document.createElement('span');
-            t.style.top = `${(m - from) * PX_PER_MIN}px`;
-            t.textContent = fromMinutes(m);
-            gutter.appendChild(t);
-        }
-        bodyRow.appendChild(gutter);
+        heads.value = defs.map(c => ({
+            key: c.key, title: c.title, kind: c.kind || '', colour: c.colour || false,
+            cls: [c.today && week ? 'is-today' : '', week ? 'bk-link-head' : ''].filter(Boolean).join(' '),
+            date: week ? c.date : false, tip: week ? 'Show this day' : false
+        }));
+        const gutter = [];
+        for (let m = from; m < to; m += 60) gutter.push({id: m, top: px((m - from) * PX_PER_MIN), text: fromMinutes(m)});
+        hours.value = gutter;
 
         const nowWall = wallClock(Date.now(), ctx.tz);
-        for (const c of cols) {
-            const col = document.createElement('div');
-            col.className = 'bk-col';
-            col.dataset.date = c.date;
-            if (c.bookableId) col.dataset.bookable = c.bookableId;
-            col.title = 'Click an empty time to book it';
-            for (const w of c.windows) {
-                const band = document.createElement('div');
-                band.className = 'bk-open';
+        cols.value = defs.map(c => {
+            const windows = c.windows.map((w, i) => {
+                // The band keeps its hour lines on the column's.
                 const bandTop = (Math.max(w.from, from) - from) * PX_PER_MIN;
-                band.style.top = `${bandTop}px`;
-                // Keep its hour lines on the column's.
-                band.style.backgroundPositionY = `${-bandTop}px`;
-                band.style.height = `${(Math.min(w.to, to) - Math.max(w.from, from)) * PX_PER_MIN}px`;
-                col.appendChild(band);
-            }
-            if (c.date === nowWall.date && nowWall.minutes >= from && nowWall.minutes <= to) {
-                const line = document.createElement('div');
-                line.className = 'bk-now';
-                line.style.top = `${(nowWall.minutes - from) * PX_PER_MIN}px`;
-                col.appendChild(line);
-            }
+                return {id: `w${i}`, top: px(bandTop), bgY: px(-bandTop), height: px((Math.min(w.to, to) - Math.max(w.from, from)) * PX_PER_MIN)};
+            });
+            const nowTop = c.date === nowWall.date && nowWall.minutes >= from && nowWall.minutes <= to ? px((nowWall.minutes - from) * PX_PER_MIN) : '';
             const dayBookings = placed.filter(p => p.date === c.date).map(p => p.b);
             const items = columnItems(dayBookings, {bookableId: c.bookableId || ''}).map(it => ({...it, ...placeOf(it.b, ctx.tz)}));
-            for (const p of layoutColumn(items)) {
-                const b = p.b;
-                const el = document.createElement('div');
-                el.className = `bk-block is-${b.status}${p.companion ? ' is-companion' : ''}${p.session ? ' is-session' : ''}`;
-                if (p.session) {
-                    sessions.set(p.key, p.bookings);
-                    el.dataset.id = `session:${p.key}`;
-                } else {
-                    el.dataset.id = b.id;
-                }
-                el.dataset.colour = colours.get(b.bookableId) || 'grey';
-                el.tabIndex = 0;
-                el.setAttribute('role', 'button');
-                const top = (Math.max(p.startMin, from) - from) * PX_PER_MIN;
-                el.style.top = `${top}px`;
-                el.style.height = `${Math.max(18, (Math.min(p.endMin, to) - Math.max(p.startMin, from)) * PX_PER_MIN - 2)}px`;
-                el.style.left = `calc(${(p.lane / p.lanes) * 100}% + 2px)`;
-                el.style.width = `calc(${100 / p.lanes}% - 4px)`;
-                const s = wallClock(b.startAt, ctx.tz).time;
-                const e = wallClock(b.endAt, ctx.tz).time;
-                const time = view.value === 'week' ? esc(s) : `${esc(s)}-${esc(e)}`;
-                const statusNote = b.status !== 'confirmed' ? ` · ${esc({completed: 'done', 'no-show': 'no-show', cancelled: 'cancelled', pending: 'pending'}[b.status] || b.status)}` : '';
-                if (p.session) {
-                    // A class: one block for everyone in it.
-                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
-<strong>${time} ${esc(b.serviceName)} · ${p.bookings.length} booked</strong><small>${p.companion ? `with ${esc(b.bookableName)}` : esc(p.bookings.map(x => x.name).join(', '))}${view.value === 'week' && b.bookableName ? ` · ${esc(b.bookableName)}` : ''}</small>`;
-                    el.title = `${s}-${e} ${b.serviceName}: ${p.bookings.length} booked${b.bookableName ? ` (with ${withNames(b)})` : ''}`;
-                } else if (p.companion) {
-                    // Held along with someone else's booking (a court with the trainer).
-                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
-<strong>${time} ${esc(b.name)}</strong><small>${esc(b.serviceName)} · with ${esc(b.bookableName)}${statusNote}</small>`;
-                    el.title = `${s}-${e} ${b.serviceName}: ${b.name} - held with ${b.bookableName}'s booking`;
-                } else {
-                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
-<strong>${time} ${esc(b.name)}</strong><small>${esc(b.serviceName)}${view.value === 'week' && b.bookableName ? ` · ${esc(withNames(b))}` : b.alsoNames?.length ? ` · with ${esc(b.alsoNames.join(', '))}` : ''}${statusNote}</small>`;
-                    el.title = `${s}-${e} ${b.serviceName}: ${b.name}${withNames(b) ? ` (with ${withNames(b)})` : ''}`;
-                }
-                col.appendChild(el);
-            }
-            bodyRow.appendChild(col);
-        }
-        grid.appendChild(bodyRow);
-        gridBox.appendChild(grid);
-        if (!boot.services.length) {
-            const tip = document.createElement('p');
-            tip.className = 'bk-note';
-            tip.innerHTML = 'Next: <button type="button" class="bk-link">add a service</button> - what can be booked, for how long, and with whom.';
-            tip.querySelector('button').onclick = () => ctx.go('services', 'new');
-            gridBox.prepend(tip);
-        }
+            const blocks = layoutColumn(items).map(p => blockRow(p, {from, to, week, colours}));
+            return {key: c.key, date: c.date, bookableId: c.bookableId || false, windows, nowTop, blocks};
+        });
     }
     scope(M.effect(draw));
 
@@ -360,15 +373,3 @@ export async function mount(root, ctx) {
 
     return () => {};
 }
-
-function mergeWindows(list) {
-    const sorted = [...list].sort((a, b) => a.from - b.from);
-    const out = [];
-    for (const w of sorted) {
-        const last = out[out.length - 1];
-        if (last && w.from <= last.to) last.to = Math.max(last.to, w.to);
-        else out.push({...w});
-    }
-    return out;
-}
-