domma-cms 1.6.56 → 1.6.57

package/plugins/blog/admin/views/settings.js

@@ -23,10 +23,24 @@ export const settingsView = {
         const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
         const add = kit.viewScope('settings', /^#\/plugins\/blog\/settings\b/);
 
+        const here = add.here;
         const host = $container.find('#settings-form').get(0);
         if (!host) return;
-        const {el, dispose} = await kit.settingsPanel();
-        host.appendChild(el);
-        add(dispose);
+        const panel = await kit.settingsPanel();
+        if (!here()) { panel.dispose(); return; }
+        host.appendChild(panel.el);
+        // Left with unsaved changes: kept as a draft, offered back next time
+        // (here or in the cog's slideover - it is one form).
+        // Keeping it twice (a reload the person then cancelled, then leaving) is harmless.
+        const onUnload = (e) => { if (panel.isDirty()) { kit.keepSettingsDraft(panel); e.preventDefault(); e.returnValue = ''; } };
+        window.addEventListener('beforeunload', onUnload);
+        add(() => {
+            window.removeEventListener('beforeunload', onUnload);
+            if (kit.keepSettingsDraft(panel)) {
+                E.toast('Your unsaved settings are kept - open Blog settings again to pick them up.', {type: 'info'});
+            }
+        });
+        add(panel.dispose);
+        await kit.offerSettingsDraft(panel, here);
     }
 };

package/plugins/blog/plugin.js

@@ -393,7 +393,7 @@ export default async function blogPlugin(fastify, options) {
         });
         const html = await renderBlogPage(
             fileURLToPath(new URL('./templates/post.html', import.meta.url)),
-            { post: page.html, assetV: '1.9.7' },
+            { post: page.html, assetV: '1.10.0' },
             { title: post.title || 'Preview', description: post.excerpt || '', ogImage: safeImageUrl(post.featuredImage),
               usedComponents: page.usedComponents, urlPath: `${basePath}/${post.slug}`, noindex: true }
         );

package/plugins/blog/plugin.json

@@ -1,11 +1,11 @@
 {
   "name": "blog",
   "displayName": "Blog",
-  "version": "1.9.7",
+  "version": "1.10.0",
   "tier": "free",
   "description": "Public-facing blog with posts, categories and comments - layouts and listings built from editable blocks.",
   "author": "Domma CMS",
-  "date": "2026-10-13",
+  "date": "2026-10-15",
   "icon": "file-text",
   "admin": {
     "css": [
@@ -79,23 +79,23 @@
     ],
     "views": {
       "plugin-blog-posts": {
-        "entry": "blog/admin/views/blog.js?v=10",
+        "entry": "blog/admin/views/blog.js?v=11",
         "exportName": "blogView"
       },
       "plugin-blog-post-editor": {
-        "entry": "blog/admin/views/post-editor.js?v=10",
+        "entry": "blog/admin/views/post-editor.js?v=11",
         "exportName": "postEditorView"
       },
       "plugin-blog-categories": {
-        "entry": "blog/admin/views/categories.js?v=9",
+        "entry": "blog/admin/views/categories.js?v=10",
         "exportName": "categoriesView"
       },
       "plugin-blog-comments": {
-        "entry": "blog/admin/views/comments.js?v=10",
+        "entry": "blog/admin/views/comments.js?v=11",
         "exportName": "commentsView"
       },
       "plugin-blog-settings": {
-        "entry": "blog/admin/views/settings.js?v=9",
+        "entry": "blog/admin/views/settings.js?v=10",
         "exportName": "settingsView"
       }
     }

package/plugins/blog/plugin.public.js

@@ -24,7 +24,7 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url));
 const TEMPLATES_DIR = path.join(__dirname, 'templates');
 
 /** Bumped with the plugin, so a release is never served a stale script. */
