domma-cms 0.84.0 → 0.85.0

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

@@ -0,0 +1,547 @@
+/**
+ * Shop › Products.
+ *
+ * Chips by status (and "Low stock"), search, rows with a picture, the price,
+ * the stock and a menu: edit, view in the shop, duplicate, put on sale / to
+ * draft / archive, feature, set stock, delete. Click edits in a slideover -
+ * pictures from Media, options (sizes, colours) each with its own price and
+ * 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.
+ */
+
+import {api, entriesOf, esc, getCurrency, money, moneyIn, moneyOut, openPanel, store, wireRows} from '../lib/kit.js';
+import {STATUS_LABEL, cleanProduct, priceRange, slugify, totalStock} from '/plugins/shopping-cart/public/lib/products.js';
+
+const FILTERS = [
+    {key: 'all', label: 'All', match: (p) => p.status !== 'archived'},
+    {key: 'active', label: 'On sale', match: (p) => p.status === 'active'},
+    {key: 'draft', label: 'Drafts', match: (p) => p.status === 'draft'},
+    {key: 'low', label: 'Low stock', match: (p, low) => p.status === 'active' && p.trackStock && totalStock(p) <= low},
+    {key: 'archived', label: 'Archived', match: (p) => p.status === 'archived'}
+];
+
+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-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>
+  <button type="button" class="shp-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, settings} = ctx;
+    const products = M.observable([]);
+    const loading = M.observable(true);
+    const error = M.observable('');
+    const filter = M.observable(store.get('shopping-cart.products-filter') || 'all');
+    const query = M.observable('');
+    const low = Number(settings.lowStockAt) || 0;
+    scope(M.effect(() => store.set('shopping-cart.products-filter', filter.value)));
+
+    const counts = M.computed(() => {
+        const out = {};
+        for (const f of FILTERS) out[f.key] = products.value.filter(p => f.match(p.data || {}, low)).length;
+        return out;
+    });
+    const rows = M.observable([]);
+    scope(M.effect(() => {
+        const f = FILTERS.find(x => x.key === filter.value) || FILTERS[0];
+        const q = query.value.trim().toLowerCase();
+        rows.value = products.value
+            .filter(e => f.match(e.data || {}, low))
+            .filter(e => !q || [e.data.name, e.data.sku, e.data.category, ...(e.data.tags || []), ...(e.data.variants || []).map(v => `${v.name} ${v.sku}`)]
+                .join(' ').toLowerCase().includes(q))
+            .map(e => {
+                const p = e.data;
+                const stock = totalStock(p);
+                const r = priceRange(p);
+                return {
+                    id: e.id,
+                    name: p.name,
+                    img: p.images?.[0] || '',
+                    featured: Boolean(p.featured),
+                    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' : '',
+                    statusLabel: STATUS_LABEL[p.status],
+                    tone: p.status === 'active' ? 'is-success' : p.status === 'draft' ? 'is-warning' : 'is-muted',
+                    price: r.min === r.max ? money(r.min) : `${money(r.min)}–${money(r.max)}`
+                };
+            });
+    }));
+    const emptyText = M.computed(() => (products.value.length ? 'No products match.' : 'No products yet - add one with + in the banner.'));
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'shp-card shp-products';
+    view.innerHTML = `
+<div class="shp-bar">
+  <div class="shp-seg" role="group" aria-label="Show">
+    ${FILTERS.map(f => `<button type="button" data-filter="${f.key}" data-bind-class="filter.value === '${f.key}' && 'is-on'">${esc(f.label)} <b data-bind-text="counts.value.${f.key}"></b></button>`).join('')}
+  </div>
+  <input type="search" class="form-input shp-search" placeholder="Search name, SKU, category…" aria-label="Search products" data-model="query.value">
+  <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>
+<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>
+<div class="shp-list" data-each="rows.value key=id"></div>`;
+    root.appendChild(view);
+    const list = view.querySelector('.shp-list');
+    list.innerHTML = ROW;
+    scope(kit.helpPopovers(view, {position: 'bottom'}));
+    const bindings = M.applyBindings({loading, error, filter, query, rows, counts, emptyText}, view);
+    scope(() => bindings.dispose());
+    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));
+
+    async function load() {
+        try {
+            products.value = entriesOf(await api.products.list());
+            error.value = '';
+        } catch (err) {
+            error.value = `Could not load the products: ${err.message || err}`;
+        } finally {
+            loading.value = false;
+        }
+    }
+    const byId = (id) => products.peek().find(p => p.id === id);
+    const put = (e) => {
+        const had = products.peek().some(p => p.id === e.id);
+        products.value = had ? products.peek().map(p => (p.id === e.id ? e : p)) : [e, ...products.peek()];
+    };
+
+    async function quick(p, patch, said) {
+        try {
+            put(await api.products.patch(p.id, patch));
+            if (said) E.toast(said, {type: 'success'});
+        } catch (err) {
+            E.toast(`Not changed: ${err.message || err}`, {type: 'error'});
+        }
+    }
+
+    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;
+        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;
+        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'});
+        } catch (err) {
+            E.toast(err.message || String(err), {type: 'error'});
+        }
+    }
+
+    function items(id) {
+        const p = byId(id);
+        if (!p) return [];
+        const d = p.data;
+        return [
+            {header: d.name},
+            {label: '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'}); }
+                catch (err) { E.toast(err.message || String(err), {type: 'error'}); }
+            }},
+            {type: 'divider'},
+            ...(d.status !== 'active' ? [{label: 'Put on sale', icon: 'check-circle', action: () => quick(p, {status: 'active'}, `"${d.name}" is on sale.`)}] : []),
+            ...(d.status !== 'draft' ? [{label: 'Back to draft', icon: 'rotate-ccw', action: () => quick(p, {status: 'draft'}, `"${d.name}" is a draft - hidden from the shop.`)}] : []),
+            {label: d.featured ? 'Unfeature' : 'Feature', icon: 'star', action: () => quick(p, {featured: !d.featured})},
+            {label: d.variants?.length ? 'Stock…' : 'Set stock…', icon: 'box', action: () => setStock(p)},
+            {type: 'divider'},
+            ...(d.status !== 'archived' ? [{label: 'Archive', icon: 'archive', action: () => quick(p, {status: 'archived'}, `"${d.name}" archived.`)}] : []),
+            {label: 'Delete…', icon: 'trash', danger: true, action: () => remove(p)}
+        ];
+    }
+
+    // ---- The editor --------------------------------------------------------------
+
+    const panels = new Set();
+    const categories = () => [...new Set(products.peek().map(p => p.data.category).filter(Boolean))].sort();
+
+    async function edit(id, focus = '') {
+        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 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();
+        const dirty = () => snapshot() !== opened;
+
+        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()),
+            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)}))
+        });
+        // Checked as typed, by the server's own rules.
+        const check = M.computed(() => {
+            f.name.value; f.price.value; f.compareAt.value; f.stock.value; f.weight.value; images.value; variants.value;
+            const pl = payload();
+            const nanPrice = Number.isNaN(pl.price) || Number.isNaN(pl.compareAt) || pl.variants.some(v => Number.isNaN(v.price));
+            const {errors} = cleanProduct({...pl, price: Number.isNaN(pl.price) ? 'x' : pl.price, compareAt: Number.isNaN(pl.compareAt) ? 'x' : pl.compareAt,
+                variants: pl.variants.map(v => ({...v, price: Number.isNaN(v.price) ? 'x' : v.price}))}, {currency: getCurrency(), minor: true});
+            if (nanPrice && !errors.price) errors.price = 'Not a price.';
+            return errors;
+        });
+        const stopSlug = M.effect(() => { if (!slugTouched.value) f.slug.value = slugify(f.name.value); });
+
+        const model = {
+            ...f, images, variants, saving, isNew: !had, hasVariants: M.computed(() => variants.value.length > 0),
+            nameErr: M.computed(() => check.value.name || ''),
+            priceErr: M.computed(() => check.value.price || ''),
+            wasErr: M.computed(() => check.value.compareAt || ''),
+            stockErr: M.computed(() => check.value.stock || ''),
+            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()
+        };
+
+        let panel = null;
+        const html = `<div class="shp-form shp-editor">
+  <div class="shp-grid">
+    <div class="shp-wide">
+      <label class="form-label" for="sp-name">Name</label>
+      <input id="sp-name" class="form-input shp-input-lg" data-model="name.value" maxlength="140" placeholder="Hand-thrown mug">
+      <small class="shp-err" data-bind-hidden="!nameErr.value" data-bind-text="nameErr.value"></small>
+      <small class="shp-hint">Address: <code data-bind-text="url.value"></code> <button type="button" class="shp-link" data-on-click="editSlug">change</button></small>
+    </div>
+    <div class="shp-wide" data-part="slug" hidden>
+      <label class="form-label" for="sp-slug">Address <span data-help="The last part of the product's web address. Letters, numbers and dashes. Changing it breaks links people have saved."></span></label>
+      <input id="sp-slug" class="form-input" data-model="slug.value" maxlength="80">
+    </div>
+    <div class="shp-wide">
+      <label class="form-label">Pictures <span data-help="The first picture is the one on the card; the second shows when a shopper hovers over it. Drag to reorder. Pictures come from Media."></span></label>
+      <div class="shp-pics" data-part="pics"></div>
+    </div>
+    <div>
+      <label class="form-label" for="sp-price">Price <span data-help="What a shopper pays for one. Options can have their own price below."></span></label>
+      <div class="shp-money"><span data-bind-text="currency"></span><input id="sp-price" class="form-input" inputmode="decimal" data-model="price.value" placeholder="0.00"></div>
+      <small class="shp-err" data-bind-hidden="!priceErr.value" data-bind-text="priceErr.value"></small>
+    </div>
+    <div>
+      <label class="form-label" for="sp-was">Was <span data-help="An earlier, higher price. Shown struck through with a Sale flag. Leave empty when it is not on sale."></span></label>
+      <div class="shp-money"><span data-bind-text="currency"></span><input id="sp-was" class="form-input" inputmode="decimal" data-model="compareAt.value" placeholder="optional"></div>
+      <small class="shp-err" data-bind-hidden="!wasErr.value" data-bind-text="wasErr.value"></small>
+    </div>
+    <div class="shp-wide">
+      <label class="form-label" for="sp-summary">Summary <span data-help="One or two lines, shown on the card and at the top of the product's page."></span></label>
+      <input id="sp-summary" class="form-input" data-model="summary.value" maxlength="300">
+    </div>
+    <div class="shp-wide">
+      <label class="form-label" for="sp-desc">Description <span data-help="The full story, under the Add to basket button. Markdown and shortcodes work, as on any page."></span></label>
+      <textarea id="sp-desc" class="form-input shp-mono" rows="6" data-model="description.value"></textarea>
+    </div>
+    <div>
+      <label class="form-label" for="sp-cat">Category <span data-help="Shoppers filter the shop by category. Type a new one or pick one you have used."></span></label>
+      <input id="sp-cat" class="form-input" data-model="category.value" list="sp-cats" maxlength="60">
+      <datalist id="sp-cats">${categories().map(c => `<option value="${esc(c)}">`).join('')}</datalist>
+    </div>
+    <div>
+      <label class="form-label" for="sp-tags">Tags <span data-help="Comma-separated. Found by the shop's search, and by [shop-products tag=…]."></span></label>
+      <input id="sp-tags" class="form-input" data-model="tags.value" placeholder="gift, handmade">
+    </div>
+    <div>
+      <label class="form-label" for="sp-status">Status</label>
+      <select id="sp-status" class="form-select" data-model="status.value">
+        <option value="active">On sale</option><option value="draft">Draft - hidden</option><option value="archived">Archived</option>
+      </select>
+    </div>
+    <div class="shp-toggles">
+      <label class="shp-check"><input type="checkbox" data-part="featured"> Featured <span data-help="Shown first in the shop, with a Featured flag."></span></label>
+    </div>
+  </div>
+
+  <details class="shp-sect" data-part="sect-stock" open>
+    <summary>Options &amp; stock</summary>
+    <label class="shp-check"><input type="checkbox" data-part="trackStock"> Count stock <span data-help="Off: it never sells out. On: each sale takes one off, a refund can put it back, and it shows Sold out at 0."></span></label>
+    <div class="shp-grid" data-bind-hidden="hasVariants.value || !trackStock.value">
+      <div><label class="form-label" for="sp-stock">In stock</label><input id="sp-stock" class="form-input" type="number" min="0" step="1" data-model="stock.value">
+      <small class="shp-err" data-bind-hidden="!stockErr.value" data-bind-text="stockErr.value"></small></div>
+      <div><label class="form-label" for="sp-sku">SKU <span data-help="Your own stock code. Printed on packing slips."></span></label><input id="sp-sku" class="form-input" data-model="sku.value" maxlength="60"></div>
+    </div>
+    <div class="shp-variants">
+      <div class="shp-variants-head" data-bind-hidden="!hasVariants.value">
+        <label class="form-label" for="sp-optname">Options are</label>
+        <input id="sp-optname" class="form-input shp-optname" data-model="optionName.value" placeholder="Size, Colour…" maxlength="40">
+        <span data-help="Each option is something a shopper picks - a size, a colour - with its own price (empty = the product's price), stock code and stock."></span>
+      </div>
+      <div class="shp-vtable" data-part="variants"></div>
+      <small class="shp-err" data-bind-hidden="!variantErr.value" data-bind-text="variantErr.value"></small>
+      <button type="button" class="btn btn-sm btn-outline" data-on-click="addVariant"><span data-icon="plus" data-icon-size="13"></span> Add an option</button>
+    </div>
+  </details>
+
+  <details class="shp-sect">
+    <summary>Delivery &amp; tax</summary>
+    <label class="shp-check"><input type="checkbox" data-part="shippable"> Needs delivering <span data-help="Off for downloads, services and tickets: no delivery charge, and checkout does not ask for an address."></span></label>
+    <div class="shp-grid">
+      <div><label class="form-label" for="sp-weight">Weight (g) <span data-help="Used by Shopping Cart Pro's weight-based delivery rates."></span></label><input id="sp-weight" class="form-input" type="number" min="0" step="1" data-model="weight.value"></div>
+      <div><label class="form-label" for="sp-tax">Tax class <span data-help="Standard for most things. Reduced and zero rates apply with Shopping Cart Pro's tax rules; the free Cart uses one rate for everything."></span></label>
+      <select id="sp-tax" class="form-select" data-model="taxClass.value"><option value="standard">Standard</option><option value="reduced">Reduced</option><option value="zero">Zero-rated</option></select></div>
+    </div>
+  </details>
+
+  <div class="shp-actions">
+    <small class="shp-hint">Ctrl+Enter saves.</small>
+    <span class="shp-spacer"></span>
+    <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Close</button>
+    <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value"><span data-icon="check" data-icon-size="13"></span> <span data-bind-text="isNew ? 'Add product' : 'Save'"></span></button>
+  </div>
+</div>`;
+
+        // Checkboxes: set after render, and listened to - boolean attrs do not bind reliably.
+        const wireChecks = (el) => {
+            for (const k of ['featured', 'trackStock', 'shippable']) {
+                const box = el.querySelector(`[data-part="${k}"]`);
+                box.checked = f[k].peek();
+                box.addEventListener('change', () => { f[k].value = box.checked; });
+            }
+        };
+
+        const renderPics = (el) => {
+            const box = el.querySelector('[data-part="pics"]');
+            box.innerHTML = '';
+            images.peek().forEach((src, i) => {
+                const tile = document.createElement('div');
+                tile.className = 'shp-pic';
+                tile.draggable = true;
+                tile.dataset.i = String(i);
+                const img = document.createElement('img');
+                img.src = src;
+                img.alt = '';
+                const x = document.createElement('button');
+                x.type = 'button';
+                x.className = 'shp-pic-x';
+                x.title = 'Remove';
+                x.textContent = '×';
+                x.dataset.remove = String(i);
+                tile.append(img, x);
+                if (i === 0) { const b = document.createElement('span'); b.className = 'shp-pic-main'; b.textContent = 'Card'; tile.appendChild(b); }
+                box.appendChild(tile);
+            });
+            const add = document.createElement('button');
+            add.type = 'button';
+            add.className = 'shp-pic-add';
+            add.dataset.add = '1';
+            add.innerHTML = '<span data-icon="image" data-icon-size="20"></span><span>Add</span>';
+            box.appendChild(add);
+            I.scan(add);
+        };
+
+        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>` : '';
+            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' : '∞'}">
+  <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] ?? '';
+                box.appendChild(row);
+            });
+        };
+
+        panel = await openPanel({
+            title: had ? p.name : 'New product',
+            size: 'lg',
+            html,
+            model,
+            dirty,
+            before: (el) => {
+                wireChecks(el);
+                renderPics(el);
+                renderVariants(el);
+            },
+            cleanup: () => { panels.delete(panel?.so); stopSlug?.(); },
+            methods: {
+                cancel: () => panel?.close(),
+                editSlug: () => { panel.panel.querySelector('[data-part="slug"]').hidden = false; slugTouched.value = true; panel.panel.querySelector('#sp-slug').focus(); },
+                addVariant: () => {
+                    if (!variants.peek().length && !f.optionName.peek()) f.optionName.value = 'Size';
+                    variants.value = [...variants.peek(), {id: '', name: '', price: '', sku: '', stock: ''}];
+                    renderVariants(panel.panel);
+                    panel.panel.querySelector('.shp-vrow:last-child [data-k="name"]')?.focus();
+                },
+                async save() {
+                    if (model.cannot.peek()) { E.toast(Object.values(check.peek())[0] || 'Check the form.', {type: 'warning'}); return; }
+                    saving.value = true;
+                    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'});
+                        panel.close(true);
+                    } catch (err) {
+                        E.toast(`Not saved: ${err.message || err}`, {type: 'error'});
+                    } finally {
+                        saving.value = false;
+                    }
+                }
+            }
+        });
+        panels.add(panel.so);
+        const el = panel.panel;
+
+        // Pictures: add from Media, remove, drag to reorder.
+        const pics = el.querySelector('[data-part="pics"]');
+        pics.addEventListener('click', async (e) => {
+            const rm = e.target.closest('[data-remove]');
+            if (rm) { images.value = images.peek().filter((_, i) => i !== Number(rm.dataset.remove)); renderPics(el); 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); }
+            }
+        });
+        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(); });
+        pics.addEventListener('drop', (e) => {
+            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;
+            dragFrom = -1;
+            renderPics(el);
+        });
+
+        // Options: edits go straight into the list.
+        const vbox = el.querySelector('[data-part="variants"]');
+        vbox.addEventListener('input', (e) => {
+            const inp = e.target.closest('[data-k]');
+            if (!inp) return;
+            const i = Number(inp.closest('.shp-vrow').dataset.i);
+            variants.value = variants.peek().map((v, j) => (j === i ? {...v, [inp.dataset.k]: inp.value} : v));
+        });
+        vbox.addEventListener('click', (e) => {
+            const rm = e.target.closest('[data-vremove]');
+            if (!rm) return;
+            variants.value = variants.peek().filter((_, j) => j !== Number(rm.dataset.vremove));
+            renderVariants(el);
+        });
+
+        if (focus === 'stock') el.querySelector('.shp-vrow:not(.is-head) [data-k="stock"]')?.focus();
+        else if (!had) el.querySelector('#sp-name').focus();
+    }
+
+    /** Pick pictures from Media, several at once. */
+    async function pickImages() {
+        let media = [];
+        try {
+            const res = await H.get('/api/media');
+            media = (res.data ?? res ?? []).filter(m => /\.(jpe?g|png|gif|webp|avif|svg)$/i.test(m.name || m.url || ''));
+        } catch {
+            E.toast('Could not load Media.', {type: 'error'});
+            return null;
+        }
+        return new Promise((resolve) => {
+            const picked = new Set();
+            let result = null;
+            let pp = null;
+            openPanel({
+                title: 'Pictures from Media',
+                size: 'lg',
+                html: `<div class="shp-form">
+  <p class="shp-note">${media.length ? 'Click to choose, then Add. Upload new pictures under Media.' : 'No pictures in Media yet - upload some there first.'}</p>
+  <div class="shp-media" data-part="grid"></div>
+  <div class="shp-actions"><span class="shp-spacer"></span><button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+  <button type="button" class="btn btn-sm btn-primary" data-on-click="save">Add</button></div></div>`,
+                before: (el) => {
+                    const grid = el.querySelector('[data-part="grid"]');
+                    for (const m of media) {
+                        const b = document.createElement('button');
+                        b.type = 'button';
+                        b.className = 'shp-media-tile';
+                        b.dataset.url = m.url;
+                        const img = document.createElement('img');
+                        img.src = m.url;
+                        img.alt = '';
+                        img.loading = 'lazy';
+                        const cap = document.createElement('span');
+                        cap.textContent = m.name;
+                        b.append(img, cap);
+                        grid.appendChild(b);
+                    }
+                    grid.addEventListener('click', (e) => {
+                        const t = e.target.closest('.shp-media-tile');
+                        if (!t) return;
+                        if (picked.has(t.dataset.url)) picked.delete(t.dataset.url); else picked.add(t.dataset.url);
+                        t.classList.toggle('is-on', picked.has(t.dataset.url));
+                    });
+                },
+                cleanup: () => resolve(result),
+                methods: {
+                    cancel: () => pp?.close(true),
+                    save: () => { result = [...picked]; pp?.close(true); }
+                }
+            }).then(p => { pp = p; });
+        });
+    }
+
+    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)});
+    scope(() => {
+        ctx.container.querySelector('[data-banner-action="shop-new"]')?.remove();
+        [...panels].forEach(so => { try { so.close(true); } catch { /* gone */ } });
+    });
+
+    await load();
+    if (!here()) return;
+    I.scan(view);
+    if (ctx.id === 'new') edit(null);
+    else if (ctx.id) edit(ctx.id);
+}