domma-cms 0.71.0 → 0.73.0

package/server/services/themeSettings.js

@@ -77,6 +77,8 @@ export function defaultThemeConfig() {
         theme: DEFAULT_THEME,
         adminTheme: DEFAULT_THEME,
         baseTheme: null,
+        // Base of each custom theme the config uses - see rememberCustomBases().
+        customBases: {},
         autoTheme: {
             enabled: false,
             dayTheme: 'charcoal-light',
@@ -174,6 +176,15 @@ export function listThemeTokens() {
  */
 export function getThemeDeclarations(themeId) {
     if (!themeId || !/^[a-z0-9-]+$/.test(themeId)) return null;
+    // A custom theme is its base with some tokens changed - adopted onto a
+    // region, it has to carry the whole set, not just the changes.
+    if (!listThemeIds().includes(themeId)) {
+        const custom = getCustomTheme(themeId);
+        if (!custom) return null;
+        const base = getThemeDeclarations(custom.baseTheme) || '';
+        const changed = Object.entries(custom.tokens).map(([k, v]) => `${k}: ${v};`).join('\n');
+        return [base, changed].filter(Boolean).join('\n');
+    }
     const css = readThemeStylesheet();
     // Anchored so `.dm-theme-x .child {}` descendant rules cannot be mistaken
     // for the theme's own block, and tolerant of the whitespace a rebuild or a
@@ -214,6 +225,144 @@ export function getThemeTokenMap(themeId) {
     return tokens;
 }
 
+// ---------------------------------------------------------------------------
+// Custom themes (plugins - the Theme Roller)
+// ---------------------------------------------------------------------------
+//
+// A custom theme is a built-in base plus the tokens it changes. It is not a
+// class Domma's engine knows - `Domma.theme.set()` refuses an unknown id and
+// strips every `dm-theme-*` class it did not put there - so it is applied as
+// TWO classes: the base's `dm-theme-<base>`, which Domma owns, and
+// `dm-custom-<id>`, which it leaves alone. The custom class's rule carries only
+// the changed tokens and is emitted after Domma's theme stylesheet, so it wins
+// on source order at equal specificity.
+//
+// Providers are functions, asked on every read: a plugin's themes change while
+// the site runs (save, rename, delete), and a registry snapshot would go stale.
+// A provider must be cheap and synchronous - the render path calls it.
+
+const CUSTOM_ID_RE = /^[a-z0-9][a-z0-9-]{0,59}$/;
+const _themeProviders = new Map();
+
+/**
+ * Register a source of custom themes. One per owner (a plugin's name); a second
+ * registration replaces the first, so a plugin that re-registers on reload does
+ * not double its themes.
+ *
+ * @param {string} owner
+ * @param {() => Array<{id: string, label?: string, baseTheme: string, tokens: Object<string,string>}>} provider
+ */
+export function registerThemeProvider(owner, provider) {
+    if (typeof owner !== 'string' || !owner) throw new Error('registerThemeProvider: owner is required');
+    if (typeof provider !== 'function') throw new Error('registerThemeProvider: provider must be a function');
+    _themeProviders.set(owner, provider);
+}
+
+/** @param {string} owner */
+export function unregisterThemeProvider(owner) {
+    _themeProviders.delete(owner);
+}
+
+/** The class a custom theme adds beside its base's `dm-theme-<base>`. */
+export function customThemeClass(id) {
+    return `dm-custom-${id}`;
+}
+
+/**
+ * Every custom theme the providers currently offer, cleaned: an id that is not
+ * a slug, that shadows a built-in theme or that another provider already took
+ * is dropped; an unknown base falls back to the default; only real `--dm-*`
+ * tokens with plain values survive.
+ *
+ * @returns {Array<{id: string, label: string, baseTheme: string, tokens: Object<string,string>, owner: string}>}
+ */
+export function listCustomThemes() {
+    const builtins = new Set(listThemeIds());
+    const out = [];
+    const seen = new Set();
+    for (const [owner, provider] of _themeProviders) {
+        let list;
+        try { list = provider(); } catch { continue; }
+        for (const t of Array.isArray(list) ? list : []) {
+            const id = typeof t?.id === 'string' ? t.id.trim().toLowerCase() : '';
+            if (!CUSTOM_ID_RE.test(id) || builtins.has(id) || seen.has(id)) continue;
+            const tokens = {};
+            for (const [k, v] of Object.entries(t.tokens || {})) {
+                if (TOKEN_RE.test(k) && typeof v === 'string' && v.trim() && isSafeTokenValue(v.trim())) tokens[k] = v.trim();
+            }
+            seen.add(id);
+            out.push({
+                id,
+                label: String(t.label || id).slice(0, 80),
+                baseTheme: builtins.has(t.baseTheme) ? t.baseTheme : DEFAULT_THEME,
+                tokens,
+                owner
+            });
+        }
+    }
+    return out;
+}
+
+/** @param {string} id @returns {object|null} */
+export function getCustomTheme(id) {
+    return listCustomThemes().find((t) => t.id === id) || null;
+}
+
+/**
+ * How to apply a theme id: the built-in Domma should be told, and the extra
+ * class a custom theme adds. A custom theme whose provider has gone (plugin
+ * disabled, licence lapsed) falls back to the base remembered when it was
+ * chosen - the page keeps its base look rather than breaking.
+ *
+ * @param {string} id
+ * @param {object} [cfg] - a loaded theme config, for `customBases`
+ * @returns {{dommaTheme: string, customClass: string, custom: boolean}}
+ */
+export function resolveThemeClasses(id, cfg = {}) {
+    if (!id) return {dommaTheme: DEFAULT_THEME, customClass: '', custom: false};
+    const builtins = listThemeIds();
+    if (builtins.includes(id)) return {dommaTheme: id, customClass: '', custom: false};
+    const custom = getCustomTheme(id);
+    if (custom) return {dommaTheme: custom.baseTheme, customClass: customThemeClass(id), custom: true};
+    const remembered = cfg?.customBases?.[id];
+    if (remembered && builtins.includes(remembered)) return {dommaTheme: remembered, customClass: customThemeClass(id), custom: true};
+    // The pre-provider Theme Roller stored its base as `baseTheme` beside a custom `theme`.
+    if (id === cfg?.theme && cfg?.baseTheme && builtins.includes(cfg.baseTheme)) {
+        return {dommaTheme: cfg.baseTheme, customClass: customThemeClass(id), custom: true};
+    }
+    // Anything else goes to Domma as it always did - it knows themes the
+    // stylesheet does not declare (core-light), and falls back on its own.
+    return {dommaTheme: id, customClass: '', custom: false};
+}
+
+/**
+ * The stylesheet for custom themes: one `.dm-custom-<id>` rule of the tokens
+ * each changes. Emitted after Domma's theme stylesheet (headInjectLate).
+ *
+ * @param {string[]|null} [ids] - only these (the ones in use); all when null
+ * @returns {string} CSS, or '' when there are none
+ */
+export function compileCustomThemeCss(ids = null) {
+    const wanted = ids ? new Set(ids.filter(Boolean)) : null;
+    return listCustomThemes()
+        .filter((t) => Object.keys(t.tokens).length && (!wanted || wanted.has(t.id)))
+        .map((t) => `/* ${t.label.replace(/[*/<>]/g, '')} (${t.baseTheme}) */\n.${customThemeClass(t.id)} {\n`
+            + Object.entries(t.tokens).map(([k, v]) => `${k}: ${v};`).join('\n') + '\n}')
+        .join('\n\n');
+}
+
+/**
+ * The page-head `<style>` for the custom themes a page can show, or ''. Only
+ * those: every theme a Roller keeps is ~250 tokens, and an unused draft's
+ * name has no business in public page source.
+ *
+ * @param {string[]} [ids] - the page's theme, day and night; all when omitted
+ */
+export function buildCustomThemeStyleTag(ids = null) {
+    const css = compileCustomThemeCss(ids);
+    return css ? `<style id="dm-custom-themes">\n${css.replace(/<\/style>/gi, '<\\/style>')}\n</style>` : '';
+}
+
 // ---------------------------------------------------------------------------
 // Load / save / migrate
 // ---------------------------------------------------------------------------
@@ -300,14 +449,15 @@ export function loadThemeConfigSync() {
  * @returns {Promise<object>} The stored config.
  */
 export async function saveThemeConfig(input) {
-    const errors = validateThemeConfig(input);
+    const stored = await loadThemeConfig();
+    const errors = validateThemeConfig(input, {remembered: rememberedIds(stored)});
     if (errors.length) {
         const err = new Error(errors.join('; '));
         err.validation = errors;
         throw err;
     }
 
-    const current = await loadThemeConfig();
+    const current = stored;
     const cfg = mergeDefaults({
         ...current,
         ...input,
@@ -319,6 +469,7 @@ export async function saveThemeConfig(input) {
         overrides: Array.isArray(input.overrides) ? input.overrides.map(normaliseOverride) : current.overrides
     });
     cfg.version = 1;
+    rememberCustomBases(cfg);
 
     await fs.mkdir(CONFIG_DIR, {recursive: true});
     await fs.writeFile(THEME_FILE, JSON.stringify(cfg, null, 2) + '\n', 'utf8');
@@ -327,6 +478,43 @@ export async function saveThemeConfig(input) {
     return cfg;
 }
 
+/**
+ * Record the base of every custom theme the config uses, so a page keeps that
+ * base if the theme's plugin goes away (see resolveThemeClasses). `baseTheme`
+ * keeps its old meaning - the base of the site theme when that is custom - for
+ * the site.json mirror's readers.
+ *
+ * @param {object} cfg - mutated
+ */
+function rememberCustomBases(cfg) {
+    const custom = new Map(listCustomThemes().map((t) => [t.id, t.baseTheme]));
+    const builtins = listThemeIds();
+    // A pre-provider Theme Roller config: `baseTheme` beside a custom `theme`,
+    // no customBases yet. Keep it, or the first save flips the site to default.
+    const legacy = {};
+    if (cfg.theme && cfg.baseTheme && !builtins.includes(cfg.theme) && builtins.includes(cfg.baseTheme)) {
+        legacy[cfg.theme] = cfg.baseTheme;
+    }
+    const used = [cfg.theme, cfg.adminTheme, cfg.autoTheme?.dayTheme, cfg.autoTheme?.nightTheme,
+        ...(cfg.overrides || []).map((o) => o?.theme)];
+    const bases = {};
+    for (const id of used) {
+        if (!id) continue;
+        if (custom.has(id)) bases[id] = custom.get(id);
+        else if (cfg.customBases?.[id]) bases[id] = cfg.customBases[id];   // provider away: keep what we knew
+        else if (legacy[id]) bases[id] = legacy[id];
+    }
+    cfg.customBases = bases;
+    cfg.baseTheme = bases[cfg.theme] || null;
+}
+
+/** Custom theme ids a stored config already uses and remembers the base of. */
+export function rememberedIds(cfg) {
+    const ids = Object.keys(cfg?.customBases || {});
+    if (cfg?.theme && cfg?.baseTheme && !listThemeIds().includes(cfg.theme)) ids.push(cfg.theme);
+    return ids;
+}
+
 /**
  * Rewrite the legacy site.json keys so third parties that still read them see
  * the current values. One-way: nothing reads these back.
@@ -415,7 +603,9 @@ function normaliseOverride(o) {
  */
 function isSafeTokenValue(value) {
     if (value.length > 200) return false;
-    if (/[{}<>;]/.test(value)) return false;
+    // A backslash can spell `url(` as `u\72l(`, and `/*` opens a comment that
+    // swallows the next declaration - neither has a legitimate use in a token.
+    if (/[{}<>;\\]|\/\*|\*\//.test(value)) return false;
     return !/@import|javascript:|expression\s*\(|url\s*\(/i.test(value);
 }
 
@@ -426,23 +616,33 @@ function isSafeTokenValue(value) {
  * @param {object} input
  * @returns {string[]}
  */
-export function validateThemeConfig(input) {
+export function validateThemeConfig(input, {remembered = []} = {}) {
     const errors = [];
     if (!input || typeof input !== 'object') return ['Theme config must be an object'];
 
-    const known = listThemeIds();
-    const checkTheme = (value, label) => {
+    const builtins = listThemeIds();
+    // Custom themes (a plugin's) are chosen like any other - except by the
+    // public switcher below, which switches through Domma's engine. One the
+    // config already uses stays valid after its plugin goes (`remembered` -
+    // its customBases): otherwise nothing else on the Theme screen could be
+    // saved until every use of it had been re-picked.
+    const known = builtins.length
+        ? [...builtins, ...listCustomThemes().map((t) => t.id), ...remembered]
+        : [];
+    const checkTheme = (value, label, allowed = known) => {
         if (value === undefined || value === null || value === '') return;
         if (typeof value !== 'string' || !/^[a-z0-9-]+$/.test(value)) {
             errors.push(`${label} is not a valid theme id`);
-        } else if (known.length && !known.includes(value)) {
-            errors.push(`${label}: unknown theme "${value}"`);
+        } else if (allowed.length && !allowed.includes(value)) {
+            errors.push(allowed === builtins && known.includes(value)
+                ? `${label}: "${value}" is a custom theme, which the public theme switcher cannot offer`
+                : `${label}: unknown theme "${value}"`);
         }
     };
 
     checkTheme(input.theme, 'Front-end theme');
     checkTheme(input.adminTheme, 'Admin theme');
-    if (input.baseTheme) checkTheme(input.baseTheme, 'Base theme');
+    if (input.baseTheme) checkTheme(input.baseTheme, 'Base theme', builtins);
     if (input.autoTheme) {
         checkTheme(input.autoTheme.dayTheme, 'Day theme');
         checkTheme(input.autoTheme.nightTheme, 'Night theme');
@@ -470,7 +670,7 @@ export function validateThemeConfig(input) {
             if (!Array.isArray(sw.themes)) {
                 errors.push('switcher.themes must be an array');
             } else {
-                for (const id of sw.themes) checkTheme(id, 'switcher.themes');
+                for (const id of sw.themes) checkTheme(id, 'switcher.themes', builtins);
             }
         }
     }

package/server/templates/page.html

@@ -39,7 +39,7 @@
   <!-- Late head injection - custom CSS always loads last so it can override everything -->
   {{headInjectLate}}
 </head>
-<body class="dm-cloaked dm-theme-{{theme}} {{layoutBodyClass}}" data-layout="{{layout}}">
+<body class="dm-cloaked dm-theme-{{dommaTheme}} {{customThemeClass}} {{layoutBodyClass}}" data-layout="{{layout}}">
 
     {{#if showNavbar}}
     <nav id="site-navbar" class="{{navbarClass}}"></nav>
@@ -109,7 +109,9 @@
             window.Domma.init();
         }
         if (window.Domma && window.Domma.theme) {
-            window.Domma.theme.init({ theme: '{{theme}}', persist: false });
+            // The built-in theme Domma knows; a custom theme's own class
+            // (dm-custom-<id>) is on <body> already and Domma leaves it alone.
+            window.Domma.theme.init({ theme: '{{dommaTheme}}', persist: false });
         }
         window.__CMS_NAV__ = {{navJson}};
         window.__CMS_SITE__ = {{siteJson}};
@@ -121,13 +123,20 @@
           var n = new Date(), m = n.getHours() * 60 + n.getMinutes(), ds = (c.dayStart || "07:00").split(":"),
               ns = (c.nightStart || "19:00").split(":"), d = +ds[0] * 60 + (+ds[1] || 0),
               e = +ns[0] * 60 + (+ns[1] || 0), t = (m >= d && m < e) ? c.dayTheme : c.nightTheme;
-          if (window.Domma && window.Domma.theme) window.Domma.theme.set(t);
+          // A custom theme is a base plus its own class (see resolveThemeClasses).
+          var a = (c.apply && c.apply[t]) || { theme: t, custom: '' };
+          if (window.Domma && window.Domma.theme) window.Domma.theme.set(a.theme);
+          var b = document.body;
+          if (b) {
+              b.className = b.className.split(' ').filter(function (k) { return k.indexOf('dm-custom-') !== 0; }).join(' ');
+              if (a.custom) b.classList.add(a.custom);
+          }
       }());
       {{dconfigScript}}
     </script>
 
     <!-- Site initialisation -->
-    <script src="/public/js/site.js?v=20260829-motion-toggle" type="module"></script>
+    <script src="/public/js/site.js?v=20260925-custom-themes" type="module"></script>
     <script src="/public/js/collection-context.js?v=20260919-ctx-tokens" type="module"></script>
     {{ctxMenusModule}}
 

package/admin/js/lib/sidebar-grouping.test.js

@@ -1 +0,0 @@
-import{test as o}from"node:test";import s from"node:assert/strict";import{groupPluginItems as a,stripItemByUrl as p,insertFoldersBeforeSystem as u,pruneEmptySynthesisedFolders as i,TOOLS_FOLDER_TEXT as m,MANAGE_PLUGINS_URL as d}from"./sidebar-grouping.js";const n=(e,t=null)=>({parent:t,item:e});o("groupPluginItems routes every enabled item to Tools, whatever its core flag",()=>{const{toolsFolder:e}=a([n({text:"Analytics",url:"#/plugins/analytics",core:!0}),n({text:"Todo",url:"#/plugins/todo",core:!1}),n({text:"Notes",url:"#/plugins/notes"})]);s.equal(e.text,m),s.deepEqual(e.items.map(t=>t.text),["Analytics","Todo","Notes"])}),o("Marketplace is a standalone entry, not a folder",()=>{const{managePluginsItem:e}=a([n({text:"Todo",url:"#/plugins/todo"})]);s.equal(e.text,"Marketplace"),s.equal(e.url,d),s.equal(e.permission,"plugins"),s.ok(!("items"in e),"it must not carry a sub-tree")}),o("groupPluginItems omits the Tools folder only when nothing is enabled",()=>{const e=a([n({text:"Todo",url:"#/plugins/todo"})]);s.deepEqual(e.toolsFolder.items.map(l=>l.text),["Todo"]);const t=a([]);s.equal(t.toolsFolder,null),s.equal(t.managePluginsItem.text,"Marketplace")}),o("groupPluginItems keeps explicitly-parented items separate",()=>{const{parented:e,toolsFolder:t}=a([n({text:"Nested",url:"#/x"},"Content"),n({text:"Todo",url:"#/plugins/todo",core:!1})]);s.equal(e.length,1),s.equal(e[0].parent,"Content"),s.deepEqual(t.items.map(l=>l.text),["Todo"])}),o("each call returns its own Marketplace object",()=>{const e=a([]).managePluginsItem,t=a([]).managePluginsItem;s.notEqual(e,t),s.deepEqual(e,t)}),o("stripItemByUrl removes the management link at any depth",()=>{const e=[{text:"Overview",items:[{text:"Dashboard",url:"#/"}]},{text:"System",items:[{text:"Users",url:"#/users"},{text:"Plugins",url:"#/plugins"}]}],l=p(e,"#/plugins").find(r=>r.text==="System");s.deepEqual(l.items.map(r=>r.text),["Users"]),s.equal(e.find(r=>r.text==="System").items.length,2)}),o("insertFoldersBeforeSystem places Tools then Marketplace before System",()=>{const t=u([{text:"Overview"},{text:"Data"},{text:"System"},{text:"Documentation"}],[{text:"Tools",items:[]},{text:"Marketplace",url:"#/plugins"},null]);s.deepEqual(t.map(l=>l.text),["Overview","Data","Tools","Marketplace","System","Documentation"])}),o("insertFoldersBeforeSystem appends when no System/Documentation anchor",()=>{const t=u([{text:"Overview"},{text:"Data"}],[{text:"Marketplace",url:"#/plugins"}]);s.deepEqual(t.map(l=>l.text),["Overview","Data","Marketplace"])}),o("pruneEmptySynthesisedFolders drops an empty Tools folder but keeps built-ins",()=>{const e=[{text:"Overview",items:[]},{text:"Tools",items:[]}];s.deepEqual(i(e).map(t=>t.text),["Overview"])}),o("pruneEmptySynthesisedFolders leaves the standalone Marketplace alone",()=>{const e=[{text:"Tools",items:[{text:"Analytics"}]},{text:"Marketplace",url:"#/plugins"}];s.deepEqual(i(e).map(t=>t.text),["Tools","Marketplace"])});