-const ASSET_V = '1.9.7';
+const ASSET_V = '1.10.0';
 
 /**
  * Above this many posts a listing pages on the server instead: the browser

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

@@ -0,0 +1,50 @@
+/** Blog - kept drafts: versions, how a draft stands, the restore question (admin/lib/drafts.js). */
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {draftState, fingerprint, restoreQuestion, RESTORE_ANSWERS, stableJson, versionOf} from '../admin/lib/drafts.js';
+
+test('stable JSON ignores key order; a fingerprint follows the value', () => {
+    assert.equal(stableJson({b: 1, a: [1, {d: 2, c: 3}]}), stableJson({a: [1, {c: 3, d: 2}], b: 1}));
+    assert.equal(fingerprint({a: 1, b: 2}), fingerprint({b: 2, a: 1}));
+    assert.notEqual(fingerprint({a: 1}), fingerprint({a: 2}));
+});
+
+test('a version is the updatedAt, else a fingerprint of the fields that matter', () => {
+    assert.equal(versionOf({updatedAt: '2026-10-15T10:00:00Z', title: 'x'}), 'u:2026-10-15T10:00:00Z');
+    const cat = {name: 'News', slug: 'news', description: '', posts: 3};
+    const keys = ['name', 'slug', 'description'];
+    assert.equal(versionOf(cat, keys), versionOf({...cat, posts: 9}, keys));
+    assert.notEqual(versionOf(cat, keys), versionOf({...cat, name: 'Updates'}, keys));
+    assert.equal(versionOf(null), '');
+});
+
+test('a draft stands same, changed or deleted against the record now', () => {
+    const rec = {updatedAt: '2026-10-15T10:00:00Z'};
+    assert.equal(draftState(null, rec), 'none');
+    assert.equal(draftState({id: 'p1'}, rec), 'none');
+    assert.equal(draftState({id: null, values: {}}, null), 'same');
+    assert.equal(draftState({id: 'p1', values: {}, was: 'u:2026-10-15T10:00:00Z'}, rec), 'same');
+    assert.equal(draftState({id: 'p1', values: {}, was: 'u:2026-10-14T10:00:00Z'}, rec), 'changed');
+    assert.equal(draftState({id: 'p1', values: {}, was: 'u:x'}, null), 'deleted');
+    const c = {name: 'A'};
+    assert.equal(draftState({id: 'c', values: {}, was: versionOf(c, ['name'])}, {name: 'A', n: 4}, ['name']), 'same');
+    assert.equal(draftState({id: 'c', values: {}, was: versionOf(c, ['name'])}, {name: 'B'}, ['name']), 'changed');
+});
+
+test('a draft kept before `was` falls back to its time', () => {
+    const rec = {updatedAt: '2026-10-15T10:00:00Z'};
+    assert.equal(draftState({id: 'p', values: {}, at: '2026-10-14T00:00:00Z'}, rec), 'changed');
+    assert.equal(draftState({id: 'p', values: {}, at: '2026-10-16T00:00:00Z'}, rec), 'same');
+    assert.equal(draftState({id: 'p', values: {}}, rec), 'same');
+});
+
+test('the restore question makes OK the destructive answer and says what happened since', () => {
+    assert.equal(restoreQuestion({what: 'post', isNew: true, state: 'same'}),
+        'Throw away the changes you left unsaved to a new post?');
+    assert.match(restoreQuestion({what: 'post', name: 'Hello', state: 'changed'}),
+        /^Throw away the changes you left unsaved to the post "Hello"\? It has been saved since/);
+    assert.match(restoreQuestion({what: 'category', name: 'News', state: 'deleted'}),
+        /deleted since - keeping yours starts it again as a new category\.$/);
+    assert.equal(restoreQuestion({what: 'settings', state: 'same'}), 'Throw away the changes you left unsaved to the settings?');
+    assert.deepEqual({...RESTORE_ANSWERS}, {confirmText: 'Throw away', cancelText: 'Keep them'});
+});

package/plugins/booking/CLAUDE.md

@@ -180,3 +180,16 @@ only to roles that hold it.
   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.
+
+## 1.7.0 (2026-10-15 Tool Upgrade, second pass)
+
+- Slideovers: `openPanel({ctx, release, draft})` - the panel goes with the screen (`ctx.hold`), `claim(key)` stops it
+  opening twice (released if building the panel throws - it is built inside try/catch), and `methods.save` is locked
+  while it runs. `draft: {key, label, kind, values, apply(values, panel), was, prefilled, initial}` keeps typed work
+  per user (`booking.drafts.<user>`, 14 days, rules in `admin/lib/drafts.js`, tests/admin-drafts.test.js); `was` is
+  `updatedAt`, or `fingerprint()` for settings; a draft taken "as new" from a deleted record starts with `was: ''` and
+  waits while another new-record draft exists. `ask()` is an E.confirm that answers 'no' when the screen goes.
+- Restore questions put Discard on the CONFIRM button: Escape, the backdrop or leaving keep the draft (Domma's confirm
+  cannot tell Escape from Cancel). Booking Pro's sections are not drafted - the section contract cannot put values back.
+- First loads use core skeletons through `kit.whileLoading` (`.bk-loading-slot`) on the host, Bookings and the Diary.
+- No ContextMenu-key handler in wireRows: Windows Chrome opens its own menu on that key too. Shift+F10 only.

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

