domma-cms 1.6.55 → 1.6.57

package/plugins/shopping-cart/admin/views/products.js

@@ -8,9 +8,18 @@
  * stock, stock tracking, delivery and tax class - checked as you type by the
  * same rules the server applies (public/lib/products.js). "+" in the banner
  * adds one; #/plugins/shopping-cart/products/new opens a blank one.
+ *
+ * What is typed in the editor is kept as a draft while it is open (see
+ * ../lib/drafts.js), so leaving the screen - or the browser - loses nothing:
+ * opening the product again asks whether to throw those changes away (OK) or
+ * keep them (Cancel / Escape), and says when the product has been changed or
+ * deleted since. A row with a draft carries an "Unsaved" pill; drafts of a new
+ * product, or of one deleted since, are listed above the products.
  */
 
-import {api, entriesOf, esc, getCurrency, money, moneyIn, moneyOut, mountPanels, openPanel, store, wireRows} from '../lib/kit.js';
+import {api, ask, claims, entriesOf, soon, esc, getCurrency, money, moneyIn, moneyOut, mountPanels, openPanel, refreshBadge, store, wireRows} from '../lib/kit.js';
+import {NEW_KEY, PRODUCT_DRAFTS_KEY, adoptAsNew, draftDiffers, draftKey, draftValues, productDraftQuestion, readMap, replaceNewDraftQuestion,
+    stableJson, withDraft} from '../lib/drafts.js';
 import {STATUS_LABEL, cleanProduct, priceRange, slugify, totalStock} from '/plugins/shopping-cart/public/lib/products.js';
 
 const FILTERS = [
@@ -25,6 +34,7 @@ const ROW = `
 <div class="shp-row shp-prow" data-id="{{id}}" tabindex="0">
   <span class="shp-thumb" data-bind-class="img ? '' : 'is-empty'"><img data-bind-src="img" data-bind-hidden="!img" alt=""></span>
   <span class="shp-main"><strong><span data-bind-text="name"></span> <span class="shp-star" data-bind-hidden="!featured" title="Featured">★</span></strong><small data-bind-text="meta"></small></span>
+  <span class="shp-chip is-primary" data-bind-hidden="!unsaved" title="Changes left unsaved in the editor - open it to keep or throw them away">Unsaved</span>
   <span class="shp-stock" data-bind-class="stockTone" data-bind-text="stockText" title="Stock"></span>
   <span class="shp-chip" data-bind-class="tone" data-bind-text="statusLabel"></span>
   <span class="shp-amt" data-bind-text="price"></span>
@@ -39,8 +49,23 @@ export async function mount(root, ctx) {
     const filter = M.observable(store.get('shopping-cart.products-filter') || 'all');
     const query = M.observable('');
     const low = Number(settings.lowStockAt) || 0;
+    // True only once the list has come back: a failed load must not make every kept draft look "deleted since".
+    const loaded = M.observable(false);
     scope(M.effect(() => store.set('shopping-cart.products-filter', filter.value)));
 
+    // Kept drafts: read fresh and written straight back on every change (see ../lib/drafts.js).
+    // `draftKeys` is just which keys have one, so the rows and the note above them keep up.
+    const draftKeys = M.observable(Object.keys(readMap(store.get(PRODUCT_DRAFTS_KEY))));
+    const drafts = {
+        get: (key) => readMap(store.get(PRODUCT_DRAFTS_KEY))[key] || null,
+        put(key, draft) {
+            const map = withDraft(store.get(PRODUCT_DRAFTS_KEY), key, draft);
+            if (Object.keys(map).length) store.set(PRODUCT_DRAFTS_KEY, map); else store.remove(PRODUCT_DRAFTS_KEY);
+            const keys = Object.keys(map);
+            if (stableJson(keys.slice().sort()) !== stableJson(draftKeys.peek().slice().sort())) draftKeys.value = keys;
+        }
+    };
+
     const counts = M.computed(() => {
         const out = {};
         for (const f of FILTERS) out[f.key] = products.value.filter(p => f.match(p.data || {}, low)).length;
@@ -48,6 +73,7 @@ export async function mount(root, ctx) {
     });
     const rows = M.observable([]);
     scope(M.effect(() => {
+        const kept = new Set(draftKeys.value);
         const f = FILTERS.find(x => x.key === filter.value) || FILTERS[0];
         const q = query.value.trim().toLowerCase();
         rows.value = products.value
@@ -63,6 +89,7 @@ export async function mount(root, ctx) {
                     name: p.name,
                     img: p.images?.[0] || '',
                     featured: Boolean(p.featured),
+                    unsaved: kept.has(e.id),
                     meta: [p.category, p.variants?.length ? `${p.variants.length} ${(p.optionName || 'option').toLowerCase()}s` : '', p.sku].filter(Boolean).join(' · ') || ' ',
                     stockText: stock === null ? '∞' : `${stock} in stock`,
                     stockTone: stock === null ? 'is-muted' : stock === 0 ? 'is-danger' : stock <= low ? 'is-warning' : '',
@@ -73,6 +100,14 @@ export async function mount(root, ctx) {
             });
     }));
     const emptyText = M.computed(() => (products.value.length ? 'No products match.' : 'No products yet - add one with + in the banner.'));
+    // Drafts with no row to carry their pill: a new product's, and those of products deleted since.
+    const looseDrafts = M.computed(() => {
+        if (!loaded.value) return [];
+        const ids = new Set(products.value.map(p => p.id));
+        const map = readMap(store.get(PRODUCT_DRAFTS_KEY));
+        return draftKeys.value.filter(k => map[k] && (k === NEW_KEY || !ids.has(k)))
+            .map(k => ({key: k, name: String(map[k].values?.name || '').trim(), gone: k !== NEW_KEY}));
+    });
 
     root.innerHTML = '';
     const view = document.createElement('div');
@@ -86,9 +121,10 @@ export async function mount(root, ctx) {
   <button type="button" class="btn btn-sm btn-primary" data-new><span data-icon="plus" data-icon-size="13"></span> Product</button>
   <span data-help-title="Products" data-help="Click a product to edit it. Right-click (or ⋮, or Shift+F10) to duplicate it, put it on sale, feature it, set its stock or archive it. Only products On sale appear in the shop. Archive keeps a product for past orders without showing it."></span>
 </div>
-<p class="shp-note" data-bind-hidden="!loading.value">Loading…</p>
+<div class="shp-drafts" data-part="drafts" hidden></div>
+<div class="shp-loading-slot" data-bind-hidden="!loading.value">Loading…</div>
 <p class="shp-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
-<p class="shp-note" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
+<p class="shp-note shp-empty" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
 <div class="shp-list" data-each="rows.value key=id"></div>`;
     root.appendChild(view);
     const list = view.querySelector('.shp-list');
@@ -96,20 +132,43 @@ export async function mount(root, ctx) {
     scope(kit.helpPopovers(view, {position: 'bottom'}));
     const bindings = M.applyBindings({loading, error, filter, query, rows, counts, emptyText}, view);
     scope(() => bindings.dispose());
+
+    // The loose drafts, as a line of buttons above the list.
+    const draftBox = view.querySelector('[data-part="drafts"]');
+    scope(M.effect(() => {
+        const loose = looseDrafts.value;
+        draftBox.hidden = !loose.length;
+        draftBox.innerHTML = loose.length ? `<span data-icon="edit" data-icon-size="14"></span><span>Left unsaved:</span>${loose.map(d =>
+            `<button type="button" class="shp-chip is-primary" data-draft="${esc(d.key)}" title="${d.gone ? 'The product has been deleted since - open to keep the changes as a new product, or throw them away' : 'Open the new product you were adding'}">${
+                esc(d.name || 'Untitled')}${d.gone ? ' (deleted since)' : ' (new)'}</button>`).join('')}` : '';
+        I.scan(draftBox);
+    }));
+    // soon(): an Enter on the button must not answer the question it opens.
+    draftBox.addEventListener('click', (e) => {
+        const key = e.target.closest('[data-draft]')?.dataset.draft;
+        if (key) soon(edit)(key === NEW_KEY ? null : key);
+    });
     view.querySelector('.shp-seg').addEventListener('click', (e) => {
         const b = e.target.closest('[data-filter]');
         if (b) filter.value = b.dataset.filter;
     });
-    view.querySelector('[data-new]').addEventListener('click', () => edit(null));
+    view.querySelector('[data-new]').addEventListener('click', soon(() => edit(null)));
 
-    async function load() {
+    /** The first load (under a skeleton) or a quiet reload that keeps the list on screen. */
+    async function load(first = false) {
         try {
-            products.value = entriesOf(await api.products.list());
+            const res = first
+                ? await kit.whileLoading(view.querySelector('.shp-loading-slot'), api.products.list(), kit.SHAPES.iconRows)
+                : await api.products.list();
+            if (!here()) return;
+            products.value = entriesOf(res);
             error.value = '';
+            loaded.value = true;
         } catch (err) {
+            if (!here()) return;
             error.value = `Could not load the products: ${err.message || err}`;
         } finally {
-            loading.value = false;
+            if (here()) loading.value = false;
         }
     }
     const byId = (id) => products.peek().find(p => p.id === id);
@@ -129,19 +188,23 @@ export async function mount(root, ctx) {
 
     async function setStock(p) {
         if (p.data.variants?.length) { edit(p.id, 'stock'); return; }
-        const v = await E.prompt(`How many of "${esc(p.data.name)}" are in stock?`, {defaultValue: String(p.data.stock ?? 0)});
-        if (v === null || v === undefined) return;
+        // promptWith sets the value after the dialog opens (an inputValue is cut at a quote).
+        const v = await kit.promptWith(`How many of “${esc(p.data.name)}” are in stock?`, {title: 'Stock'}, String(p.data.stock ?? 0));
+        if (!here() || v === null || v === undefined) return;
         const n = Number(v);
         if (!Number.isInteger(n) || n < 0) { E.toast('A whole number, 0 or more.', {type: 'warning'}); return; }
         quick(p, {stock: n, trackStock: true}, `${p.data.name}: ${n} in stock.`);
     }
 
     async function remove(p) {
-        if (!await E.confirm(`Delete "${esc(p.data.name)}"? Past orders keep their copy of it. To hide it and keep it, Archive instead.`)) return;
+        if (!await E.confirm(`Delete “${esc(p.data.name)}”? Past orders keep their copy of it. To hide it and keep it, Archive instead.`,
+            {title: 'Delete product', confirmText: 'Delete', cancelText: 'Keep it'})) return;
+        if (!here()) return;
         try {
             await api.products.remove(p.id);
             products.value = products.peek().filter(x => x.id !== p.id);
-            E.toast(`"${p.data.name}" deleted.`, {type: 'success'});
+            refreshBadge();
+            E.toast(`“${p.data.name}” deleted.`, {type: 'success'});
         } catch (err) {
             E.toast(err.message || String(err), {type: 'error'});
         }
@@ -153,10 +216,10 @@ export async function mount(root, ctx) {
         const d = p.data;
         return [
             {header: d.name},
-            {label: 'Edit', icon: 'edit', action: () => edit(id)},
+            {label: draftKeys.peek().includes(id) ? 'Edit (unsaved changes)…' : 'Edit', icon: 'edit', action: () => edit(id)},
             {label: 'View in the shop', icon: 'external-link', disabled: d.status !== 'active', action: () => window.open(`${settings.shopPath}/${d.slug}`, '_blank', 'noopener')},
             {label: 'Duplicate', icon: 'copy', action: async () => {
-                try { const e = await api.products.duplicate(id); put(e); E.toast(`Copied as a draft: "${e.data.name}".`, {type: 'success'}); }
+                try { const e = await api.products.duplicate(id); put(e); refreshBadge(); E.toast(`Copied as a draft: “${e.data.name}”.`, {type: 'success'}); }
                 catch (err) { E.toast(err.message || String(err), {type: 'error'}); }
             }},
             {type: 'divider'},
@@ -172,50 +235,146 @@ export async function mount(root, ctx) {
 
     // ---- The editor --------------------------------------------------------------
 
-    const panels = new Set();
+    const panels = new Map();
+    const opening = claims();
     const categories = () => [...new Set(products.peek().map(p => p.data.category).filter(Boolean))].sort();
 
+    const BLANK = {status: 'draft', trackStock: false, shippable: true, taxClass: 'standard', images: [], variants: []};
+    const SCALARS = ['name', 'slug', 'summary', 'description', 'price', 'compareAt', 'sku', 'category', 'tags', 'status', 'featured', 'trackStock',
+        'stock', 'optionName', 'shippable', 'weight', 'taxClass'];
+    const text = (v) => (v === null || v === undefined ? '' : String(v));
+    /** A product as the form holds it - plain values, numbers as typed text - which is also what a draft keeps. */
+    const formOf = (p) => ({
+        name: p.name || '', slug: p.slug || '', summary: p.summary || '', description: p.description || '',
+        price: text(moneyIn(p.price)), compareAt: text(moneyIn(p.compareAt)), sku: p.sku || '', category: p.category || '',
+        tags: (p.tags || []).join(', '), status: p.status || 'draft', featured: Boolean(p.featured), trackStock: Boolean(p.trackStock),
+        stock: text(p.stock), optionName: p.optionName || '', shippable: p.shippable !== false, weight: text(p.weight),
+        taxClass: p.taxClass || 'standard', images: [...(p.images || [])],
+        variants: (p.variants || []).map(v => ({id: v.id || '', name: v.name || '', price: text(moneyIn(v.price)), sku: v.sku || '', stock: text(v.stock)}))
+    });
+
+    /** Open a product in the editor - once: a second click on one already opening or open just goes to it. */
     async function edit(id, focus = '') {
+        const key = draftKey(id);
+        const open = panels.get(key);
+        if (open?.isOpen()) { open.panel.querySelector('input, textarea')?.focus(); return; }
+        const release = opening.take(key);
+        if (!release) return;
+        let owned = false;
+        try {
+            owned = await editNow(id, focus, key, release);
+        } catch (err) {
+            E.toast(`The editor could not open: ${err.message || err}`, {type: 'error'});
+        } finally {
+            // The claim goes with a panel that opened (its cleanup releases it); otherwise now, or it never opens again.
+            if (!owned) release();
+        }
+    }
+
+    /** @returns {Promise<boolean>} true once a panel owns the claim */
+    async function editNow(id, focus, key, release) {
         const had = id ? byId(id) : null;
-        if (id && !had) { E.toast('That product is gone.', {type: 'warning'}); return; }
-        const p = had?.data || {status: 'draft', trackStock: false, shippable: true, taxClass: 'standard', images: [], variants: []};
-        const f = {
-            name: M.observable(p.name || ''),
-            slug: M.observable(p.slug || ''),
-            summary: M.observable(p.summary || ''),
-            description: M.observable(p.description || ''),
-            price: M.observable(moneyIn(p.price)),
-            compareAt: M.observable(moneyIn(p.compareAt)),
-            sku: M.observable(p.sku || ''),
-            category: M.observable(p.category || ''),
-            tags: M.observable((p.tags || []).join(', ')),
-            status: M.observable(p.status || 'draft'),
-            featured: M.observable(Boolean(p.featured)),
-            trackStock: M.observable(Boolean(p.trackStock)),
-            stock: M.observable(p.stock ?? ''),
-            optionName: M.observable(p.optionName || ''),
-            shippable: M.observable(p.shippable !== false),
-            weight: M.observable(p.weight ?? ''),
-            taxClass: M.observable(p.taxClass || 'standard')
-        };
-        const images = M.observable([...(p.images || [])]);
-        const variants = M.observable((p.variants || []).map(v => ({...v, price: moneyIn(v.price), stock: v.stock ?? ''})));
-        const slugTouched = M.observable(Boolean(p.slug));
+        const kept = drafts.get(key);
+        if (id && !had && (!kept || !loaded.peek())) {
+            E.toast(loaded.peek() ? 'That product is gone.' : 'The products did not load - reload the page to edit one.', {type: 'warning'});
+            return false;
+        }
+        const record = formOf(had?.data || BLANK);
+        let start = record;
+        let was = had?.meta?.updatedAt || null;
+        let slugEdited = Boolean(had?.data?.slug);
+
+        if (kept && (kept.adopted || draftDiffers(kept, record))) {
+            if (kept.adopted) {
+                // Already said "keep" (a deleted product's changes, made a new one).
+                start = {...record, ...draftValues(kept, record)};
+                was = null;
+                slugEdited = Boolean(kept.slugTouched);
+            } else {
+                // The draft is removed only once the person has answered; leaving while asked keeps it.
+                const q = productDraftQuestion(kept, had ? {name: had.data.name, updatedAt: had.meta?.updatedAt || ''} : null, {isNew: !id});
+                const question = ask(q.text, q.options);
+                scope(() => question.dismiss());
+                const throwAway = await question.answer;
+                if (!here()) return false;
+                if (throwAway) {
+                    drafts.put(key, null);
+                    if (!had && id) { E.toast('Changes thrown away.', {type: 'info'}); return false; }
+                } else if (q.asNew) {
+                    return keepAsNew(kept, key, release);
+                } else {
+                    start = {...record, ...draftValues(kept, record)};
+                    was = kept.was ?? null;
+                    slugEdited = kept.slugTouched ?? slugEdited;
+                }
+            }
+        } else if (kept) {
+            drafts.put(key, null); // the same as the product: nothing to keep
+        }
+        return openEditor({id, focus, key, release, had, record, start, was, slugEdited});
+    }
+
+    /** A deleted product's draft becomes a new product's - asking first if that would replace another unsaved new one. */
+    async function keepAsNew(kept, key, release) {
+        const other = drafts.get(NEW_KEY);
+        if (other && draftDiffers(other, formOf(BLANK))) {
+            const q = replaceNewDraftQuestion(other);
+            const question = ask(q.text, q.options);
+            scope(() => question.dismiss());
+            const replace = await question.answer;
+            if (!here()) return false;
+            if (!replace) {
+                E.toast('Both kept. Add (or throw away) the new product you left unsaved, then come back to these changes.', {type: 'info', duration: 7000});
+                return false;
+            }
+        }
+        if (panels.get(NEW_KEY)?.isOpen() || opening.has(NEW_KEY)) {
+            E.toast('Finish the new product you are adding first.', {type: 'warning'});
+            return false;
+        }
+        drafts.put(NEW_KEY, adoptAsNew(kept));
+        drafts.put(key, null);
+        release();
+        edit(null);
+        return true;
+    }
+
+    async function openEditor({focus, key, release, had, record, start, was, slugEdited}) {
+        const p = had?.data || BLANK;
+        const f = Object.fromEntries(SCALARS.map(k => [k, M.observable(start[k])]));
+        const images = M.observable([...start.images]);
+        const variants = M.observable(start.variants.map(v => ({...v})));
+        const slugTouched = M.observable(Boolean(slugEdited));
         const saving = M.observable(false);
 
-        const snapshot = () => JSON.stringify([Object.fromEntries(Object.entries(f).map(([k, o]) => [k, o.peek()])), images.peek(), variants.peek()]);
-        const opened = snapshot();
+        /** The form's values, numbers as text - compared with the product, and kept as the draft. */
+        const values = () => ({
+            ...Object.fromEntries(SCALARS.map(k => [k, ['stock', 'weight'].includes(k) ? text(f[k].peek()) : f[k].peek()])),
+            images: images.peek(),
+            variants: variants.peek().map(v => ({id: v.id || '', name: v.name ?? '', price: text(v.price), sku: v.sku ?? '', stock: text(v.stock)}))
+        });
+        const recordJson = stableJson(record);
         // Extensions' sections (Shopping Cart Pro's Downloads), mounted once the panel is open.
         let ext = {panels: [], destroy() {}};
-        const dirty = () => snapshot() !== opened || ext.panels.some(x => x.handle.dirty?.());
+        const dirty = () => stableJson(values()) !== recordJson || ext.panels.some(x => x.handle.dirty?.());
+
+        // The draft: rewritten on every change while the editor is open, so leaving (the screen, the browser) loses
+        // nothing. It goes when the person saves, discards or closes with nothing changed - never when the screen goes.
+        let drafting = true;
+        const keepDraft = () => {
+            if (!drafting) return;
+            const v = values();
+            if (stableJson(v) === recordJson) drafts.put(key, null);
+            else drafts.put(key, {values: v, slugTouched: slugTouched.peek(), was, at: new Date().toISOString()});
+        };
 
         const payload = () => ({
             ...Object.fromEntries(Object.entries(f).map(([k, o]) => [k, o.peek()])),
             slug: f.slug.peek() || slugify(f.name.peek()),
             price: moneyOut(f.price.peek()),
             compareAt: moneyOut(f.compareAt.peek()),
-            stock: f.stock.peek() === '' ? null : Number(f.stock.peek()),
-            weight: f.weight.peek() === '' ? null : Number(f.weight.peek()),
+            stock: text(f.stock.peek()) === '' ? null : Number(f.stock.peek()),
+            weight: text(f.weight.peek()) === '' ? null : Number(f.weight.peek()),
             images: images.peek(),
             variants: variants.peek().map(v => ({id: v.id, name: v.name, sku: v.sku,
                 price: moneyOut(v.price), stock: v.stock === '' || v.stock === null ? null : Number(v.stock)})),
@@ -238,6 +397,7 @@ export async function mount(root, ctx) {
             return errors;
         });
         const stopSlug = M.effect(() => { if (!slugTouched.value) f.slug.value = slugify(f.name.value); });
+        const stopDraft = M.effect(() => { SCALARS.forEach(k => f[k].value); images.value; variants.value; slugTouched.value; keepDraft(); });
 
         const model = {
             ...f, images, variants, saving, isNew: !had, hasVariants: M.computed(() => variants.value.length > 0),
@@ -248,11 +408,13 @@ export async function mount(root, ctx) {
             variantErr: M.computed(() => Object.entries(check.value).filter(([k]) => k.startsWith('variant')).map(([, v]) => v).join(' ')),
             cannot: M.computed(() => saving.value || Object.keys(check.value).length > 0),
             url: M.computed(() => `${settings.shopPath}/${f.slug.value || slugify(f.name.value) || '…'}`),
-            currency: getCurrency()
+            currency: getCurrency(),
+            restored: start !== record
         };
 
         let panel = null;
         const html = `<div class="shp-form shp-editor">
+  <p class="shp-callout shp-restored" data-bind-hidden="!restored">These are the changes you left unsaved${was && had?.meta?.updatedAt && was !== had.meta.updatedAt ? ' - the product has been changed since; saving puts them over that' : ''}. Save to keep them, or close and discard them.</p>
   <div class="shp-grid">
     <div class="shp-wide">
       <label class="form-label" for="sp-name">Name</label>
@@ -360,17 +522,27 @@ export async function mount(root, ctx) {
                 const tile = document.createElement('div');
                 tile.className = 'shp-pic';
                 tile.draggable = true;
+                tile.tabIndex = 0;
                 tile.dataset.i = String(i);
+                tile.setAttribute('aria-label', `Picture ${i + 1}${i === 0 ? ' (card)' : ''} - Shift+F10 for its menu`);
                 const img = document.createElement('img');
                 img.src = src;
                 img.alt = '';
+                const more = document.createElement('button');
+                more.type = 'button';
+                more.className = 'shp-pic-more';
+                more.title = 'More';
+                more.setAttribute('aria-label', 'More');
+                more.textContent = '⋮';
+                more.dataset.more = String(i);
                 const x = document.createElement('button');
                 x.type = 'button';
                 x.className = 'shp-pic-x';
                 x.title = 'Remove';
+                x.setAttribute('aria-label', 'Remove');
                 x.textContent = '×';
                 x.dataset.remove = String(i);
-                tile.append(img, x);
+                tile.append(img, more, x);
                 if (i === 0) { const b = document.createElement('span'); b.className = 'shp-pic-main'; b.textContent = 'Card'; tile.appendChild(b); }
                 box.appendChild(tile);
             });
@@ -386,13 +558,14 @@ export async function mount(root, ctx) {
         const renderVariants = (el) => {
             const box = el.querySelector('[data-part="variants"]');
             const vs = variants.peek();
-            box.innerHTML = vs.length ? `<div class="shp-vrow is-head"><span>Name</span><span>Price</span><span>SKU</span><span>Stock</span><span></span></div>` : '';
+            box.innerHTML = vs.length ? `<div class="shp-vrow is-head"><span>Name</span><span>Price</span><span>SKU</span><span>Stock</span><span></span><span></span></div>` : '';
             vs.forEach((v, i) => {
                 const row = fragment(`<div class="shp-vrow" data-i="${i}">
-  <input class="form-input" data-k="name" placeholder="Large" maxlength="80">
-  <input class="form-input" data-k="price" inputmode="decimal" placeholder="same">
-  <input class="form-input" data-k="sku" maxlength="60">
-  <input class="form-input" data-k="stock" type="number" min="0" step="1" placeholder="${f.trackStock.peek() ? '0' : '∞'}">
+  <input class="form-input" data-k="name" placeholder="Large" maxlength="80" aria-label="Option name">
+  <input class="form-input" data-k="price" inputmode="decimal" placeholder="same" aria-label="Price">
+  <input class="form-input" data-k="sku" maxlength="60" aria-label="SKU">
+  <input class="form-input" data-k="stock" type="number" min="0" step="1" placeholder="${f.trackStock.peek() ? '0' : '∞'}" aria-label="Stock">
+  <button type="button" class="shp-kebab" data-vmore="${i}" title="More" aria-label="More">⋮</button>
   <button type="button" class="shp-kebab" data-vremove="${i}" title="Remove this option" aria-label="Remove">×</button>
 </div>`);
                 for (const inp of row.querySelectorAll('[data-k]')) inp.value = v[inp.dataset.k] ?? '';
@@ -400,18 +573,30 @@ export async function mount(root, ctx) {
             });
         };
 
+        const menus = [];
         panel = await openPanel({
             title: had ? p.name : 'New product',
             size: 'lg',
             html,
             model,
             dirty,
+            busy: () => saving.peek(),
+            // The person closed it (discarding, or with nothing changed): the draft goes with it.
+            discarded: () => { drafting = false; drafts.put(key, null); },
             before: (el) => {
                 wireChecks(el);
                 renderPics(el);
                 renderVariants(el);
             },
-            cleanup: () => { panels.delete(panel?.so); stopSlug?.(); ext.destroy(); },
+            cleanup: () => {
+                drafting = false;
+                if (panels.get(key) === panel) panels.delete(key);
+                release();
+                stopSlug?.();
+                stopDraft?.();
+                ext.destroy();
+                menus.forEach(m => { try { m?.destroy?.(); } catch { /* gone */ } });
+            },
             methods: {
                 cancel: () => panel?.close(),
                 editSlug: () => { panel.panel.querySelector('[data-part="slug"]').hidden = false; slugTouched.value = true; panel.panel.querySelector('#sp-slug').focus(); },
@@ -422,41 +607,83 @@ export async function mount(root, ctx) {
                     panel.panel.querySelector('.shp-vrow:last-child [data-k="name"]')?.focus();
                 },
                 async save() {
+                    if (saving.peek() || !panel?.isOpen()) return;
                     if (model.cannot.peek()) { E.toast(Object.values(check.peek())[0] || 'Check the form.', {type: 'warning'}); return; }
+                    // The panel closes after a save, so the form is locked while it runs: nothing typed meanwhile is lost.
                     saving.value = true;
+                    panel.lock(true);
+                    const sent = values();
                     try {
                         const pl = payload();
                         const e = had ? await api.products.update(had.id, pl) : await api.products.create(pl);
                         put(e);
-                        E.toast(had ? `"${e.data.name}" saved.` : `"${e.data.name}" added${e.data.status === 'active' ? ' - it is on sale' : ' as a draft'}.`, {type: 'success'});
+                        if (!had) refreshBadge();
+                        drafting = false;
+                        // Only the draft of what was saved goes - not one a newer screen has written since.
+                        if (stableJson(drafts.get(key)?.values) === stableJson(sent)) drafts.put(key, null);
+                        E.toast(had ? `“${e.data.name}” saved.` : `“${e.data.name}” added${e.data.status === 'active' ? ' - it is on sale' : ' as a draft'}.`, {type: 'success'});
+                        saving.value = false;
                         panel.close(true);
                     } catch (err) {
                         E.toast(`Not saved: ${err.message || err}`, {type: 'error'});
                     } finally {
                         saving.value = false;
+                        if (panel.isOpen()) panel.lock(false);
                     }
                 }
             }
         });
-        panels.add(panel.so);
+        panels.set(key, panel);
+        // The screen went while the panel was opening: its teardown has already run, so close it here.
+        if (!here()) { panel.close(true); return true; }
         const el = panel.panel;
         ext = await mountPanels(el.querySelector('.shp-actions'), {on: 'product', ctx, info: {
             product: had ? {id: had.id, data: had.data} : null,
             // Options as they are in the form; one added since the last save has no id yet.
             variants: () => variants.peek().map(v => ({id: v.id || '', name: v.name}))
         }});
-        if (!el.isConnected) ext.destroy();
+        if (!panel.isOpen() || !here()) { ext.destroy(); return true; }
 
-        // Pictures: add from Media, remove, drag to reorder.
+        // Pictures: add from Media, remove, drag to reorder; a menu on each (right-click, ⋮, Shift+F10).
         const pics = el.querySelector('[data-part="pics"]');
+        const setImages = (next) => { images.value = next; renderPics(el); };
+        const movePic = (i, to) => {
+            const next = images.peek().slice();
+            const [m] = next.splice(i, 1);
+            next.splice(to, 0, m);
+            setImages(next);
+            pics.querySelector(`.shp-pic[data-i="${to}"]`)?.focus();
+        };
+        menus.push(E.contextMenu(pics, {match: '.shp-pic', inherit: false, density: 'compact', keyboardTrigger: false, items: (tile) => {
+            const i = Number(tile.dataset.i);
+            const all = images.peek();
+            if (!all[i]) return [];
+            return [
+                {header: `Picture ${i + 1} of ${all.length}`},
+                {label: 'Use on the card', icon: 'star', disabled: i === 0, action: () => movePic(i, 0)},
+                {label: 'Move left', icon: 'arrow-left', disabled: i === 0, action: () => movePic(i, i - 1)},
+                {label: 'Move right', icon: 'arrow-right', disabled: i === all.length - 1, action: () => movePic(i, i + 1)},
+                {label: 'Open the picture', icon: 'external-link', action: () => window.open(all[i], '_blank', 'noopener')},
+                {type: 'divider'},
+                {label: 'Remove', icon: 'trash', danger: true, action: () => setImages(images.peek().filter((_, j) => j !== i))}
+            ];
+        }}));
         pics.addEventListener('click', async (e) => {
+            const more = e.target.closest('[data-more]');
+            if (more) { kit.openMenuAt(more); return; }
             const rm = e.target.closest('[data-remove]');
-            if (rm) { images.value = images.peek().filter((_, i) => i !== Number(rm.dataset.remove)); renderPics(el); return; }
+            if (rm) { setImages(images.peek().filter((_, i) => i !== Number(rm.dataset.remove))); return; }
             if (e.target.closest('[data-add]')) {
                 const urls = await pickImages();
-                if (urls?.length) { images.value = [...new Set([...images.peek(), ...urls])].slice(0, 12); renderPics(el); }
+                if (!panel.isOpen()) return;
+                if (urls?.length) setImages([...new Set([...images.peek(), ...urls])].slice(0, 12));
             }
         });
+        pics.addEventListener('keydown', (e) => {
+            const tile = e.target.closest('.shp-pic');
+            if (!tile || e.target !== tile) return;
+            if ((e.key === 'F10' && e.shiftKey) || e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); kit.openMenuAt(tile.querySelector('.shp-pic-more') || tile); }
+        });
         let dragFrom = -1;
         pics.addEventListener('dragstart', (e) => { dragFrom = Number(e.target.closest('.shp-pic')?.dataset.i ?? -1); });
         pics.addEventListener('dragover', (e) => { if (dragFrom >= 0) e.preventDefault(); });
@@ -464,16 +691,33 @@ export async function mount(root, ctx) {
             const to = Number(e.target.closest('.shp-pic')?.dataset.i ?? -1);
             if (dragFrom < 0 || to < 0 || to === dragFrom) return;
             e.preventDefault();
-            const next = images.peek().slice();
-            const [m] = next.splice(dragFrom, 1);
-            next.splice(to, 0, m);
-            images.value = next;
+            const from = dragFrom;
             dragFrom = -1;
-            renderPics(el);
+            movePic(from, to);
         });
 
-        // Options: edits go straight into the list.
+        // Options: edits go straight into the list; each row has a menu (right-click, ⋮) - its fields keep the browser's own.
         const vbox = el.querySelector('[data-part="variants"]');
+        const setVariants = (next, focusAt = -1) => {
+            variants.value = next;
+            renderVariants(el);
+            if (focusAt >= 0) vbox.querySelector(`.shp-vrow[data-i="${focusAt}"] [data-k="name"]`)?.focus();
+        };
+        menus.push(E.contextMenu(vbox, {match: '.shp-vrow:not(.is-head)', exclude: 'input, textarea, select', inherit: false, density: 'compact', keyboardTrigger: false, items: (row) => {
+            const i = Number(row.dataset.i);
+            const vs = variants.peek();
+            if (!vs[i]) return [];
+            const swap = (a, b) => { const next = vs.slice(); [next[a], next[b]] = [next[b], next[a]]; setVariants(next, b); };
+            return [
+                {header: vs[i].name || `Option ${i + 1}`},
+                {label: 'Move up', icon: 'arrow-up', disabled: i === 0, action: () => swap(i, i - 1)},
+                {label: 'Move down', icon: 'arrow-down', disabled: i === vs.length - 1, action: () => swap(i, i + 1)},
+                // A copy is a new option: no id, so the server gives it one.
+                {label: 'Duplicate', icon: 'copy', action: () => setVariants([...vs.slice(0, i + 1), {...vs[i], id: '', name: `${vs[i].name || 'Option'} (copy)`}, ...vs.slice(i + 1)], i + 1)},
+                {type: 'divider'},
+                {label: 'Remove', icon: 'trash', danger: true, action: () => setVariants(vs.filter((_, j) => j !== i))}
+            ];
+        }}));
         vbox.addEventListener('input', (e) => {
             const inp = e.target.closest('[data-k]');
             if (!inp) return;
@@ -481,14 +725,17 @@ export async function mount(root, ctx) {
             variants.value = variants.peek().map((v, j) => (j === i ? {...v, [inp.dataset.k]: inp.value} : v));
         });
         vbox.addEventListener('click', (e) => {
+            const more = e.target.closest('[data-vmore]');
+            if (more) { kit.openMenuAt(more); return; }
             const rm = e.target.closest('[data-vremove]');
             if (!rm) return;
-            variants.value = variants.peek().filter((_, j) => j !== Number(rm.dataset.vremove));
-            renderVariants(el);
+            setVariants(variants.peek().filter((_, j) => j !== Number(rm.dataset.vremove)));
         });
 
+        if (model.restored && slugTouched.peek() && start.slug !== record.slug) el.querySelector('[data-part="slug"]').hidden = false;
         if (focus === 'stock') el.querySelector('.shp-vrow:not(.is-head) [data-k="stock"]')?.focus();
         else if (!had) el.querySelector('#sp-name').focus();
+        return true;
     }
 
     /** Pick pictures from Media, several at once. */
@@ -548,15 +795,17 @@ export async function mount(root, ctx) {
     const fragment = (h) => { const t = document.createElement('template'); t.innerHTML = h.trim(); return t.content.firstElementChild; };
 
     wireRows(list, {openMenuAt: kit.openMenuAt, scope, items, main: (id) => edit(id)});
-    kit.addBannerAction(ctx.container, {id: 'shop-new', icon: 'plus', title: 'Add a product', onClick: () => edit(null)});
+    kit.addBannerAction(ctx.container, {id: 'shop-new', icon: 'plus', title: 'Add a product', onClick: soon(() => edit(null))});
     scope(() => {
         ctx.container.querySelector('[data-banner-action="shop-new"]')?.remove();
-        [...panels].forEach(so => { try { so.close(true); } catch { /* gone */ } });
+        [...panels.values()].forEach(pn => { try { pn.close(true); } catch { /* gone */ } });
     });
 
-    await load();
+    await load(true);
     if (!here()) return;
     I.scan(view);
+    // A failed first load opens no editor at all - not even a new one (its drafts could not be checked).
+    if (!loaded.peek()) return;
     if (ctx.id === 'new') edit(null);
     else if (ctx.id) edit(ctx.id);
 }