domma-cms 1.8.32 → 1.8.34

package/plugins/theme-roller/admin/views/theme-roller-view.js

@@ -0,0 +1,639 @@
+/**
+ * Theme Roller - admin screen.
+ *
+ * Roller: Domma's ThemeRoller (from the tools bundle every admin loads) edits a
+ * theme live against the admin itself; Save stores it through this plugin's API.
+ * Saved themes: one row each, with where it is in use; click to edit,
+ * right-click / ⋮ / Shift+F10 for everything else. Custom CSS: content/custom.css.
+ *
+ * Built on the Tool upgrade path: domma-reactive state bound with
+ * M.applyBindings, context menus, help popovers, actions in the plugin banner;
+ * the banner itself (version, licence, expiry) is the CMS's plugin chrome.
+ *
+ * Three things about the ThemeRoller component shape this file:
+ *  - It re-themes the WHOLE admin while it runs (Domma.theme.set + a preview
+ *    <style> on body/:root). Leaving the screen destroys it and puts the admin's
+ *    own theme back - custom class and all (the CMS's admin-theme.js).
+ *  - It has no getBaseTheme(), and the base is NOT necessarily Domma.theme.get():
+ *    the tools bundle carries its own copy of the theme engine, so the roller's
+ *    dropdown and Domma can disagree. The base is what the roller's own dropdown
+ *    says (currentBase). The 1.0 screen called roller.getBaseTheme() on Save and
+ *    threw before sending anything, which is why saving never worked.
+ *  - loadPreset() and _refreshInputs() wipe the changes. A saved theme is loaded
+ *    by setting the base, building a fresh roller, then putting the changes in
+ *    place and re-rendering its inputs from them (loadInto below).
+ */
+import {themeCss, USAGE_LABEL} from '../lib/themes.js';
+import {OLD_DRAFT_KEY, RESTORE_ANSWERS, changesKey, draftKeyFor, filterThemes, listCounts, restoreQuestion, staleNote, stillDirty} from '../lib/view.js';
+import {promptWith} from '../lib/prompt.js';
+import {fmtDate} from '../../../_lib/admin/ui/dates.js';
+
+const API = '/plugins/theme-roller';
+const ROUTE = /^#\/plugins\/theme-roller\b/;
+
+const ROW = `
+<div class="trx-row" data-id="{{id}}" tabindex="0" data-bind-class="$root.editingId.value === id && 'is-editing'">
+    <span class="trx-swatch" aria-hidden="true"><span data-bind-style-background="c1"></span><span data-bind-style-background="c2"></span><span data-bind-style-background="c3"></span></span>
+    <span class="trx-row-main"><strong>{{label}}</strong><small>{{meta}}</small></span>
+    <span class="trx-chips" data-bind-hidden="!usageText"><span class="trx-chip">{{usageText}}</span></span>
+    <button type="button" class="trx-kebab" aria-label="Actions for {{label}}" title="Actions">⋮</button>
+</div>`;
+
+/** Filled by loadKit() on first mount - a plugin must not import admin/ statically. */
+let apiRequest, addBannerAction, helpPopovers, openMenuAt, viewLifetime, adminTheme, loadingLib;
+let lifetime;
+/** The last mount's admin-theme restore, still running when a quick remount starts. */
+let restoring = Promise.resolve();
+/**
+ * Unsaved work kept when the screen is left - per signed-in person
+ * (theme-roller.drafts.<uid>); no one signed in keeps nothing. The old shared
+ * key is removed when found, never read.
+ */
+function draftStore() {
+    let uid = '';
+    try { uid = S.get('auth_user')?.id || ''; } catch { /* storage unavailable */ }
+    const key = draftKeyFor(uid);
+    const drop = (k) => { try { S.remove ? S.remove(k) : S.set(k, null); } catch { /* ignore */ } };
+    try { if (S.get(OLD_DRAFT_KEY) != null) drop(OLD_DRAFT_KEY); } catch { /* storage unavailable */ }
+    return {
+        get() { if (!key) return null; try { return S.get(key); } catch { return null; } },
+        set(v) { if (key) { try { S.set(key, v); } catch { /* storage unavailable - nothing more to do */ } } },
+        remove() { if (key) drop(key); }
+    };
+}
+
+/** Run a menu item's action a task later: the Enter that picked it must not land in the confirm it opens. */
+const later = (fn) => (...args) => { setTimeout(() => fn(...args), 0); };
+
+async function loadKit() {
+    if (lifetime) return;
+    const [api, chrome, help, kit] = await Promise.all([
+        import('/admin/js/api.js'),
+        import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
+        import('/admin/js/lib/help-popover.js').catch(() => ({})),
+        import('/admin/js/lib/tool-kit.js')
+    ]);
+    ({apiRequest} = api);
+    addBannerAction = chrome.addBannerAction || (() => null);
+    helpPopovers = help.helpPopovers || (() => () => {});
+    ({openMenuAt, viewLifetime} = kit);
+    // CMS 0.73: applies a custom admin theme (base + class + CSS). Older: plain Domma.
+    adminTheme = await import('/admin/js/lib/admin-theme.js').catch(() => null);
+    // A skeleton while the list first loads (core 1.x; older cores show the slot's text).
+    loadingLib = await import('/admin/js/lib/loading.js').catch(() => null);
+    lifetime = viewLifetime(ROUTE);
+}
+
+const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+/** The site theme showing now: the day or night theme when switching is on. */
+function siteThemeNow(inUse = {}) {
+    const auto = inUse.autoTheme;
+    if (!auto) return inUse.theme || '';
+    const mins = (hm) => { const [h, m] = String(hm || '').split(':'); return (+h || 0) * 60 + (+m || 0); };
+    const now = new Date();
+    const t = now.getHours() * 60 + now.getMinutes();
+    return t >= mins(auto.dayStart || '07:00') && t < mins(auto.nightStart || '19:00') ? auto.dayTheme : auto.nightTheme;
+}
+
+/** Ask the sidebar to re-read this Tool's badge (the core's "Live counts"). */
+function refreshBadge() {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: '#/plugins/theme-roller'}})); } catch { /* no sidebar */ }
+}
+
+const usageText = (usage) => (usage || []).map(u => USAGE_LABEL[u] || u).join(' · ');
+
+export const themeRollerView = {
+    templateUrl: '/plugins/theme-roller/admin/templates/theme-roller.html',
+
+    async onMount($container) {
+        await loadKit();
+        // Left while the helpers loaded: nothing to set up, and nothing would tear it down.
+        if (!ROUTE.test(location.hash)) return;
+        lifetime.reset();
+        // A quick remount must not read the admin theme while the last mount is
+        // still putting it back - that restore would land under the new roller.
+        await restoring;
+        if (!ROUTE.test(location.hash)) return;
+        const root = $container.get(0).querySelector('.trx') || $container.get(0);
+        const here = () => ROUTE.test(location.hash) && root.isConnected;
+        const drafts = draftStore();
+
+        // ---- State ----
+        const themes = M.observable([]);
+        const loading = M.observable(true);
+        const supported = M.observable(true);
+        const editingId = M.observable('');          // '' = a new, unsaved theme
+        const editingLabel = M.observable('New theme');
+        const editingBase = M.observable('');
+        const dirty = M.observable(false);
+        const saving = M.observable(false);
+        const savingCss = M.observable(false);
+        const baseTokens = M.observable({});          // base id -> its token map, for swatches
+        const show = M.observable('all');             // Saved themes: all | used | unused
+        const query = M.observable('');
+        const counts = M.computed(() => listCounts(themes.value));
+        let editingWas = '';                           // the edited theme's updatedAt when editing began
+        let loadSeq = 0;                               // bumped by every loadInto: a save finishing later checks it
+        let inFlight = '';                             // what a running save sent (base|changes), '' when none
+        let cssWas = null;                             // content/custom.css as loaded
+        let status = {};                               // GET /status: what the site and admin use
+
+        const editing = M.computed(() => themes.value.find(t => t.id === editingId.value) || null);
+        const editingUsage = M.computed(() => editing.value?.usage || []);
+        const rows = M.observable([]);
+
+        scope(M.effect(() => {
+            const bases = baseTokens.value;
+            rows.value = filterThemes(themes.value, show.value, query.value).map((t) => {
+                const base = bases[t.baseTheme] || {};
+                const pick = (k) => t.changes[k] || base[k] || 'transparent';
+                return {
+                    id: t.id,
+                    label: t.label,
+                    meta: `On ${t.baseTheme} · ${Object.keys(t.changes).length} change${Object.keys(t.changes).length === 1 ? '' : 's'} · ${fmtDate(t.updatedAt)}`,
+                    usageText: usageText(t.usage),
+                    c1: pick('--dm-primary'), c2: pick('--dm-surface'), c3: pick('--dm-background')
+                };
+            });
+        }));
+
+        const data = {
+            themes, loading, supported, editingId, rows, dirty, saving, savingCss, show, query, counts,
+            emptyText: M.computed(() => (!themes.value.length ? 'No saved themes yet - make one in the Roller tab and Save it.'
+                : query.value.trim() ? 'No theme matches.' : show.value === 'used' ? 'No saved theme is in use.' : 'Every saved theme is in use.')),
+            editingLabel,
+            editingMeta: M.computed(() => (editingBase.value ? `on ${editingBase.value}` : '')),
+            editingUsage,
+            editingUsageText: M.computed(() => usageText(editingUsage.value)),
+            saveText: M.computed(() => (editingId.value ? 'Save' : 'Save theme'))
+        };
+
+        function scope(disposer) { lifetime.add(disposer); return disposer; }
+
+        // ---- The roller ----
+        const rollerEl = root.querySelector('.trx-roller');
+        const makeRoller = window.DommaTools?.themeRoller ?? E.themeRoller;
+        let roller = null;
+
+        // The admin's own theme, taken off <body> while the roller runs: a
+        // custom admin theme's class would otherwise keep ITS tokens under the
+        // preview, and the roller would read and preview the wrong values.
+        const ownTheme = Domma.theme.get();
+        const ownCustom = [...document.body.classList].filter(k => k.startsWith('dm-custom-'));
+        ownCustom.forEach(k => document.body.classList.remove(k));
+        // A kept CSS draft that could not be put back (custom.css failed to load): carried into any later write.
+        let pendingCss = null;
+        scope(() => {
+            // Unsaved work is kept, not lost: offered back on the next visit.
+            if ((dirty.peek() && roller) || cssDirty) {
+                try {
+                    drafts.set({
+                        ...(dirty.peek() && roller && {theme: {id: editingId.peek(), label: editingLabel.peek(), base: currentBase(), changes: roller.getAll(),
+                            // A save of exactly these changes is still running: the theme WILL be newer, by the user's own hand.
+                            was: inFlight && inFlight === `${currentBase() || 'charcoal-dark'}|${changesKey(roller.getAll())}` ? '' : editingWas}}),
+                        ...(cssDirty ? {css: cssArea.value, cssWas} : pendingCss && {css: pendingCss.css, cssWas: pendingCss.cssWas}),
+                        at: new Date().toISOString()
+                    });
+                } catch { /* the roller is gone - nothing more to do */ }
+            }
+            try { roller?.destroy(); } catch { /* gone */ }
+            roller = null;
+            if (adminTheme?.refreshAdminTheme) {
+                restoring = adminTheme.refreshAdminTheme({theme: {admin: () => apiRequest('/theme/admin')}}).catch(() => {});
+            } else {
+                Domma.theme.set(ownTheme);
+                ownCustom.forEach(k => document.body.classList.add(k));
+            }
+        });
+        // Closing the tab with unsaved work asks first.
+        const onUnload = (e) => {
+            if (dirty.peek() || cssDirty) { e.preventDefault(); e.returnValue = ''; }
+        };
+        window.addEventListener('beforeunload', onUnload);
+        scope(() => window.removeEventListener('beforeunload', onUnload));
+
+        if (typeof makeRoller !== 'function') {
+            rollerEl.textContent = 'The Theme Roller needs Domma\'s tools bundle, which this admin does not load.';
+        }
+
+        /** The base the roller is previewing - its own dropdown, see the header. */
+        const currentBase = () => rollerEl.querySelector('#theme-select')?.value || editingBase.peek() || Domma.theme.get();
+
+        /**
+         * Show `theme` (or a blank theme on `base`) in a fresh roller. See the
+         * header: loadPreset() and _refreshInputs() would wipe the changes.
+         */
+        function loadInto(base, changes = {}) {
+            if (typeof makeRoller !== 'function' || !here()) return;
+            loadSeq++;
+            try { roller?.destroy(); } catch { /* gone */ }
+            roller = null;
+            Domma.theme.set(base);
+            try {
+                roller = makeRoller(rollerEl, {
+                baseTheme: base,
+                showPreviewPanel: true,
+                livePreview: true,
+                onChange: () => { dirty.value = true; },
+                onReset: () => { dirty.value = true; }
+                });
+            } catch (err) {
+                rollerEl.textContent = `The roller could not start: ${err.message}`;
+                return;
+            }
+            // Its dropdown is drawn before it applies the base: bring it level.
+            roller._updateThemeDropdown?.();
+            if (Object.keys(changes).length) {
+                if (typeof roller._render === 'function' && typeof roller._bindEvents === 'function') {
+                    roller._changes = {...changes};
+                    roller._updatePreview?.();
+                    roller._render();
+                    try { roller._accordionInstance?.destroy(); } catch { /* gone */ }
+                    roller._accordionInstance = Domma.elements.accordion('#theme-roller-accordion', {multiExpand: true, activeIndex: 0});
+                    roller._bindEvents();
+                } else {
+                    roller.setAll(changes);
+                }
+            }
+            editingBase.value = base;
+            dirty.value = false;
+        }
+
+        // Changing the base in the roller's own dropdown starts that base afresh.
+        const onBaseChange = (e) => {
+            if (e.target?.id !== 'theme-select') return;
+            editingBase.value = e.target.value;
+            dirty.value = true;
+        };
+        rollerEl.addEventListener('change', onBaseChange);
+        scope(() => rollerEl.removeEventListener('change', onBaseChange));
+
+        async function discardOk() {
+            return !dirty.value || await E.confirm('Discard the changes you have not saved?');
+        }
+
+        async function edit(id) {
+            const t = themes.peek().find(x => x.id === id);
+            if (!t || !await discardOk()) return;
+            editingId.value = t.id;
+            editingLabel.value = t.label;
+            editingWas = t.updatedAt || '';
+            loadInto(t.baseTheme, t.changes);
+            tabs.activate(0);
+        }
+
+        async function newTheme() {
+            if (!await discardOk()) return;
+            editingId.value = '';
+            editingLabel.value = 'New theme';
+            editingWas = '';
+            loadInto(currentBase() || 'charcoal-dark');
+        }
+
+        // ---- Server ----
+        async function load() {
+            try {
+                const both = Promise.all([
+                    apiRequest(`${API}/themes`),
+                    apiRequest(`${API}/status`).catch(() => ({supported: true}))
+                ]);
+                const slot = loading.peek() ? root.querySelector('.trx-loading') : null;
+                const [list, fetched] = slot && loadingLib?.whileLoading
+                    ? await loadingLib.whileLoading(slot, both, loadingLib.SHAPES?.iconRows ?? loadingLib.SHAPES?.rows) : await both;
+                if (!here()) return;
+                themes.value = Array.isArray(list) ? list : [];
+                status = fetched || {};
+                supported.value = status.supported !== false;
+                // The swatches show the base's colours where a theme did not change them.
+                const need = [...new Set(themes.peek().map(t => t.baseTheme))].filter(b => !baseTokens.peek()[b]);
+                if (need.length) {
+                    const got = await Promise.all(need.map(b => apiRequest(`/theme/themes/${encodeURIComponent(b)}`).catch(() => null)));
+                    if (!here()) return;
+                    const next = {...baseTokens.peek()};
+                    need.forEach((b, i) => { next[b] = got[i]?.tokens || {}; });
+                    baseTokens.value = next;
+                }
+                refreshBadge();   // every change reloads the list - the badge follows it
+            } catch (err) {
+                if (here()) E.toast(`Could not load the themes: ${err.message}`, {type: 'error'});
+            } finally {
+                loading.value = false;
+            }
+        }
+
+        const byId = (id) => themes.peek().find(t => t.id === id);
+
+        async function save() {
+            if (!roller || saving.peek()) return;
+            const changes = roller.getAll();
+            const baseTheme = currentBase() || 'charcoal-dark';
+            // What was sent: anything changed while the save is in flight stays unsaved.
+            const sent = `${baseTheme}|${changesKey(changes)}`;
+            const nowKey = () => (roller ? `${currentBase() || 'charcoal-dark'}|${changesKey(roller.getAll())}` : sent);
+            const seq = loadSeq;
+            saving.value = true;
+            inFlight = sent;
+            try {
+                if (editingId.peek()) {
+                    const saved = await apiRequest(`${API}/themes/${encodeURIComponent(editingId.peek())}`, {
+                        method: 'PUT', body: JSON.stringify({baseTheme, changes})
+                    });
+                    // Another theme was opened while it saved: report, refresh the list, touch nothing else.
+                    if (seq !== loadSeq || !here()) { if (here()) { E.toast(`Saved "${saved.label}".`, {type: 'success'}); await load(); } return; }
+                    editingBase.value = saved.baseTheme;
+                    editingWas = saved.updatedAt || editingWas;
+                    E.toast(`Saved "${saved.label}"${saved.usage?.length ? ` - in use: ${usageText(saved.usage)}` : ''}.`, {type: 'success'});
+                } else {
+                    const label = await E.prompt('Name this theme', {inputPlaceholder: 'e.g. Brand, Ocean custom…'});
+                    if (!label || !label.trim()) return;
+                    const saved = await apiRequest(`${API}/themes`, {method: 'POST', body: JSON.stringify({label, baseTheme, changes})});
+                    if (seq !== loadSeq || !here()) { if (here()) { E.toast(`Saved "${saved.label}".`, {type: 'success'}); await load(); } return; }
+                    editingId.value = saved.id;
+                    editingLabel.value = saved.label;
+                    editingBase.value = saved.baseTheme;
+                    editingWas = saved.updatedAt || '';
+                    E.toast(`Saved "${saved.label}".`, {type: 'success'});
+                }
+                dirty.value = stillDirty(sent, nowKey());
+                if (dirty.peek()) E.toast('Saved - the changes made while it saved are not saved yet.', {type: 'info'});
+                await load();
+            } catch (err) {
+                E.toast(`Not saved: ${err.message}`, {type: 'error'});
+            } finally {
+                saving.value = false;
+                inFlight = '';
+            }
+        }
+
+        async function saveAs() {
+            if (!roller) return;
+            const label = await promptWith('Save as a new theme called', {}, `${editingLabel.peek()} copy`);
+            if (!label || !label.trim() || !roller || saving.peek()) return;   // the screen may have gone meanwhile
+            const baseTheme = currentBase() || 'charcoal-dark';
+            const changes = roller.getAll();
+            const sent = `${baseTheme}|${changesKey(changes)}`;
+            const seq = loadSeq;
+            saving.value = true;
+            try {
+                const saved = await apiRequest(`${API}/themes`, {
+                    method: 'POST', body: JSON.stringify({label, baseTheme, changes})
+                });
+                if (seq !== loadSeq || !here()) { if (here()) { E.toast(`Saved as "${saved.label}".`, {type: 'success'}); await load(); } return; }
+                editingId.value = saved.id;
+                editingLabel.value = saved.label;
+                editingWas = saved.updatedAt || '';
+                dirty.value = stillDirty(sent, roller ? `${currentBase() || 'charcoal-dark'}|${changesKey(roller.getAll())}` : sent);
+                E.toast(dirty.peek() ? `Saved as "${saved.label}" - the changes made while it saved are not saved yet.` : `Saved as "${saved.label}".`, {type: dirty.peek() ? 'info' : 'success'});
+                await load();
+            } catch (err) {
+                E.toast(`Not saved: ${err.message}`, {type: 'error'});
+            } finally {
+                saving.value = false;
+            }
+        }
+
+        async function use(t, where) {
+            if (dirty.peek() && editingId.peek() === t.id) {
+                E.toast('Using the saved version - Save first to include your latest changes.', {type: 'info', duration: 6000});
+            }
+            if (where === 'site' && !t.usage.includes('site')) {
+                const status = await apiRequest(`${API}/status`).catch(() => ({}));
+                if (status.inUse?.autoTheme && !await E.confirm(
+                    'Day/night switching is on, so the site shows the day and night themes, not a single one. Use this theme on the site and turn switching off?')) return;
+            }
+            try {
+                await apiRequest(`${API}/themes/${encodeURIComponent(t.id)}/use`, {method: 'POST', body: JSON.stringify({where})});
+                E.toast(`"${t.label}" is now the ${where === 'site' ? 'site' : 'admin'} theme.`, {type: 'success'});
+                // The admin shows it once you leave the roller, which is previewing over it.
+                await load();
+            } catch (err) {
+                E.toast(`Could not use it: ${err.message}`, {type: 'error'});
+            }
+        }
+
+        async function unuse(t, where) {
+            try {
+                await apiRequest(`${API}/themes/${encodeURIComponent(t.id)}/unuse`, {method: 'POST', body: JSON.stringify({where})});
+                E.toast(`The ${where} is back on ${t.baseTheme}.`, {type: 'success'});
+                await load();
+            } catch (err) {
+                E.toast(`Could not change it: ${err.message}`, {type: 'error'});
+            }
+        }
+
+        async function duplicate(t) {
+            const label = await promptWith('Name the copy', {}, `${t.label} copy`);
+            if (!label || !label.trim()) return;
+            try {
+                const copy = await apiRequest(`${API}/themes/${encodeURIComponent(t.id)}/duplicate`, {method: 'POST', body: JSON.stringify({label})});
+                E.toast(`Made "${copy.label}".`, {type: 'success'});
+                await load();
+            } catch (err) {
+                E.toast(`Could not duplicate it: ${err.message}`, {type: 'error'});
+            }
+        }
+
+        async function rename(t) {
+            const label = await promptWith('Rename this theme', {}, t.label);
+            if (!label || !label.trim() || label.trim() === t.label) return;
+            try {
+                const saved = await apiRequest(`${API}/themes/${encodeURIComponent(t.id)}`, {method: 'PUT', body: JSON.stringify({label})});
+                if (editingId.peek() === t.id) { editingLabel.value = saved.label; editingWas = saved.updatedAt || editingWas; }
+                await load();
+            } catch (err) {
+                E.toast(`Could not rename it: ${err.message}`, {type: 'error'});
+            }
+        }
+
+        function exportCss(t) {
+            const blob = new Blob([themeCss(t)], {type: 'text/css'});
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = `${t.id}.css`;
+            a.click();
+            setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+        }
+
+        async function remove(t) {
+            const inUse = t.usage.length ? ` It is in use (${usageText(t.usage)}); those go back to ${esc(t.baseTheme)}.` : '';
+            // E.confirm renders its message as (sanitised) HTML: a theme's name goes in escaped.
+            if (!await E.confirm(`Delete "${esc(t.label)}"?${inUse}`)) return;
+            try {
+                await apiRequest(`${API}/themes/${encodeURIComponent(t.id)}`, {method: 'DELETE'});
+                if (editingId.peek() === t.id) { editingId.value = ''; editingLabel.value = 'New theme'; }
+                E.toast(`Deleted "${t.label}".`, {type: 'success'});
+                await load();
+            } catch (err) {
+                E.toast(`Could not delete it: ${err.message}`, {type: 'error'});
+            }
+        }
+
+        function items(t) {
+            if (!t) return [];
+            const on = (w) => t.usage.includes(w);
+            return [
+                {header: t.label},
+                {label: 'Edit in the roller', icon: 'edit', action: later(() => edit(t.id))},
+                {type: 'divider'},
+                on('site')
+                    ? {label: 'Stop using on the site', icon: 'x-circle', action: later(() => unuse(t, 'site'))}
+                    : {label: 'Use on the site', icon: 'globe', disabled: !supported.peek(), action: later(() => use(t, 'site'))},
+                on('admin')
+                    ? {label: 'Stop using in the admin', icon: 'x-circle', action: later(() => unuse(t, 'admin'))}
+                    : {label: 'Use in the admin', icon: 'layout', disabled: !supported.peek(), action: later(() => use(t, 'admin'))},
+                {type: 'divider'},
+                {label: 'Duplicate…', icon: 'copy', action: later(() => duplicate(t))},
+                {label: 'Rename…', icon: 'type', action: later(() => rename(t))},
+                {label: 'Export CSS', icon: 'download', action: later(() => exportCss(t))},
+                {type: 'divider'},
+                {label: 'Delete…', icon: 'trash', danger: true, action: later(() => remove(t))}
+            ];
+        }
+
+        // ---- Custom CSS ----
+        const cssArea = root.querySelector('.trx-css');
+        let cssDirty = false;
+        // Locked until the file has loaded: saving an empty or half-typed box
+        // over content/custom.css would replace the whole file.
+        let cssLoaded = false;
+        cssArea.disabled = true;
+        const onCssInput = () => { cssDirty = true; };
+        cssArea.addEventListener('input', onCssInput);
+        scope(() => cssArea.removeEventListener('input', onCssInput));
+        async function saveCss() {
+            if (!cssLoaded || savingCss.peek()) return;
+            savingCss.value = true;
+            const sent = cssArea.value;
+            try {
+                await apiRequest('/settings/custom-css', {method: 'PUT', body: JSON.stringify({css: sent})});
+                cssWas = sent;
+                // Typed while it saved: still to save.
+                cssDirty = cssArea.value !== sent;
+                E.toast(cssDirty ? 'Custom CSS saved - what you typed since is not saved yet.' : 'Custom CSS saved.', {type: cssDirty ? 'info' : 'success'});
+            } catch (err) {
+                E.toast(`Custom CSS not saved: ${err.message}`, {type: 'error'});
+            } finally {
+                savingCss.value = false;
+            }
+        }
+        const onCssKey = (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); saveCss(); }
+        };
+        cssArea.addEventListener('keydown', onCssKey);
+        scope(() => cssArea.removeEventListener('keydown', onCssKey));
+        const cssLoad = apiRequest('/settings/custom-css').then((r) => {
+            cssArea.value = r?.css || '';
+            cssWas = cssArea.value;
+            cssLoaded = true;
+            cssArea.disabled = false;
+        }).catch((err) => {
+            cssArea.placeholder = /403|forbidden|permission/i.test(String(err?.message || err))
+                ? 'Custom CSS needs the Site Settings permission.'
+                : `Could not load content/custom.css (${err?.message || err}) - reload to try again.`;
+        });
+
+        // ---- Bindings ----
+        root.querySelector('.trx-list').innerHTML = ROW;
+        const tabs = E.tabs(root.querySelector('.trx-tabs'), {tabSelector: '.tab-item', panelSelector: '.tab-panel'});
+        const bindings = M.applyBindings(data, root, {methods: {newTheme, save, saveAs, saveCss,
+            s_all: () => { show.value = 'all'; }, s_used: () => { show.value = 'used'; }, s_unused: () => { show.value = 'unused'; }}});
+        scope(() => bindings.dispose());
+        scope(helpPopovers(root, {position: 'bottom'}));
+
+        // Saved themes: click edits; right-click, ⋮ or Shift+F10 for the rest.
+        const list = root.querySelector('.trx-list');
+        const rowMenu = E.contextMenu(list, {
+            cursor: 'glyph', match: '.trx-row', inherit: false, density: 'compact',
+            items: (row) => items(byId(row.dataset.id))
+        });
+        scope(() => rowMenu?.destroy?.());
+        const onListClick = (e) => {
+            const row = e.target.closest('.trx-row');
+            if (!row) return;
+            if (e.target.closest('.trx-kebab')) { openMenuAt(e.target.closest('.trx-kebab')); return; }
+            edit(row.dataset.id);
+        };
+        const onListKey = (e) => {
+            const row = e.target.closest('.trx-row');
+            if (!row) return;
+            if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(row); }
+            else if (e.key === 'Enter' && e.target === row) {
+                // A task later: this Enter must not answer the "discard?" confirm edit() may open.
+                e.preventDefault(); e.stopPropagation();
+                const id = row.dataset.id;
+                setTimeout(() => edit(id), 0);
+            }
+        };
+        list.addEventListener('click', onListClick);
+        list.addEventListener('keydown', onListKey);
+        scope(() => { list.removeEventListener('click', onListClick); list.removeEventListener('keydown', onListKey); });
+
+        // The theme being edited: same menu, from the ⋮ beside Save.
+        const more = root.querySelector('.trx-more');
+        const moreMenu = E.contextMenu(more.parentElement, {
+            cursor: 'glyph', match: '.trx-more', inherit: false, density: 'compact',
+            items: () => items(byId(editingId.peek()))
+        });
+        scope(() => moreMenu?.destroy?.());
+        const onMore = () => openMenuAt(more);
+        more.addEventListener('click', onMore);
+        scope(() => more.removeEventListener('click', onMore));
+
+        // Banner: the screen's own actions, beside the version and licence.
+        addBannerAction($container, {id: 'theme-roller-new', icon: 'plus', title: 'New theme', onClick: () => newTheme()});
+        addBannerAction($container, {id: 'theme-roller-save', icon: 'save', title: 'Save',
+            onClick: () => (tabs.getActive() === 2 ? saveCss() : save())});
+
+        I.scan(root);
+        await load();
+        if (!here()) return;          // left while loading - do not start a roller over another screen
+        // Start on the site's current theme - the one showing now, the day or
+        // night theme when switching is on. A saved custom theme opens for
+        // editing; a built-in one starts a new theme on it. (1.0 always started
+        // on the component's default, charcoal-dark.)
+        const siteNow = siteThemeNow(status.inUse);
+        const saved = themes.peek().find(t => t.id === siteNow)
+            || themes.peek().find(t => t.usage.includes('admin'));
+        if (saved) {
+            editingId.value = saved.id;
+            editingLabel.value = saved.label;
+            editingWas = saved.updatedAt || '';
+            loadInto(saved.baseTheme, saved.changes);
+        } else {
+            loadInto(status.builtins?.includes(siteNow) ? siteNow : (ownTheme || 'charcoal-dark'));
+        }
+        I.scan(root);
+
+        // Unsaved work from the last visit: OK throws it away, Cancel / Escape keeps it (restores).
+        const draft = drafts.get();
+        if (draft && (draft.theme || draft.css != null)) {
+            // Older than what is saved now? Say so before they choose.
+            if (draft.css != null) await cssLoad;
+            const note = staleNote(draft, themes.peek(), cssLoaded ? cssWas : null);
+            if (!here()) return;
+            const throwAway = Boolean(await E.confirm(esc(restoreQuestion(draft, note)), {...RESTORE_ANSWERS}));
+            // Removed only once they have answered: leaving while asked keeps it for next time.
+            if (!here()) return;
+            drafts.remove();
+            if (!throwAway) {
+                if (draft.theme) {
+                    const kept = themes.peek().find(t => t.id === draft.theme.id);
+                    editingId.value = kept ? draft.theme.id : '';
+                    editingLabel.value = editingId.peek() ? draft.theme.label : 'New theme';
+                    editingWas = kept?.updatedAt || '';
+                    loadInto(draft.theme.base, draft.theme.changes || {});
+                    dirty.value = true;
+                }
+                if (draft.css != null) {
+                    if (cssLoaded) { cssArea.value = draft.css; cssDirty = true; }
+                    else {
+                        // custom.css could not be loaded, so there is nothing to put it over: keep the CSS for next time.
+                        pendingCss = {css: draft.css, cssWas: draft.cssWas};
+                        drafts.set({...pendingCss, at: draft.at});
+                        E.toast('Custom CSS could not be loaded - your unsaved CSS is kept for next time.', {type: 'warning'});
+                    }
+                }
+            }
+        }
+    }
+};

package/plugins/theme-roller/config.js

@@ -0,0 +1 @@
+export default {};