@@ -0,0 +1,139 @@
+/**
+ * Booking admin - drafts, the pure part (no DOM, no storage; tested in
+ * tests/admin-drafts.test.js). kit.js `openPanel({draft})` does the rest.
+ *
+ * A draft is what a slideover form held when it was left (the screen changed,
+ * the tab closed): `{values, at, was, label}`. `was` is the record as the form
+ * began - its `updatedAt`, or a `fingerprint()` of it when it has none (the
+ * settings) - so the next opening can say the record changed since. All of a
+ * person's drafts live in one stored map, keyed `service:<id|new>`,
+ * `bookable:<id|new>`, `new-booking`, `note:<booking id>`, `settings`.
+ *
+ * @module booking/admin/lib/drafts
+ */
+
+/** A draft older than this is not offered back. */
+export const DRAFT_MAX_DAYS = 14;
+
+/** JSON with object keys sorted, so equal data is equal text. */
+export function stableStringify(value) {
+    if (Array.isArray(value)) return `[${value.map(v => stableStringify(v === undefined ? null : v)).join(',')}]`;
+    if (value && typeof value === 'object') {
+        return `{${Object.keys(value).sort().filter(k => value[k] !== undefined)
+            .map(k => `${JSON.stringify(k)}:${stableStringify(value[k])}`).join(',')}}`;
+    }
+    return JSON.stringify(value ?? null);
+}
+
+/** A short, stable fingerprint of some data (FNV-1a over its stable JSON). */
+export function fingerprint(value) {
+    const s = stableStringify(value);
+    let h = 0x811c9dc5;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 0x01000193) >>> 0;
+    }
+    return `f${h.toString(36)}${s.length.toString(36)}`;
+}
+
+/**
+ * A stored draft, if it is one a form can use: `values` a plain object, not
+ * older than `maxAgeDays`. Anything else (an older build's, a hand-edited
+ * store) is not trusted.
+ *
+ * @returns {{values: object, at: string, was: string, label: string}|null}
+ */
+export function usableDraft(raw, {now = Date.now(), maxAgeDays = DRAFT_MAX_DAYS} = {}) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null;
+    const v = raw.values;
+    if (!v || typeof v !== 'object' || Array.isArray(v)) return null;
+    const at = Date.parse(raw.at);
+    if (!Number.isFinite(at) || now - at > maxAgeDays * 86_400_000) return null;
+    return {values: v, at: String(raw.at), was: typeof raw.was === 'string' ? raw.was : '', label: typeof raw.label === 'string' ? raw.label : ''};
+}
+
+/**
+ * What to do with a stored draft when a form opens.
+ *
+ *   'none'      no draft, or it holds just what the form opened with
+ *   'auto'      put it back and say so - the record is as it was
+ *   'changed'   ask: the record was saved by someone (or somewhere) since
+ *   'prefilled' ask: the form was opened for something specific (a contact,
+ *               a time clicked in the Diary), which the draft would replace
+ *
+ * @param {{draft: object|null, was?: string, opening?: object, prefilled?: boolean}} o
+ *   `was` - the record as the form opens now ('' for a new one); `opening` -
+ *   the values the form opened with.
+ */
+export function restorePlan({draft, was = '', opening, prefilled = false}) {
+    if (!draft) return 'none';
+    if (opening !== undefined && stableStringify(draft.values) === stableStringify(opening)) return 'none';
+    if ((draft.was || '') !== (was || '')) return 'changed';
+    return prefilled ? 'prefilled' : 'auto';
+}
+
+/** "3 min ago", "yesterday", "2 days ago". */
+export function agoText(at, now = Date.now()) {
+    const t = Date.parse(at);
+    if (!Number.isFinite(t)) return 'earlier';
+    const s = Math.max(0, (now - t) / 1000);
+    if (s < 60) return 'just now';
+    if (s < 3600) return `${Math.round(s / 60)} min ago`;
+    if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+    const d = Math.round(s / 86400);
+    return d === 1 ? 'yesterday' : `${d} days ago`;
+}
+
+/**
+ * The question (plain text - the caller escapes it) for a plan that asks, or
+ * the toast for 'auto'.
+ *
+ * @param {'auto'|'changed'|'prefilled'|'deleted'} plan
+ * @param {{label?: string, at?: string, now?: number, kind?: string}} o - `kind` names the form for 'prefilled' ("a new booking")
+ */
+export function restoreText(plan, {label = '', at = '', now = Date.now(), kind = 'something'} = {}) {
+    const to = label ? ` to “${label}”` : '';
+    const ago = agoText(at, now);
+    if (plan === 'auto') return `Unsaved changes from ${ago} put back${label ? ` (${label})` : ''}.`;
+    // The questions put DISCARD on the confirm button: Escape (and leaving) is Cancel, which keeps the work.
+    if (plan === 'changed') return `You left unsaved changes${to} ${ago}, and it has been saved since - by someone else, or in another tab. Discard your changes, or keep them over it (check them before saving)?`;
+    if (plan === 'deleted') return `You left unsaved changes${to} ${ago}, but it has been deleted since. Discard them, or start a new one from them?`;
+    if (plan === 'prefilled') return `You started ${kind}${label ? ` (${label})` : ''} ${ago} and did not finish it. Discard it and start this one, or carry on with it?`;
+    return '';
+}
+
+/** The map with `key` set to `draft` (a new object - stored maps are not changed in place). */
+export function draftsWith(map, key, draft) {
+    return {...(map && typeof map === 'object' && !Array.isArray(map) ? map : {}), [key]: draft};
+}
+
+/** The map without `key`. */
+export function draftsWithout(map, key) {
+    const out = {...(map && typeof map === 'object' && !Array.isArray(map) ? map : {})};
+    delete out[key];
+    return out;
+}
+
+/**
+ * Drafts under `prefix` (e.g. 'service:') whose record is gone - not 'new' and
+ * not one of `liveIds`. Unusable drafts are skipped.
+ *
+ * @returns {{key: string, id: string, draft: object}[]}
+ */
+export function orphanDrafts(map, prefix, liveIds, opts) {
+    const live = new Set(liveIds);
+    const out = [];
+    for (const [key, raw] of Object.entries(map && typeof map === 'object' ? map : {})) {
+        if (!key.startsWith(prefix)) continue;
+        const id = key.slice(prefix.length);
+        if (!id || id === 'new' || live.has(id)) continue;
+        const draft = usableDraft(raw, opts);
+        if (draft) out.push({key, id, draft});
+    }
+    return out;
+}
+
+/** Stored drafts past their age, to drop. */
+export function staleDraftKeys(map, opts) {
+    return Object.entries(map && typeof map === 'object' ? map : {}).filter(([, raw]) => !usableDraft(raw, opts)).map(([k]) => k);
+}

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

