domma-cms 1.8.33 → 1.8.34

package/plugins/messages/tests/messages.test.js

@@ -0,0 +1,167 @@
+/** The pure part of Messages - admin/lib/messages.js. */
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {
+    ago, arrangeThreads, attachmentUrl, buildBubbles, cleanAttachments, cleanDrafts, dayLabel, filterCounts,
+    indexByThread, initials, messageRights, threadTitle, unreadBadge, UNREAD_AFTER_MS, unreadKey, unreadNotices,
+    CALL_PICK_MAX, callGroupName, callTarget, callTargetText} from '../admin/lib/messages.js';
+
+const me = 'u1';
+const T = (id, extra = {}) => ({id, kind: 'group-adhoc', name: id.toUpperCase(), participants: [{id: me, name: 'Me'}, {id: 'u2', name: 'Ann'}], unread: 0, lastMessageAt: '2026-09-20T10:00:00Z', ...extra});
+
+test('titles: a DM is the other person, a group its name', () => {
+    assert.equal(threadTitle({kind: 'dm', participants: [{id: me, name: 'Me'}, {id: 'u2', name: 'Ann Lee'}]}, me), 'Ann Lee');
+    assert.equal(threadTitle({kind: 'dm', participants: [me, 'u9']}, me), 'u9');
+    assert.equal(threadTitle({kind: 'group-adhoc', name: ''}, me), 'Unnamed group');
+    assert.equal(initials('Ann Lee'), 'AL');
+    assert.equal(initials(''), '?');
+});
+
+test('arrange: newest first; inbox hides archived; unread and archived filters; search', () => {
+    const list = [T('a', {lastMessageAt: '2026-09-01T00:00:00Z', unread: 2}), T('b', {archivedBy: [me]}), T('c', {lastMessageAt: '2026-09-24T00:00:00Z', lastMessagePreview: 'budget'})];
+    assert.deepEqual(arrangeThreads(list, {myId: me}).map(t => t.id), ['c', 'a']);
+    assert.deepEqual(arrangeThreads(list, {myId: me, filter: 'unread'}).map(t => t.id), ['a']);
+    assert.deepEqual(arrangeThreads(list, {myId: me, filter: 'archived'}).map(t => t.id), ['b']);
+    assert.deepEqual(arrangeThreads(list, {myId: me, query: 'BUDGET'}).map(t => t.id), ['c']);
+    assert.deepEqual(filterCounts(list, me), {inbox: 2, unread: 1, archived: 1});
+    // Someone else's archive is not mine.
+    assert.equal(arrangeThreads([T('x', {archivedBy: ['u2']})], {myId: me}).length, 1);
+});
+
+test('rights: edit only mine, inside the window; delete mine, or as admin or thread creator', () => {
+    const now = Date.parse('2026-09-25T12:00:00Z');
+    const m = {senderId: me, createdAt: '2026-09-25T11:50:00Z'};
+    assert.deepEqual([messageRights(m, {myId: me, now}).canEdit, messageRights(m, {myId: me, now}).editLeftMinutes], [true, 5]);
+    assert.equal(messageRights({...m, createdAt: '2026-09-25T11:00:00Z'}, {myId: me, now}).canEdit, false);
+    const theirs = {senderId: 'u2', createdAt: m.createdAt};
+    assert.equal(messageRights(theirs, {myId: me, now}).canDelete, false);
+    assert.equal(messageRights(theirs, {myId: me, now, isAdmin: true}).canDelete, true);
+    assert.equal(messageRights(theirs, {myId: me, now, threadCreator: me}).canDelete, true);
+    assert.equal(messageRights({...m, deletedAt: 'x'}, {myId: me, now}).canDelete, false);
+});
+
+test('attachments: the address is always rebuilt - a stored url is never trusted', () => {
+    assert.equal(attachmentUrl({mediaId: 'a b.png'}), '/media/a%20b.png');
+    assert.equal(attachmentUrl({mediaId: 'x.png', url: 'javascript:alert(1)'}), '/media/x.png');
+    assert.equal(attachmentUrl({url: '/media/y.png'}), '/media/y.png');
+    const clean = cleanAttachments([{mediaId: 'ok.pdf', filename: 'Ok', url: 'https://evil'}, {mediaId: '../etc/passwd'}, {filename: 'no id'}]);
+    assert.deepEqual(clean, [{mediaId: 'ok.pdf', filename: 'Ok', mime: '', size: 0, url: '/media/ok.pdf'}]);
+});
+
+test('drafts: whitelisted, empty ones dropped', () => {
+    const d = cleanDrafts({t1: {text: 'hi', attachments: [{mediaId: 'a.png', filename: 'a'}, {nope: 1}]}, t2: {text: '   ', attachments: []}, t3: 'junk'});
+    assert.deepEqual(Object.keys(d), ['t1']);
+    assert.equal(d.t1.attachments.length, 1);
+    assert.deepEqual(cleanDrafts(null), {});
+});
+
+test('bubbles: a day separator on each new day; the sender only in groups, only when it changes', () => {
+    const now = Date.parse('2026-09-25T12:00:00Z');
+    const msgs = [
+        {id: '1', senderId: 'u2', body: 'hi', createdAt: '2026-09-24T09:00:00Z'},
+        {id: '2', senderId: 'u2', body: 'again', createdAt: '2026-09-24T09:01:00Z'},
+        {id: '3', senderId: me, body: 'yo', createdAt: '2026-09-25T09:00:00Z', editedAt: 'x'},
+        {id: '4', senderId: 'u2', body: '', deletedAt: 'x', createdAt: '2026-09-25T09:05:00Z', attachments: [{mediaId: 'a.png', mime: 'image/png'}]}
+    ];
+    const b = buildBubbles(msgs, {myId: me, isGroup: true, nameOf: () => 'Ann', now});
+    assert.deepEqual(b.map(x => x.isDay ? `[${x.dayLabel}]` : x.id), ['[Yesterday]', '1', '2', '[Today]', '3', '4']);
+    assert.deepEqual(b.filter(x => !x.isDay).map(x => x.showSender), [true, false, false, true]);
+    assert.match(b[4].meta, /edited/);
+    assert.equal(b[5].bodyText, 'message deleted');
+    assert.equal(b[5].attachments.length, 0, 'a deleted message shows no attachments');
+    assert.equal(buildBubbles(msgs, {myId: me, isGroup: false, now}).some(x => x.showSender), false);
+    assert.equal(dayLabel('nonsense', now), '');
+    // 1.6: a line typed in the conversation's call says so beside the time.
+    const inCall = buildBubbles([{id: '5', senderId: 'u2', body: 'from the call', createdAt: '2026-09-25T10:00:00Z', callChat: {id: 'x', who: 'w'}}], {myId: me, now});
+    assert.match(inCall.find(x => x.id === '5').meta, /in the call/);
+});
+
+test('badge: unread in conversations not archived; plain text popover', () => {
+    const now = Date.parse('2026-09-25T12:00:00Z');
+    const b = unreadBadge([T('a', {unread: 2}), T('b', {unread: 5, archivedBy: [me]}), T('c', {unread: 1, name: '<b>x</b>'})], me, now);
+    assert.equal(b.count, 3);
+    assert.equal(b.label, '3 unread messages in 2 conversations');
+    assert.equal(b.tone, 'info');
+    assert.deepEqual(b.details.rows.map(r => r.value), ['3', '2', '1']);
+    assert.ok(b.details.items.some(i => i.text === '<b>x</b>'), 'names pass through as text');
+    assert.match(b.details.items.find(i => i.text === 'A').meta, /^2 unread · /);
+    assert.equal(unreadBadge([], me, now).count, 0);
+    assert.equal(unreadBadge([], me, now).showZero, true);
+    assert.equal(b.showZero, true);
+});
+
+test('unread notices: waiting 10 minutes, one per conversation, to the recipient only', () => {
+    const now = Date.parse('2026-09-26T12:00:00Z');
+    const at = (mins) => new Date(now - mins * 60_000).toISOString();
+    const threads = [
+        {id: 't1', kind: 'dm', participants: ['a', 'b']},
+        {id: 't2', kind: 'group-adhoc', name: 'Site team', participants: ['a', 'b', 'c'], archivedBy: ['c']}
+    ];
+    const msgs = [
+        {threadId: 't1', senderId: 'a', body: 'Are you in today?', createdAt: at(12), readBy: ['a']},
+        {threadId: 't1', senderId: 'a', body: 'just now', createdAt: at(2), readBy: ['a']},
+        {threadId: 't2', senderId: 'b', body: 'Skip', createdAt: at(30), readBy: ['b', 'a']},
+        {threadId: 't2', senderId: 'b', body: 'old', createdAt: at(60 * 24 * 3), readBy: ['b']}
+    ];
+    const n = unreadNotices(threads, msgs, {a: 'Ann', b: 'Bob'}, now);
+    assert.equal(n.length, 1, 'b in the DM; a read the group; c archived it; the 3-day-old one is left alone');
+    assert.equal(n[0].title, 'Ann sent you a message');
+    assert.equal(n[0].body, 'Are you in today?');
+    assert.deepEqual(n[0].audience, {userIds: ['b']});
+    assert.equal(n[0].dedupeKey, unreadKey('t1', 'b'));
+    assert.ok(UNREAD_AFTER_MS === 600_000);
+});
+
+test('older dates read dd/mm/yyyy: the list stamp and the day separator', () => {
+    const now = new Date(2026, 8, 27, 12, 0).getTime();
+    const old = new Date(2026, 8, 3, 9, 30).toISOString();
+    assert.equal(ago(old, now), '03/09/2026');
+    assert.equal(dayLabel(old, now), 'Thu 03/09/2026');
+});
+
+test('Call…: which conversation a call with the people picked goes to', () => {
+    const P = (...ids) => ids.map(id => ({id, name: id}));
+    const threads = [
+        {id: 'dm-ann', kind: 'dm', participants: P(me, 'u2'), lastMessageAt: '2026-09-20T10:00:00Z'},
+        {id: 'dm-bob-archived', kind: 'dm', participants: [me, 'u3'], archivedBy: [me]},
+        {id: 'g-old', kind: 'group-adhoc', name: 'Old', participants: P(me, 'u2', 'u3'), lastMessageAt: '2026-09-01T10:00:00Z'},
+        {id: 'g-new', kind: 'group-adhoc', name: 'New', participants: P('u3', me, 'u2'), lastMessageAt: '2026-09-25T10:00:00Z'},
+        {id: 'g-big', kind: 'group-adhoc', name: 'Big', participants: P(me, 'u2', 'u3', 'u4')},
+        {id: 'g-gone', kind: 'group-adhoc', name: 'Gone', participants: P(me, 'u4', 'u5'), archivedBy: [me]},
+        {id: 'm-team', kind: 'group-managed', name: 'Team', participants: P(me, 'u5', 'u6')},
+        {id: 'g-without-me', kind: 'group-adhoc', name: 'Them', participants: P('u6', 'u7')}
+    ];
+    assert.equal(callTarget(threads, me, ['u2']).id, 'dm-ann', 'one person: your DM');
+    assert.equal(callTarget(threads, me, ['u3']).id, 'dm-bob-archived', 'a DM is one per pair, archived or not');
+    assert.deepEqual(callTarget(threads, me, ['u9']), {create: {kind: 'dm', participants: ['u9']}});
+    assert.equal(callTarget(threads, me, ['u3', 'u2']).id, 'g-new', 'exactly those people, the latest used');
+    assert.equal(callTarget(threads, me, ['u2', 'u3', 'u2', me]).id, 'g-new', 'repeats and yourself are ignored');
+    assert.deepEqual(callTarget(threads, me, ['u4', 'u5']), {create: {kind: 'group-adhoc', participants: ['u4', 'u5']}}, 'not one you archived');
+    assert.ok(callTarget(threads, me, ['u5', 'u6']).create, 'a managed group is not taken for an ad-hoc call');
+    assert.ok(callTarget(threads, me, ['u6', 'u7']).create, 'nor one you are not in');
+    assert.equal(callTarget(threads, me, []), null);
+    assert.equal(CALL_PICK_MAX, 5);
+    assert.ok(callTarget(threads, me, ['a', 'b', 'c', 'd', 'e']).create);
+    assert.equal(callTarget(threads, me, ['a', 'b', 'c', 'd', 'e', 'f']), null, 'a call holds 6, you included');
+
+    assert.equal(callGroupName([{name: 'Alex Carter'}, {name: 'Priya Shah'}, {name: 'Sam Patel'}]), 'Alex, Priya and Sam');
+    assert.equal(callGroupName([{name: 'Alex Carter'}, {name: 'Priya'}]), 'Alex and Priya');
+    assert.equal(callGroupName([]), 'Call');
+    assert.ok(callGroupName(Array.from({length: 30}, () => ({name: 'Bartholomew'}))).length <= 80);
+
+    assert.equal(callTargetText(callTarget(threads, me, ['u2']), me), 'Calls in your conversation with u2.');
+    assert.equal(callTargetText(callTarget(threads, me, ['u2', 'u3']), me), 'Calls in your group "New".');
+    assert.equal(callTargetText(callTarget(threads, me, ['u8', 'u9']), me), 'Starts a new group for these people and calls.');
+    assert.equal(callTargetText(null, me), '');
+});
+
+test('indexByThread: one list per conversation, in collection order; entries with no thread are left out', () => {
+    const E = (id, threadId, extra = {}) => ({id, data: {threadId, ...extra}});
+    const idx = indexByThread([E('m1', 't1'), E('m2', 't2'), E('m3', 't1', {deletedAt: 'x'}), {id: 'odd', data: {}}, null]);
+    assert.deepEqual([...idx.keys()], ['t1', 't2']);
+    assert.deepEqual(idx.get('t1').map(e => e.id), ['m1', 'm3']);   // deleted ones stay in: the routes decide what to skip
+    assert.deepEqual(idx.get('t2').map(e => e.id), ['m2']);
+    assert.equal(idx.get('t9'), undefined);
+    assert.equal(indexByThread([]).size, 0);
+    assert.equal(indexByThread(undefined).size, 0);
+});

