domma-cms 0.72.0 → 0.74.0

package/server/services/renderer.js

@@ -12,7 +12,7 @@ import {resolveLocation, resolveMenuDecorations, resolveOverlaysForPage} from '.
 import {buildMenuNav} from './menuRender.js';
 import {getProjectForPage} from './projects.js';
 import {resolveContextMenusForPage} from './contextMenus.js';
-import {buildOverrideStyleTag, getThemeTokenMap, listThemeIds, loadThemeConfig} from './themeSettings.js';
+import {buildCustomThemeStyleTag, buildOverrideStyleTag, getThemeTokenMap, listThemeIds, loadThemeConfig, resolveThemeClasses} from './themeSettings.js';
 import {getSearchSettings} from './search.js';
 
 const VALID_LAYOUT_WIDTHS = new Set(['narrow', 'normal', 'wide', 'full']);
@@ -74,7 +74,7 @@ function buildSearchAssets() {
     };
 }
 
-const THEME_SWITCHER_ASSET_V = '20260922-ts';
+const THEME_SWITCHER_ASSET_V = '20260925-ts';
 const ANALYTICS_ASSET_V = '20260922-analytics';
 
 /**
@@ -397,7 +397,7 @@ export async function renderPage(page, opts = {}) {
         // Theme overrides land BEFORE content/custom.css: the overrides are
         // generated, custom.css is hand-written, and the hand-written one stays
         // the last word.
-        headInjectLate: [injection.headLate, searchAssets.headTag, switcherAssets.headTag, themeView.overrideStyleTag, customCssTag, navbarStyleTag]
+        headInjectLate: [injection.headLate, searchAssets.headTag, switcherAssets.headTag, themeView.customThemeStyleTag, themeView.overrideStyleTag, customCssTag, navbarStyleTag]
             .filter(Boolean).join('\n'),
         bodyEndInject: [
             // Draft banner - first, so it is the topmost fixed element and a
@@ -789,16 +789,28 @@ async function buildThemeView(page = {}) {
 
     // A page pinned to a theme opts out of the automatic pair - otherwise the
     // pin would silently expire at the day/night boundary.
-    const autoTheme = (!page.theme && cfg.autoTheme?.enabled) ? cfg.autoTheme : null;
+    // A copy: `apply` is added below, and the loaded config must not carry it.
+    const autoTheme = (!page.theme && cfg.autoTheme?.enabled) ? {...cfg.autoTheme} : null;
     const activeTheme = page.theme
         || (autoTheme ? autoTheme.dayTheme : cfg.theme)
         || 'charcoal-dark';
 
-    // A custom (Theme Roller) theme is not a theme Domma's engine knows, so it
-    // receives the built-in base and the custom class rides along separately,
-    // added after init so _applyTheme() cannot strip it.
-    const dommaTheme = cfg.baseTheme || activeTheme;
-    const customThemeClass = cfg.baseTheme ? `dm-theme-${activeTheme}` : '';
+    // A custom theme (a plugin's - the Theme Roller) is not one Domma's engine
+    // knows: Domma is given its built-in base, and the custom class rides
+    // beside it. It is `dm-custom-<id>`, not `dm-theme-<id>`, because Domma
+    // strips every dm-theme-* class it did not put there.
+    const {dommaTheme, customClass: customThemeClass} = resolveThemeClasses(activeTheme, cfg);
+
+    // The browser switches between the day and night themes itself, so it is
+    // told how to apply each (base + custom class) rather than just its id.
+    if (autoTheme) {
+        const day = resolveThemeClasses(autoTheme.dayTheme, cfg);
+        const night = resolveThemeClasses(autoTheme.nightTheme, cfg);
+        autoTheme.apply = {
+            [autoTheme.dayTheme]: {theme: day.dommaTheme, custom: day.customClass},
+            [autoTheme.nightTheme]: {theme: night.dommaTheme, custom: night.customClass}
+        };
+    }
 
     const {fontLink, fontOverride} = buildFontVars(cfg.font?.family, cfg.font?.size);
 
@@ -810,6 +822,8 @@ async function buildThemeView(page = {}) {
         customThemeClass,
         fontLink,
         fontStyleTag: fontOverride ? `<style>${fontOverride}</style>` : '',
+        // Only the custom themes this page can show: its own, and day/night's.
+        customThemeStyleTag: buildCustomThemeStyleTag([activeTheme, autoTheme?.dayTheme, autoTheme?.nightTheme]),
         overrideStyleTag: buildOverrideStyleTag(cfg)
     };
 }
@@ -1008,7 +1022,7 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
         // Theme overrides land BEFORE content/custom.css: the overrides are
         // generated, custom.css is hand-written, and the hand-written one stays
         // the last word.
-        headInjectLate: [injection.headLate, searchAssets.headTag, switcherAssets.headTag, themeView.overrideStyleTag, customCssTag, navbarStyleTag]
+        headInjectLate: [injection.headLate, searchAssets.headTag, switcherAssets.headTag, themeView.customThemeStyleTag, themeView.overrideStyleTag, customCssTag, navbarStyleTag]
             .filter(Boolean).join('\n'),
         bodyEndInject: [
             overlayMenus,

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/templates/project-editor.html

@@ -1,45 +0,0 @@
-<div class="page-header">
-    <h2><span data-icon="folder"></span> <span id="pe-title">Edit project</span></h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" href="#/projects"><span data-icon="arrow-left"></span> Back</a>
-        <button class="btn btn-primary" id="pe-save"><span data-icon="check"></span> Save</button>
-    </div>
-</div>
-
-<div class="card">
-    <div class="card-header">
-        <span data-icon="info"></span> Project details
-    </div>
-    <div class="card-body">
-        <div class="grid grid-cols-2 dm-pe-grid">
-            <div class="form-group">
-                <label for="pe-slug">Slug <span class="required">*</span></label>
-                <input type="text" id="pe-slug" name="slug" class="form-input" required>
-                <small class="form-hint">Lowercase alphanumeric + hyphen; immutable after create</small>
-            </div>
-            <div class="form-group">
-                <label for="pe-name">Name <span class="required">*</span></label>
-                <input type="text" id="pe-name" name="name" class="form-input" required>
-            </div>
-            <div class="form-group col-span-2">
-                <label for="pe-description">Description</label>
-                <textarea id="pe-description" name="description" class="form-input" rows="2"></textarea>
-            </div>
-            <div class="form-group">
-                <label for="pe-icon">Icon</label>
-                <div id="pe-icon-mount"></div>
-                <small class="form-hint">Click <code>⊞</code> to browse Domma icons; defaults to <code>folder</code></small>
-            </div>
-            <div class="form-group">
-                <label for="pe-rootUrl">Root URL</label>
-                <input type="text" id="pe-rootUrl" name="rootUrl" class="form-input" placeholder="/members">
-                <small class="form-hint">URL prefix for auto-inheritance (must start with /)</small>
-            </div>
-            <div class="form-group">
-                <label for="pe-sortOrder">Sort order</label>
-                <input type="number" id="pe-sortOrder" name="sortOrder" class="form-input" value="0">
-                <small class="form-hint">Lower = higher in the sidebar</small>
-            </div>
-        </div>
-    </div>
-</div>

package/admin/js/views/project-editor.js

@@ -1 +0,0 @@
-import{api as d}from"../api.js";import{makeIconInput as h}from"../lib/shortcode-modal.js";export const projectEditorView={templateUrl:"/admin/js/templates/project-editor.html",async onMount(t){const p=location.hash.match(/^#\/projects\/edit\/(.+)$/),i=p?decodeURIComponent(p[1]):null,s=!i;let e={slug:"",name:"",description:"",icon:"folder",rootUrl:"",sortOrder:0};if(!s){const o=E.loader(t.get(0),{type:"dots"});try{e=await d.projects.get(i)}catch(r){E.toast(`Failed to load project: ${r.message||r}`,{type:"error"}),location.hash="#/projects";return}finally{o.destroy()}}t.find("#pe-title").text(s?"New project":`Edit "${e.slug}"`);const l=t.find("#pe-slug"),n=t.find("#pe-name"),m=t.find("#pe-description"),u=t.find("#pe-rootUrl"),f=t.find("#pe-sortOrder");l.val(e.slug||""),n.val(e.name||""),m.val(e.description||""),u.val(e.rootUrl||""),f.val(e.sortOrder??0),s||l.prop("disabled",!0);const g=t.find("#pe-icon-mount").get(0),a=h("e.g. folder, users, box",e.icon||"folder");a.input.id="pe-icon",a.input.classList.add("form-input"),g.appendChild(a.el),Domma.icons.scan(t.get(0)),t.find("#pe-save").on("click",async()=>{const o={slug:l.val().trim(),name:n.val().trim(),description:m.val().trim(),icon:a.input.value.trim()||"folder",sortOrder:Number.parseInt(f.val(),10)||0},r=u.val().trim();r&&(o.rootUrl=r);try{if(s)await d.projects.create(o);else{const{slug:c,...v}=o;await d.projects.update(i,v)}E.toast("Saved.",{type:"success"}),location.hash="#/projects"}catch(c){E.toast(`Save failed: ${c.message||c}`,{type:"error"})}})}};