@@ -8,6 +8,7 @@
  */
 
 import {fmtDate, fmtDateTime} from '/plugins/_lib/admin/ui/dates.js';
+import {draftsWith, draftsWithout, restorePlan, restoreText, staleDraftKeys, usableDraft} from './drafts.js';
 
 export {fmtDate, fmtDateTime};
 
@@ -17,14 +18,15 @@ export const V = '1.4.0';
 
 let kit = null;
 
-/** tool-kit, plugin-chrome and help-popover, once, with stand-ins for an older admin. */
+/** tool-kit, plugin-chrome, help-popover and loading, once, with stand-ins for an older admin. */
 export function loadKit() {
     if (!kit) {
         kit = Promise.all([
             import('/admin/js/lib/tool-kit.js').catch(() => ({})),
             import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
-            import('/admin/js/lib/help-popover.js').catch(() => ({}))
-        ]).then(([tk, chrome, help]) => ({
+            import('/admin/js/lib/help-popover.js').catch(() => ({})),
+            import('/admin/js/lib/loading.js').catch(() => ({}))
+        ]).then(([tk, chrome, help, loading]) => ({
             onceClosed: tk.onceClosed || ((so, fn) => { const c = so.close.bind(so); so.close = (...a) => { const r = c(...a); fn?.(); return r; }; }),
             openMenuAt: tk.openMenuAt || ((el) => {
                 const r = el.getBoundingClientRect();
@@ -32,7 +34,11 @@ export function loadKit() {
             }),
             viewLifetime: tk.viewLifetime || (() => ({add() {}, reset() {}})),
             addBannerAction: chrome.addBannerAction || (() => null),
-            helpPopovers: help.helpPopovers || (() => () => {})
+            helpPopovers: help.helpPopovers || (() => () => {}),
+            // A skeleton in a loading slot while the first load runs (core 1.x); without it the slot's own
+            // "Loading…" text shows, as before.
+            whileLoading: loading.whileLoading || ((slot, p) => (typeof p === 'function' ? p() : p)),
+            SHAPES: loading.SHAPES || {}
         }));
     }
     return kit;
@@ -151,42 +157,255 @@ export function when(iso) {
 
 // ---- Slideovers ---------------------------------------------------------------------
 
+/** Panels open (or opening) now, by key - so a double click opens one, not two. */
+const claimed = new Set();
+
+/**
+ * Take `key` for a panel about to open. Null when it is already open or on its
+ * way (the caller does nothing); else the release, which openPanel's `release`
+ * option calls when the panel closes - call it yourself if the panel never opens.
+ *
+ * @returns {(() => void)|null}
+ */
+export function claim(key) {
+    if (claimed.has(key)) return null;
+    claimed.add(key);
+    let done = false;
+    return () => { if (!done) { done = true; claimed.delete(key); } };
+}
+
+/**
+ * E.confirm that goes when the screen does: leaving while it is open answers
+ * it "no" (its Cancel is pressed) instead of leaving it over another screen.
+ * Callers check the screen (or panel) is still there before acting on a "no".
+ */
+export function ask(message, options = {}, ctx = null) {
+    const answer = Promise.resolve(E.confirm(message, options));
+    const overlay = [...document.querySelectorAll('.dm-dialog-overlay')].at(-1);
+    const unhold = ctx?.hold?.(() => { try { overlay?.querySelector('.dm-dialog-cancel')?.click(); } catch { /* gone */ } });
+    answer.finally(() => unhold?.()).catch(() => {});
+    return answer;
+}
+
+// ---- Drafts (the stored side; the decisions are lib/drafts.js) -----------------------
+
+/** One stored map per signed-in person: a shared browser never offers one person's work to another. */
+function draftsKey() {
+    let user = '';
+    try { user = S.get('auth_user')?.id || ''; } catch { /* storage blocked */ }
+    return `booking.drafts.${user || 'anyone'}`;
+}
+function readDrafts() {
+    const map = store.get(draftsKey());
+    return map && typeof map === 'object' && !Array.isArray(map) ? map : {};
+}
+export function getDraft(key) { return usableDraft(readDrafts()[key]); }
+export function allDrafts() { return readDrafts(); }
+export function putDraft(key, draft) {
+    let map = readDrafts();
+    for (const k of staleDraftKeys(map)) map = draftsWithout(map, k);
+    store.set(draftsKey(), draftsWith(map, key, draft));
+}
+export function dropDraft(key) {
+    const map = readDrafts();
+    if (key in map) store.set(draftsKey(), draftsWithout(map, key));
+}
+
 /**
  * Open a slideover holding `html`, bound to `model`. Closing with something
  * changed asks first (once). Everything is disposed and removed on close.
  *
- * @returns {Promise<{so, panel, close: (force?: boolean) => void}>}
+ * - `ctx` (the screen's): the panel goes when the screen does (`ctx.hold`),
+ *   keeping its draft, and it does not open at all if the screen went while
+ *   it was getting ready (`ctx.here`).
+ * - `release` (from claim()) is called when it closes.
+ * - `methods.save` is wrapped: the form is locked (inert) while it runs, so
+ *   nothing typed during a save that then closes the panel is lost; it is
+ *   unlocked - focus back where it was - when the panel stays open.
+ * - `draft: {key, label, kind, values(), apply(values, panel), was, prefilled, initial}`
+ *   keeps what was typed (on every change, and when the tab closes) while the
+ *   panel is dirty, and offers it back the next time this form opens - put
+ *   back with a toast when the record is as it was, asked about when it was
+ *   saved since (`was` differs) or the form was opened for something specific
+ *   (`prefilled`). A draft is removed after a save, a discard, a "no" to the
+ *   question - never while the question is open, and never written again
+ *   once the panel has closed. A restored draft keeps its own `was`.
+ *   `label` (text, or a function) names it in the question; `kind` ("a new booking") is for 'prefilled'.
+ *   `initial`: a draft to put back straight away (one of a deleted record,
+ *   started again as new - its old key is the caller's to drop).
+ *
+ * @returns {Promise<{so, panel, close: (force?: boolean) => void}|null>} null when the screen went first
  */
-export async function openPanel({title, size = 'md', html, model = {}, methods = {}, dirty, cleanup = () => {}, before, after}) {
+export async function openPanel({title, size = 'md', html, model = {}, methods = {}, dirty, cleanup = () => {}, before, after,
+    ctx = null, release = () => {}, draft = null}) {
     const {onceClosed, helpPopovers} = await loadKit();
-    const so = E.slideover({title: esc(title), size, position: 'right'});
-    const panel = fragment(html);
-    so.element.appendChild(panel);
-    before?.(panel);
-    const disposeHelp = helpPopovers(panel);
-    const handle = M.applyBindings(model, panel, {methods});
-    after?.(panel);
-    onceClosed(so, () => { cleanup(); handle.dispose(); disposeHelp(); });
-    const close = so.close.bind(so);
+    if (ctx?.here && !ctx.here()) { release(); return null; }
+
+    let so = null;
+    let panel = null;
+    let handle = null;
+    let disposeHelp = null;
+    let up = false;           // onceClosed is wired: closing tidies (and releases) from here on
     let closed = false;
+    let saving = false;
+    // Drafts are written only once any stored one has been dealt with (restored, or answered).
+    let drafting = false;
+    let draftWas = draft?.was || '';
+    const keepDraft = () => {
+        if (!draft || !drafting || closed) return;
+        if (dirty?.()) {
+            const label = typeof draft.label === 'function' ? draft.label() : draft.label;
+            putDraft(draft.key, {values: draft.values(), at: new Date().toISOString(), was: draftWas, label: label || ''});
+        } else dropDraft(draft.key);
+    };
+    const queueKeep = () => queueMicrotask(keepDraft); // data-model handles the same event first
+    const onUnload = () => keepDraft();
+    let unhold = null;
+
+    const wrapped = {...methods};
+    if (methods.save) {
+        wrapped.save = async (...args) => {
+            if (saving || closed) return undefined;
+            saving = true;
+            const focus = document.activeElement;
+            panel.inert = true;
+            try {
+                return await methods.save(...args);
+            } finally {
+                saving = false;
+                if (!closed) {
+                    panel.inert = false;
+                    if (focus && panel.contains(focus)) { try { focus.focus(); } catch { /* gone */ } }
+                    queueKeep(); // saved and still open (the staff note): the draft goes with the changes
+                }
+            }
+        };
+    }
+
+    // Anything that throws while the panel is built must not keep the claim, or leave a half-built
+    // slideover: it is undone and released, and the error goes on to the caller.
+    try {
+        so = E.slideover({title: esc(title), size, position: 'right'});
+        panel = fragment(html);
+        so.element.appendChild(panel);
+        before?.(panel);
+        disposeHelp = helpPopovers(panel);
+        handle = M.applyBindings(model, panel, {methods: wrapped});
+        after?.(panel);
+        onceClosed(so, () => {
+            cleanup(); handle.dispose(); disposeHelp(); release();
+            window.removeEventListener('beforeunload', onUnload);
+            unhold?.();
+        });
+        up = true;
+    } catch (err) {
+        closed = true;
+        try { handle?.dispose(); } catch { /* half built */ }
+        try { disposeHelp?.(); } catch { /* half built */ }
+        try { cleanup(); } catch { /* half built */ }
+        try { so?.destroy?.(); } catch { /* gone */ }
+        try { so?.element?.remove(); } catch { /* gone */ }
+        release();
+        throw err;
+    }
+
+    const close = so.close.bind(so);
     let asking = false;
     so.close = async (force) => {
-        if (!closed && force !== true && dirty?.()) {
+        if (closed) return close();
+        if (force !== true && saving) return undefined;
+        if (force !== true && dirty?.()) {
             if (asking) return undefined;
             asking = true;
-            const ok = await E.confirm('Discard your changes?');
+            const ok = await ask('Discard your changes?', {}, ctx);
             asking = false;
-            if (!ok) return undefined;
+            if (!ok || closed) return undefined;
         }
+        if (draft && drafting) dropDraft(draft.key);
         closed = true;
         return close();
     };
-    panel.addEventListener('keydown', (e) => {
-        if ((e.ctrlKey || e.metaKey) && (e.key === 'Enter' || e.key === 's') && methods.save) { e.preventDefault(); e.stopPropagation(); methods.save(); }
-    });
-    I.scan(panel);
-    so.open();
-    return {so, panel, close: (force) => so.close(force)};
+    try {
+        // The screen going (another tab, another Tool, a remount): keep the draft, take the panel away.
+        if (ctx?.hold) {
+            unhold = ctx.hold(() => {
+                if (closed) return;
+                keepDraft();
+                closed = true;
+                close();
+            });
+        }
+        panel.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && (e.key === 'Enter' || e.key === 's') && wrapped.save) { e.preventDefault(); e.stopPropagation(); wrapped.save(); }
+        });
+        if (draft) {
+            panel.addEventListener('input', queueKeep);
+            panel.addEventListener('change', queueKeep);
+            panel.addEventListener('click', queueKeep); // rows added or removed, slot buttons
+            window.addEventListener('beforeunload', onUnload);
+        }
+        I.scan(panel);
+        so.open();
+        if (draft) offerDraft();
+    } catch (err) {
+        // Up, but failing: close it (onceClosed tidies and releases) - any stored draft is left alone.
+        if (up && !closed) { closed = true; try { close(); } catch { /* gone */ } }
+        throw err;
+    }
+    return {
+        so, panel,
+        close(force) {
+            // A save that was running when the screen went has now succeeded (saves close with force):
+            // the draft kept on leaving is saved work, so it goes.
+            if (closed && force === true && saving && draft) { dropDraft(draft.key); return undefined; }
+            return so.close(force);
+        },
+        /** The record was saved from this panel and it stays open (the staff note): drafts now start from `was`. */
+        rebase(was) { draftWas = was || ''; }
+    };
+
+    function offerDraft() {
+        // `asNew`: a deleted record's draft started again as a new one - nothing to compare it with now.
+        const restore = (d, asNew = false) => {
+            try { draft.apply(d.values, panel); } catch (err) { console.warn('[booking] draft not restored:', err); }
+            draftWas = asNew ? (draft.was || '') : (d.was || '');
+            // Rows the draft added (hours, closed days) carry icons: drawn once they have rendered.
+            M.flushSync?.();
+            I.scan(panel);
+            requestAnimationFrame(() => { if (panel.isConnected) I.scan(panel); });
+        };
+        if (draft.initial) {
+            restore(draft.initial, true);
+            drafting = true;
+            keepDraft();
+            E.toast(restoreText('auto', {label: draft.initial.label, at: draft.initial.at, kind: draft.kind}), {type: 'info'});
+            return;
+        }
+        const stored = getDraft(draft.key);
+        const plan = restorePlan({draft: stored, was: draft.was || '', opening: draft.values(), prefilled: draft.prefilled});
+        if (plan === 'none') {
+            if (stored) dropDraft(draft.key);
+            drafting = true;
+            return;
+        }
+        if (plan === 'auto') {
+            restore(stored);
+            drafting = true;
+            keepDraft();
+            E.toast(restoreText('auto', {label: stored.label, at: stored.at, kind: draft.kind}), {type: 'info'});
+            return;
+        }
+        // Discard is the confirm button; Cancel - which Escape and leaving also press - keeps the work.
+        ask(esc(restoreText(plan, {label: stored.label, at: stored.at, kind: draft.kind})),
+            {title: 'Unsaved changes', confirmText: plan === 'prefilled' ? 'Discard it' : 'Discard them', cancelText: plan === 'prefilled' ? 'Carry on with it' : 'Keep them'}, ctx)
+            .then((discard) => {
+                // Gone while asked (the screen changed): the draft stays for next time.
+                if (closed) return;
+                if (discard) dropDraft(draft.key); else restore(stored);
+                drafting = true;
+                keepDraft();
+            });
+    }
 }
 
 /**
@@ -207,7 +426,9 @@ export function wireRows(list, {items, main, openMenuAt, scope, match = '.bk-row
     const onKey = (e) => {
         const row = e.target.closest(match);
         if (!row) return;
-        if ((e.key === 'F10' && e.shiftKey) || e.key === 'ContextMenu') { e.preventDefault(); openMenuAt(row); }
+        // Not the ContextMenu key: Chrome on Windows opens its own menu on that key's key-up, so the menu
+        // appeared twice. That key's own contextmenu event reaches E.contextMenu anyway.
+        if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(row); }
         else if ((e.key === 'Enter' || e.key === ' ') && e.target === row) { e.preventDefault(); main(row.dataset.id, row); }
         else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && e.target === row) {
             e.preventDefault();