package/plugins/theme-roller/CLAUDE.md

@@ -0,0 +1,65 @@
+# Theme Roller
+
+Makes custom themes - a built-in Domma theme plus the `--dm-*` tokens changed on top - and offers them to
+the CMS with `hooks.registerThemes` (domma-cms 0.73+). The CMS does the rest: they are listed under
+Custom themes in Content › Theme and applied as `dm-theme-<base> dm-custom-<id>` (core
+`server/services/themeSettings.js`, "Custom themes"). This plugin only stores them and offers them.
+
+## Files
+
+- `plugin.js` - API + provider. Themes live in `data/themes/<id>.json` (a site's own, declared in
+  `contentPaths`, never shipped); an in-memory Map mirrors them so the provider - called on every page
+  render - never touches disk. Writes are tmp+rename. "Use" goes through the core's `saveThemeConfig`.
+- `admin/lib/themes.js` - PURE, shared by server and browser: slug/unique ids (never a built-in id),
+  cleaning tokens (same safe-value rule as the core), `usageOf`, `withoutTheme` (delete in use -> base),
+  `themeCss` (export).
+- `admin/views/theme-roller-view.js`, `admin/templates/theme-roller.html`, `admin/css/theme-roller.css`.
+- **The Custom CSS tab** edits the site-wide `content/custom.css` (inlined into every public page after the
+  theme) through CORE's `GET/PUT /api/settings/custom-css` - not this plugin's API - so it needs the
+  `settings.update` permission (Site Settings > Edit); without it the tab cannot load or save. The box stays
+  locked until the file has loaded (saving an empty box would replace the whole file); Ctrl+S saves.
+- `tests/themes.test.js` (pure), `tests/api.test.js` (API against the real core theme service -
+  snapshots and restores the CMS checkout's config/theme.json and site.json).
+
+A stored theme is `{id, label, baseTheme, changes, createdAt, updatedAt}`. Files from 1.0 (`name`, no
+label) load as id = label = name.
+
+## Gotchas (the ThemeRoller component, from Domma's tools bundle)
+
+- It re-themes the WHOLE admin while it runs (theme.set + a preview `<style>` on `body, :root` with
+  `!important`). The view takes the admin's `dm-custom-*` class off `<body>` while it runs, and on
+  leaving destroys the roller and re-applies the admin theme via the core's `admin-theme.js`.
+- There is NO `getBaseTheme()` (1.0 called it on Save and threw - that was "it doesn't save", along with
+  `data/themes/` never being created). The tools bundle has its OWN theme engine, so the roller's
+  dropdown and `Domma.theme.get()` can disagree: the base is `#theme-select`'s value (`currentBase`).
+- `loadPreset()` / `_refreshInputs()` wipe the changes. `loadInto` sets the base, builds a fresh
+  roller, puts `_changes` in place and re-renders its inputs (`_render` + accordion + `_bindEvents`),
+  falling back to `setAll` if those privates disappear. `_render` reads `_changes[var] || computed`.
+- E.prompt/E.confirm render HTML (sanitised): labels in the message go in `esc()`d. Never give a prompt its starting
+  value through `inputValue` (a `"` cuts it short) - use `promptWith` (admin/lib/prompt.js); a test bans it.
+- The public theme switcher cannot offer custom themes (the core refuses them there): a visitor can only switch
+  between built-in themes. Say so to a site owner who expects their custom theme in the switcher.
+
+## 1.2.0 (2026-10-15 Tool Upgrade, second pass)
+
+- Saved themes: All / In use / Not in use with counts, a search box, and core's skeleton on the first load
+  (`loading.js` at run time; `.trx-loading` keeps its text on an older core). `load()` checks `here()` after awaits.
+- **Saves never swallow newer edits**: `save()` compares what it sent (`base|changesKey`) with the roller after the
+  PUT and `saveCss()` the box with what it sent - anything changed meanwhile stays unsaved (and is drafted on leave).
+- **Drafts know their age**: the theme draft carries `was` (the theme's `updatedAt` when editing began) and the CSS
+  draft `cssWas` (the file as loaded or last saved). `staleNote()` (admin/lib/view.js, tests/view.test.js) adds to the
+  restore question when the theme was saved again or deleted since, or custom.css changed.
+
+## 1.2.1 - unsaved-work sweep
+
+The draft is per user (`theme-roller.drafts.<uid>`; the old shared `theme-roller.draft` is removed unread). Restore asks
+"Throw away the changes you left unsaved to …?" (OK throws away, Cancel/Escape keeps; `restoreQuestion` in
+admin/lib/view.js). A CSS draft whose file cannot be loaded is kept for next time, never dropped - `pendingCss` carries it
+into the leave write so unsaved theme changes cannot overwrite it. Row Enter and every menu action run a task later, so
+the Enter cannot answer the confirm they open.
+
+## 1.3.0 (2026-10-21): free
+
+`tier: free`, no `closedSource` - no licence is needed or checked any more (the engine only checks a
+`closedSource` plugin). Included in every hosted plan and free to self-host; not `bundle: false`, so the next
+`make sync-free-tier` ships it in the engine.

package/plugins/theme-roller/admin/css/theme-roller.css

@@ -0,0 +1,43 @@
+/* Theme Roller admin screen - see admin/views/theme-roller-view.js. */
+.trx { display: flex; flex-direction: column; gap: .75rem; }
+.trx [hidden] { display: none !important; }
+.trx-alert { margin: 0; display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.trx-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
+.trx-editing { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; min-width: 0; }
+.trx-editing small { color: var(--dm-text-muted); }
+.trx-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
+.trx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.trx-more { font-size: var(--dm-text-lg); line-height: 1; }
+.trx-chips { display: inline-flex; gap: .3rem; }
+.trx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); white-space: nowrap; }
+.trx-chip.is-dirty { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.trx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.trx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.trx-card-title { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
+.trx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.trx-list { display: flex; flex-direction: column; }
+.trx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.trx-row:last-child { border-bottom: 0; }
+.trx-row:hover, .trx-row:focus-visible { background: var(--dm-surface-hover, rgba(127,127,127,.08)); outline: none; }
+.trx-row.is-editing { box-shadow: inset 3px 0 0 var(--dm-primary); }
+.trx-swatch { display: inline-flex; flex-shrink: 0; width: 2.2rem; height: 1.4rem; border-radius: var(--dm-radius-sm); overflow: hidden; border: 1px solid var(--dm-border); }
+.trx-swatch span { flex: 1; }
+.trx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.trx-row-main strong, .trx-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.trx-row-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.trx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.trx-kebab:hover { color: var(--dm-primary); }
+.trx-css { width: 100%; min-height: 420px; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); }
+.trx-css-actions { display: flex; justify-content: flex-end; }
+@media (max-width: 640px) { .trx-row-main small { display: none; } }
+
+/* Saved themes: filter and search (1.2) */
+.trx-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
+.trx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.trx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.trx-seg button + button { border-left: 1px solid var(--dm-border); }
+.trx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.trx-seg small { font-size: var(--dm-text-xs); opacity: .75; margin-left: .2rem; }
+.trx-search { width: auto; flex: 0 1 14rem; padding: .25rem .5rem; font-size: var(--dm-text-sm); }

package/plugins/theme-roller/admin/lib/prompt.js

@@ -0,0 +1,22 @@
+/**
+ * E.prompt with a starting value that survives any character. Domma's
+ * `inputValue` is sanitised into a value="…" attribute, so a " in it cuts the
+ * text short (escaping does not help - it is decoded back). This sets the
+ * input's .value after the dialog is built instead. The same helper as the
+ * core admin's tool-kit promptWith (CMS 1.6.53), kept here so the plugin
+ * works on older cores too.
+ *
+ * @param {string} message
+ * @param {object} [options] - E.prompt options (without inputValue)
+ * @param {*} [value]        - the starting text
+ * @returns {Promise<string|null>}
+ */
+export function promptWith(message, options, value) {
+    const answer = E.prompt(message, options);
+    const input = [...document.querySelectorAll('.dm-dialog-input')].at(-1);
+    if (input) {
+        input.value = String(value ?? '');
+        setTimeout(() => { try { input.select(); } catch { /* gone */ } }, 60);
+    }
+    return answer;
+}

package/plugins/theme-roller/admin/lib/themes.js

@@ -0,0 +1,196 @@
+/**
+ * Theme Roller - the pure rules, shared by the server (plugin.js) and the admin
+ * screen. No I/O and no globals, so the tests run them directly.
+ *
+ * A saved theme is `{id, label, baseTheme, changes, createdAt, updatedAt}`:
+ * a built-in Domma theme plus the `--dm-*` tokens changed on top of it. The CMS
+ * applies it as the base's class plus `dm-custom-<id>` (see the core's
+ * themeSettings.js); this plugin only stores themes and offers them.
+ */
+
+/** A saved theme's id: what the CMS names its class and its config entries by. */
+export const ID_RE = /^[a-z0-9][a-z0-9-]{0,59}$/;
+const TOKEN_RE = /^--dm-[a-z0-9-]+$/;
+
+/**
+ * An id from a label: lowercase, hyphens, 60 characters at most.
+ *
+ * @param {string} label
+ * @returns {string} '' when nothing usable is left
+ */
+export function slugify(label) {
+    return String(label || '')
+        .toLowerCase()
+        .normalize('NFKD').replace(/[̀-ͯ]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 60)
+        .replace(/-+$/, '');
+}
+
+/**
+ * An id for a new theme that collides with nothing: not a built-in theme (the
+ * CMS would ignore it) and not another saved theme (it would overwrite it).
+ *
+ * @param {string} label
+ * @param {{builtins?: string[], taken?: string[]}} known
+ * @returns {string} '' when the label has nothing usable in it
+ */
+export function uniqueId(label, {builtins = [], taken = []} = {}) {
+    const base = slugify(label);
+    if (!base) return '';
+    const used = new Set([...builtins, ...taken]);
+    if (!used.has(base)) return base;
+    for (let n = 2; n < 1000; n++) {
+        const id = `${base.slice(0, 55)}-${n}`;
+        if (!used.has(id)) return id;
+    }
+    return '';
+}
+
+/**
+ * A token value that cannot break out of its declaration - the same rule the
+ * CMS applies before it emits one. Refused, not escaped.
+ */
+export function isSafeValue(value) {
+    if (typeof value !== 'string') return false;
+    const v = value.trim();
+    if (!v || v.length > 200) return false;
+    if (/[{}<>;\\]|\/\*|\*\//.test(v)) return false;   // the core's rule: no comment, no escapes
+    return !/@import|javascript:|expression\s*\(|url\s*\(/i.test(v);
+}
+
+/**
+ * Keep only real `--dm-*` tokens with plain values.
+ *
+ * @param {object} changes
+ * @returns {{changes: Object<string,string>, dropped: string[]}}
+ */
+export function cleanChanges(changes) {
+    const out = {};
+    const dropped = [];
+    for (const [k, v] of Object.entries(changes && typeof changes === 'object' ? changes : {})) {
+        if (TOKEN_RE.test(k) && isSafeValue(v)) out[k] = v.trim();
+        else dropped.push(k);
+    }
+    return {changes: out, dropped};
+}
+
+/** A label for display: trimmed, 80 characters, never empty. */
+export function cleanLabel(label, fallback = 'Untitled theme') {
+    const s = String(label ?? '').replace(/\s+/g, ' ').trim().slice(0, 80);
+    return s || fallback;
+}
+
+/**
+ * Where a theme is in use, from the CMS's theme config (config/theme.json).
+ *
+ * @param {string} id
+ * @param {object} cfg
+ * @returns {string[]} any of 'site', 'admin', 'day', 'night', 'region'
+ */
+export function usageOf(id, cfg = {}) {
+    const where = [];
+    const auto = cfg.autoTheme || {};
+    if (!auto.enabled && cfg.theme === id) where.push('site');
+    if (cfg.adminTheme === id) where.push('admin');
+    if (auto.enabled && auto.dayTheme === id) where.push('day');
+    if (auto.enabled && auto.nightTheme === id) where.push('night');
+    if ((cfg.overrides || []).some(o => o && o.enabled !== false && o.theme === id)) where.push('region');
+    return where;
+}
+
+/** Human wording for usageOf's keys. */
+export const USAGE_LABEL = {site: 'Site', admin: 'Admin', day: 'Day', night: 'Night', region: 'Region'};
+
+/**
+ * The theme config with every use of `id` swapped for `replacement` - what
+ * deleting a theme in use does, so nothing is left pointing at nothing.
+ *
+ * @param {object} cfg
+ * @param {string} id
+ * @param {string} replacement - a built-in theme, normally the deleted theme's base
+ * @returns {object|null} a partial config to save, or null when nothing uses it
+ */
+export function withoutTheme(cfg, id, replacement) {
+    const patch = {};
+    if (cfg.theme === id) patch.theme = replacement;
+    if (cfg.adminTheme === id) patch.adminTheme = replacement;
+    const auto = cfg.autoTheme || {};
+    if (auto.dayTheme === id || auto.nightTheme === id) {
+        patch.autoTheme = {
+            ...auto,
+            ...(auto.dayTheme === id && {dayTheme: replacement}),
+            ...(auto.nightTheme === id && {nightTheme: replacement})
+        };
+    }
+    if ((cfg.overrides || []).some(o => o?.theme === id)) {
+        patch.overrides = cfg.overrides.map(o => (o?.theme === id ? {...o, theme: replacement} : o));
+    }
+    return Object.keys(patch).length ? patch : null;
+}
+
+/**
+ * A standalone stylesheet for a theme - what "Export CSS" downloads. Scoped to
+ * the class the CMS uses, plus a `:root` block commented out for anyone
+ * pasting it into a page that does not.
+ *
+ * @param {{id: string, label?: string, baseTheme: string, changes: object}} theme
+ * @param {string} [date] - YYYY-MM-DD
+ * @returns {string}
+ */
+export function themeCss(theme, date = new Date().toISOString().slice(0, 10)) {
+    const {changes} = cleanChanges(theme.changes);
+    const lines = Object.entries(changes).map(([k, v]) => `    ${k}: ${v};`);
+    // A character class, not a `*/` pattern: removing `*/` from `**//` leaves `*/`.
+    const label = cleanLabel(theme.label, theme.id).replace(/[*/<>]/g, '');
+    return [
+        '/**',
+        ` * ${label} - a Domma theme on ${theme.baseTheme}`,
+        ` * Exported ${date} from the Theme Roller.`,
+        ` * Apply alongside the base: <body class="dm-theme-${theme.baseTheme} dm-custom-${theme.id}">`,
+        ' */',
+        `.dm-custom-${theme.id} {`,
+        ...lines,
+        '}',
+        ''
+    ].join('\n');
+}
+
+/**
+ * The sidebar badge and its hover popover (the core's countUrl contract:
+ * {count, label, tone, details: {title, rows, items, empty}}, all plain text).
+ * Count = saved themes; the popover says what the site and the admin wear now,
+ * then each saved theme and where it is in use.
+ *
+ * @param {Array<{id, label, baseTheme, usage?: string[]}>} themes - with usage filled in
+ * @param {object} cfg - the CMS theme config
+ * @returns {object}
+ */
+export function badgeFor(themes, cfg = {}) {
+    const byId = new Map(themes.map(t => [t.id, t]));
+    const name = (id) => (id ? (byId.get(id)?.label ?? id) : '-');
+    const inUse = themes.filter(t => (t.usage || []).length).length;
+    const auto = cfg.autoTheme?.enabled ? cfg.autoTheme : null;
+    const n = themes.length;
+    return {
+        count: n,
+        label: n ? `${n} custom theme${n === 1 ? '' : 's'}${inUse ? `, ${inUse} in use` : ''}` : 'No custom themes yet',
+        tone: 'info',
+        details: {
+            title: 'Theme Roller',
+            rows: [
+                auto
+                    ? {label: 'Site (day / night)', value: `${name(auto.dayTheme)} / ${name(auto.nightTheme)}`}
+                    : {label: 'Site theme', value: name(cfg.theme)},
+                {label: 'Admin theme', value: name(cfg.adminTheme)}
+            ],
+            items: themes.slice(0, 8).map(t => ({
+                text: t.label,
+                meta: `On ${t.baseTheme}${(t.usage || []).length ? ` · ${(t.usage).map(u => USAGE_LABEL[u] || u).join(', ')}` : ''}`,
+                ...((t.usage || []).length && {tone: 'ok'})
+            })),
+            empty: 'No saved themes yet - make one and Save it.'
+        }
+    };
+}

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

@@ -0,0 +1,88 @@
+/**
+ * Theme Roller - the screen's pure decisions: the Saved themes filter and its
+ * counts, whether a save left newer changes unsaved, and whether a kept draft
+ * is older than what the server now holds. No DOM, no storage; tested in
+ * tests/view.test.js.
+ *
+ * @module theme-roller/admin/lib/view
+ */
+
+export const SHOWS = ['all', 'used', 'unused'];
+
+/** How many themes each filter shows. */
+export function listCounts(themes = []) {
+    const used = themes.filter(t => (t.usage || []).length).length;
+    return {all: themes.length, used, unused: themes.length - used};
+}
+
+/** The themes a filter (and a search) shows. */
+export function filterThemes(themes = [], show = 'all', query = '') {
+    const q = String(query || '').trim().toLowerCase();
+    return themes.filter(t => {
+        const used = (t.usage || []).length > 0;
+        if (show === 'used' && !used) return false;
+        if (show === 'unused' && used) return false;
+        return !q || `${t.label} ${t.id} ${t.baseTheme}`.toLowerCase().includes(q);
+    });
+}
+
+/** A stable text of a theme's changes, to compare one save with the next. */
+export function changesKey(changes = {}) {
+    return JSON.stringify(Object.keys(changes).sort().map(k => [k, changes[k]]));
+}
+
+/**
+ * After a save: is what is in the roller now still what was sent? Anything
+ * changed while the save was in flight stays unsaved.
+ * @param {string} sent - changesKey(…) + the base, as sent
+ * @param {string} now - the same, read after the save
+ */
+export const stillDirty = (sent, now) => sent !== now;
+
+/**
+ * What a kept draft is worth on restore, as a sentence to add to the question
+ * (or '' when nothing changed since): the theme it edits was saved again, or
+ * deleted, or the Custom CSS file changed.
+ * @param {object} draft - {theme?: {id, was}, css?, cssWas?}
+ * @param {object[]} themes - the saved themes now
+ * @param {string|null} cssNow - content/custom.css now (null = not loaded)
+ */
+export function staleNote(draft, themes = [], cssNow = null) {
+    const notes = [];
+    if (draft?.theme?.id) {
+        const t = themes.find(x => x.id === draft.theme.id);
+        if (!t) notes.push('The theme has been deleted since - keeping yours starts it again as a new theme.');
+        else if (draft.theme.was && t.updatedAt !== draft.theme.was) notes.push('The theme was saved again since - keeping yours puts your older changes over it once you Save.');
+    }
+    if (draft?.css != null && draft.cssWas != null && cssNow != null && cssNow !== draft.cssWas) {
+        notes.push('content/custom.css has changed since - keeping yours replaces the newer file once you Save.');
+    }
+    return notes.join(' ');
+}
+
+/**
+ * The question asked when a kept draft is offered back: OK throws it away,
+ * Cancel and Escape keep it (restore). Plain text - the caller escapes it.
+ * @param {object} draft - {theme?: {id, label}, css?}
+ * @param {string} [note] - staleNote()
+ */
+export function restoreQuestion(draft, note = '') {
+    const parts = [];
+    if (draft?.theme) parts.push(draft.theme.id ? `the theme "${draft.theme.label || draft.theme.id}"` : 'a new theme');
+    if (draft?.css != null) parts.push('the Custom CSS');
+    return `Throw away the changes you left unsaved to ${parts.join(' and ') || 'this screen'}?${note ? ` ${note}` : ''}`;
+}
+
+/** The answers that go with restoreQuestion: OK throws away, Cancel (and Escape) keeps. */
+export const RESTORE_ANSWERS = Object.freeze({confirmText: 'Throw away', cancelText: 'Keep them'});
+
+/**
+ * Where the kept draft lives: per signed-in person, so a shared browser never
+ * offers one person's work to another. No one signed in: null - keep nothing.
+ */
+export function draftKeyFor(uid) {
+    return uid ? `theme-roller.drafts.${uid}` : null;
+}
+
+/** The pre-1.2.1 key, shared by everyone on the browser - removed when found, never read. */
+export const OLD_DRAFT_KEY = 'theme-roller.draft';