domma-cms 0.17.0 → 0.21.0

package/admin/js/lib/sidebar-renderer.js

@@ -0,0 +1,4 @@
+import{api as c}from"../api.js";function g(e){return String(e??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}const q=[{text:"Dashboard",url:"#/",icon:"home"},{text:"Menus",url:"#/menus",icon:"menu"}];function P(e,i){return i?!e||!e.length?!1:e.includes(i)?!0:["read","create","update","delete"].some(t=>e.includes(`${i}.${t}`)):!0}function L(e,i){const t=[];for(const n of e){if(n.hidden||n.permission&&!P(i,n.permission))continue;const s=Array.isArray(n.items)&&n.items.length?L(n.items,i):[];t.push({...n,items:s})}return t}function N(e,i){if(!i||!i.length)return e;const t=(n,s)=>{for(const l of n){if((l.text||"").toLowerCase()===s.toLowerCase())return l;if(Array.isArray(l.items)){const r=t(l.items,s);if(r)return r}}return null};for(const n of i)if(n.parent){const s=t(e,n.parent);s?(s.items=Array.isArray(s.items)?s.items:[],s.items.push(n.item)):e.push(n.item)}else e.push(n.item);return e}async function W(e){if(!P(e,"projects"))return[];let i=[];try{i=await c.projects.list()}catch{return[]}const t={};await Promise.all(i.map(async s=>{try{const l=await c.projects.artefacts(s.slug);t[s.slug]=l}catch{t[s.slug]={}}}));const n=[{key:"pages",text:"Pages",icon:"file-text",path:"/pages"},{key:"collections",text:"Collections",icon:"database",path:"/collections"},{key:"forms",text:"Forms",icon:"layout",path:"/forms"},{key:"actions",text:"Actions",icon:"zap",path:"/actions"},{key:"menus",text:"Menus",icon:"menu",path:"/menus"},{key:"blocks",text:"Blocks",icon:"box",path:"/blocks"},{key:"views",text:"Views",icon:"eye",path:"/views"},{key:"roles",text:"Roles",icon:"shield",path:"/roles"},{key:"users",text:"Users",icon:"users",path:"/users"}];return i.map(s=>{const r="#/projects/"+encodeURIComponent(s.slug),f=t[s.slug]||{},u=[{text:"Overview",url:r,icon:s.icon||"folder"}];for(const m of n){const y=f[m.key],b=Array.isArray(y)?y.length:0;b<=0||u.push({text:`${m.text} (${b})`,url:r+m.path,icon:m.icon})}return u.push({text:"Settings",url:r+"/settings",icon:"settings"}),{text:s.name||s.slug,icon:s.icon||"folder",items:u}})}function D(e,i){for(const t of e)if((t.text||"").toLowerCase()==="projects"){t.items=Array.isArray(t.items)?t.items.slice():[],t.items.push(...i);return}}function T(e,i){if(!e.url||!i)return"";const t=i[e.url];return t==null||t<=0?"":`<span class="sidebar-badge">${g(String(t))}</span>`}function U(e){const i=(e.text||"").replace(/\s*\(\d+\)\s*$/,"").toLowerCase().replace(/\s+/g,"-"),t=(e.url||"").match(/^#\/projects\/([^/]+)/);return`sidebar.expanded.${t?`project-${decodeURIComponent(t[1])}.`:""}${i}`}function F(e,i){const t=e.icon?`<span data-icon="${g(e.icon)}"></span>`:"",n=g(e.text||""),s=e.url?g(e.url):"";if(Array.isArray(e.items)&&e.items.length>0){const r=U(e),f=S.get(r)!==!1,u=e.items.map(m=>F(m,i)).join("");return`<details data-state-key="${g(r)}"${f?" open":""}>
+            <summary>${t} <span class="sidebar-text">${n}</span></summary>
+            <div class="sidebar-children">${u}</div>
+        </details>`}return`<a href="${s}" class="sidebar-link" data-url="${s}">${t} <span class="sidebar-text">${n}</span>${T(e,i)}</a>`}async function K(){const e=h=>h.then(p=>Array.isArray(p)?p.length:Array.isArray(p?.entries)?p.entries.length:0).catch(()=>0),[i,t,n,s,l,r,f,u,m,y,b]=await Promise.all([e(c.pages.list()),e(c.media.list()),e(c.collections.list()),e(c.forms.list()),e(c.views.list()),e(c.actions.list()),e(c.blocks.list()),e(c.components.list()),e(c.users.list()),e(c.plugins.list()),c.system?.notifications?.unreadCount?.().then(h=>h?.count??0).catch(()=>0)??Promise.resolve(0)]);return{"#/pages":i,"#/media":t,"#/collections":n,"#/forms":s,"#/views":l,"#/actions":r,"#/blocks":f,"#/components":u,"#/users":m,"#/plugins":y,"#/system/notifications":b}}async function X(){try{const e=await c.settings.get();return e?.adminBrand?.title||e?.title||"Admin"}catch{return"Admin"}}export async function renderAdminSidebar({mount:e,permissions:i}){const t=$(e).get(0);if(!t)return;let n,s=null,l=null,r=null;try{const a=await c.menus.get("admin-sidebar");n=Array.isArray(a?.items)?a.items:null,s=a?.variant||null,l=a?.position||null,r=a?.style||null}catch{n=null}(!n||!n.length)&&(console.warn("[admin-sidebar] No admin-sidebar menu found; using fallback tree"),n=q.slice());let f=[];try{f=await H.get("/api/sidebar/registered-items")||[]}catch{}n=N(n,f);const u=await W(i);u.length&&D(n,u),n=L(n,i);const[m,y]=await Promise.all([K().catch(()=>({})),X()]),b=s?` dm-admin-sidebar--${g(s)}`:"";function h(a,d="px"){if(a==null)return a;const o=String(a).trim();return/^\d+(\.\d+)?$/.test(o)?`${o}${d}`:o}let p="";if(r){const a=[];r.fontFamily&&a.push(`font-family: ${r.fontFamily}, sans-serif`),r.fontSize&&a.push(`font-size: ${h(r.fontSize)}`),r.fontWeight&&a.push(`font-weight: ${r.fontWeight}`),r.letterSpacing&&a.push(`letter-spacing: ${h(r.letterSpacing,"em")}`);const d=[];if(a.length&&d.push(`#admin-sidebar .dm-admin-sidebar, #admin-sidebar .dm-admin-sidebar .sidebar-link, #admin-sidebar .dm-admin-sidebar summary, #admin-sidebar .dm-admin-sidebar .sidebar-text { ${a.join("; ")} }`),r.iconSize){const o=h(r.iconSize);d.push(`#admin-sidebar .dm-admin-sidebar [data-icon], #admin-sidebar .dm-admin-sidebar [data-icon] svg { width: ${o} !important; height: ${o} !important; }`)}d.length&&(p=`<style data-admin-sidebar-style>${d.join(" ")}</style>`)}const z=`<div class="dm-admin-sidebar-header"><span data-icon="layout"></span> ${g(y)}</div>`,B=`${p}<nav class="dm-admin-sidebar${b}">${z}${n.map(a=>F(a,m)).join("")}</nav>`,k=document.createRange();k.selectNodeContents(t);const R=k.createContextualFragment(B);t.replaceChildren(R),Domma.icons.scan(t);const x=Number.parseInt(S.get("sidebar.width"),10);Number.isFinite(x)&&x>=180&&x<=480&&(t.style.width=x+"px");const w=document.createElement("div");w.className="dm-admin-sidebar-handle",w.setAttribute("aria-label","Resize sidebar"),t.appendChild(w),t.querySelectorAll("details").forEach(a=>{a.addEventListener("toggle",function(){const d=this.getAttribute("data-state-key");d&&S.set(d,this.open);const o=this.querySelector(":scope > .sidebar-children");if(o)if(this.open){const v=o.scrollHeight;o.style.maxHeight="0",requestAnimationFrame(()=>{o.style.maxHeight=v+"px",o.addEventListener("transitionend",function I(){o.style.maxHeight="none",o.removeEventListener("transitionend",I)})})}else{const v=o.scrollHeight;o.style.maxHeight=v+"px",requestAnimationFrame(()=>{o.style.maxHeight="0"})}})});let A=!1,C=0,j=0;w.addEventListener("mousedown",a=>{A=!0,C=a.clientX,j=t.getBoundingClientRect().width,document.body.style.cursor="col-resize",document.body.style.userSelect="none",a.preventDefault()}),document.addEventListener("mousemove",a=>{if(!A)return;const d=Math.max(180,Math.min(480,j+(a.clientX-C)));t.style.width=d+"px"}),document.addEventListener("mouseup",()=>{A&&(A=!1,document.body.style.cursor="",document.body.style.userSelect="",S.set("sidebar.width",parseInt(t.style.width,10)))});function E(){const a=location.hash||"#/";$(t).find(".sidebar-link").removeClass("active"),$(t).find(`.sidebar-link[data-url="${a}"]`).addClass("active")}E(),M.subscribe("router:afterChange",E)}

package/admin/js/templates/action-editor.html

@@ -43,6 +43,13 @@
                         </select>
                         <small class="text-muted">The collection this action operates on.</small>
                     </div>
+                    <div>
+                        <label class="form-label">Project</label>
+                        <select id="action-project" class="form-input">
+                            <option value="">— none —</option>
+                        </select>
+                        <small class="text-muted">Tag this action to a project for grouping.</small>
+                    </div>
                     <div>
                         <label class="form-check-label" title="Included in fresh installs via the seed script">
                             <input id="action-bundled" type="checkbox" class="form-check"> Bundled

package/admin/js/templates/block-editor.html

@@ -25,6 +25,13 @@
         <label class="form-label">Name <span style="color:var(--dm-danger,#f87171);">*</span></label>
         <input id="block-name" type="text" class="form-input" placeholder="e.g. feedback-card">
         <small class="text-muted">Lowercase letters, digits, and hyphens only. Cannot be changed after creation.</small>
+        <div class="mt-3">
+            <label class="form-label">Project</label>
+            <select id="block-project" class="form-input">
+                <option value="">— none —</option>
+            </select>
+            <small class="text-muted">Tag this block to a project for grouping.</small>
+        </div>
         <div class="mt-3">
             <label class="form-check-label" title="Included in fresh installs via the seed script">
                 <input id="block-bundled" type="checkbox" class="form-check"> Bundled

package/admin/js/templates/collection-editor.html

@@ -53,6 +53,15 @@
                             <input id="collection-columns" type="number" class="form-input" min="1" max="6" value="2">
                         </div>
                     </div>
+                    <div class="row mt-3">
+                        <div class="col-6">
+                            <label class="form-label">Project</label>
+                            <select id="collection-project" class="form-input">
+                                <option value="">— none —</option>
+                            </select>
+                            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Tag this collection to a project for grouping.</p>
+                        </div>
+                    </div>
                     <div class="row mt-3">
                         <div class="col-auto">
                             <label class="form-check-label" title="Included in fresh installs via the seed script">

package/admin/js/templates/dashboard/cache.html

@@ -0,0 +1,32 @@
+<div class="dash-card-header">
+    <h3>Response Cache</h3>
+    <label class="dash-cache-toggle" title="Enable / disable cache">
+        <input type="checkbox" data-field="toggle">
+        <span data-field="toggle-label">…</span>
+    </label>
+</div>
+<div class="dash-cache-grid">
+    <div class="dash-cache-stat">
+        <div class="dash-cache-stat-label">Hit rate</div>
+        <div class="dash-cache-stat-value" data-field="hit-rate">—</div>
+        <div class="dash-cache-stat-sub" data-field="hits-misses">no traffic yet</div>
+    </div>
+    <div class="dash-cache-stat">
+        <div class="dash-cache-stat-label">Entries</div>
+        <div class="dash-cache-stat-value" data-field="size">—</div>
+        <div class="dash-cache-stat-sub" data-field="size-bar"><span data-field="size-fill"></span></div>
+    </div>
+    <div class="dash-cache-stat">
+        <div class="dash-cache-stat-label">Writes</div>
+        <div class="dash-cache-stat-value" data-field="writes">0</div>
+        <div class="dash-cache-stat-sub" data-field="invalidations">0 invalidations</div>
+    </div>
+    <div class="dash-cache-stat">
+        <div class="dash-cache-stat-label">Last cleared</div>
+        <div class="dash-cache-stat-value" data-field="last-cleared">never</div>
+        <div class="dash-cache-stat-sub" data-field="driver">driver: —</div>
+    </div>
+</div>
+<div class="dash-cache-actions">
+    <button class="btn btn-sm btn-ghost" data-field="clear-btn"><span data-icon="trash"></span> Clear cache</button>
+</div>

package/admin/js/templates/dashboard.html

@@ -25,4 +25,8 @@
         <div id="dash-health-detail" class="dash-card"></div>
         <div id="dash-activity-feed" class="dash-card"></div>
     </section>
+
+    <section class="dash-row">
+        <div id="dash-cache" class="dash-card dash-card-wide"></div>
+    </section>
 </div>

package/admin/js/templates/form-editor.html

@@ -95,6 +95,15 @@
                         placeholder="Optional form description..."></textarea>
             </div>
           </div>
+            <div class="row mt-3">
+                <div class="col-6">
+                    <label class="form-label">Project</label>
+                    <select id="field-project" class="form-input">
+                        <option value="">— none —</option>
+                    </select>
+                    <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Tag this form to a project for grouping.</p>
+                </div>
+            </div>
             <div class="row mt-3">
                 <div class="col-auto">
                     <label class="form-check-label" title="Included in fresh installs via the seed script">

package/admin/js/templates/menu-editor.html

@@ -0,0 +1,98 @@
+<div class="page-header">
+    <h2><span data-icon="menu"></span> <span id="me-title">Edit menu</span></h2>
+    <div class="header-actions">
+        <a class="btn btn-secondary" href="#/menus"><span data-icon="arrow-left"></span> Back</a>
+        <button class="btn btn-primary" id="me-save"><span data-icon="check"></span> Save</button>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body" style="padding-top:0;">
+        <div class="tabs" id="me-tabs">
+            <div class="tab-list">
+                <button class="tab-item active" data-tab="me-items"><span data-icon="list"></span> Items</button>
+                <button class="tab-item"        data-tab="me-behaviour"><span data-icon="sliders"></span> Behaviour</button>
+                <button class="tab-item"        data-tab="me-meta"><span data-icon="info"></span> Meta</button>
+            </div>
+            <div class="tab-content">
+                <div class="tab-panel active" id="me-items" data-panel="me-items">
+                    <div class="toolbar">
+                        <button class="btn btn-sm btn-secondary" id="me-add-item"><span data-icon="plus"></span> Add item</button>
+                    </div>
+                    <div id="me-items-list" class="menu-tree"></div>
+                </div>
+
+                <div class="tab-panel" id="me-behaviour" data-panel="me-behaviour">
+                    <p class="text-muted mb-3" id="me-behaviour-note">
+                        Variant + style (font / icon size) apply both to the public <strong>navbar</strong> and the <strong>admin sidebar</strong>. The <strong>position</strong> field only affects the public navbar — the admin sidebar's position is fixed by the admin shell. Footer columns ignore everything here.
+                    </p>
+                    <div class="grid grid-cols-2 dm-pe-grid">
+                        <div class="form-group">
+                            <label for="me-variant">Variant</label>
+                            <select id="me-variant" name="variant" class="form-input">
+                                <option value="">— default —</option>
+                                <option value="transparent">Transparent</option>
+                                <option value="dark">Dark</option>
+                                <option value="light">Light</option>
+                                <option value="default">Default</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="me-position">Position</label>
+                            <select id="me-position" name="position" class="form-input">
+                                <option value="">— default —</option>
+                                <option value="sticky">Sticky</option>
+                                <option value="fixed">Fixed</option>
+                                <option value="static">Static</option>
+                                <option value="floating">Floating</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="me-fontFamily">Font family</label>
+                            <input type="text" id="me-fontFamily" name="fontFamily" class="form-input" placeholder="Inter">
+                        </div>
+                        <div class="form-group">
+                            <label for="me-fontSize">Font size</label>
+                            <input type="text" id="me-fontSize" name="fontSize" class="form-input" placeholder="14 (px assumed) or 1rem">
+                        </div>
+                        <div class="form-group">
+                            <label for="me-fontWeight">Font weight</label>
+                            <input type="text" id="me-fontWeight" name="fontWeight" class="form-input" placeholder="500">
+                        </div>
+                        <div class="form-group">
+                            <label for="me-letterSpacing">Letter spacing</label>
+                            <input type="text" id="me-letterSpacing" name="letterSpacing" class="form-input" placeholder="0.01 (em assumed) or 1px">
+                        </div>
+                        <div class="form-group">
+                            <label for="me-iconSize">Icon size</label>
+                            <input type="text" id="me-iconSize" name="iconSize" class="form-input" placeholder="15 (px assumed) or 1.25em">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tab-panel" id="me-meta" data-panel="me-meta">
+                    <div class="grid grid-cols-2 dm-pe-grid">
+                        <div class="form-group">
+                            <label for="me-slug">Slug <span class="required">*</span></label>
+                            <input type="text" id="me-slug" name="slug" class="form-input" required>
+                            <small class="form-hint">Lowercase alphanumeric + hyphen — affects file name</small>
+                        </div>
+                        <div class="form-group">
+                            <label for="me-name">Name <span class="required">*</span></label>
+                            <input type="text" id="me-name" name="name" class="form-input" required>
+                        </div>
+                        <div class="form-group col-span-2">
+                            <label for="me-description">Description</label>
+                            <textarea id="me-description" name="description" class="form-input" rows="2"></textarea>
+                        </div>
+                        <div class="form-group col-span-2">
+                            <label for="me-project">Project</label>
+                            <select id="me-project" name="project" class="form-input"></select>
+                            <small class="form-hint">Tag this menu to a project so it appears under that project's sidebar entry</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/admin/js/templates/menu-locations.html

@@ -0,0 +1,14 @@
+<div class="page-header">
+    <h2><span data-icon="map"></span> Menu locations</h2>
+    <div class="header-actions">
+        <a class="btn btn-secondary" href="#/menus"><span data-icon="arrow-left"></span> Back to menus</a>
+        <button class="btn btn-primary" id="ml-save"><span data-icon="check"></span> Save</button>
+    </div>
+</div>
+<p class="text-muted mb-4">Map each registered slot to a menu. Plugins can register additional slots via <code>hooks.registerMenuLocation()</code>.</p>
+
+<div class="card">
+    <div class="card-body">
+        <div id="ml-table"></div>
+    </div>
+</div>

package/admin/js/templates/menus.html

@@ -0,0 +1,14 @@
+<div class="page-header">
+    <h2><span data-icon="menu"></span> Menus</h2>
+    <div class="header-actions">
+        <a class="btn btn-secondary" href="#/menu-locations"><span data-icon="map"></span> Manage locations</a>
+        <a class="btn btn-primary" href="#/menus/new"><span data-icon="plus"></span> New menu</a>
+    </div>
+</div>
+<p class="text-muted mb-4">Multi-named menus for the public site, footers, and any plugin-registered slot.</p>
+
+<div class="card">
+    <div class="card-body">
+        <div id="menus-table"></div>
+    </div>
+</div>

package/admin/js/templates/page-editor.html

@@ -82,11 +82,11 @@
         </div>
       </div>
       <div class="row mb-3">
-        <div class="col-6">
+        <div class="col-4">
           <label class="form-label">Category</label>
           <input id="field-category" type="text" class="form-input" placeholder="e.g. news, docs, products">
         </div>
-        <div class="col-6">
+        <div class="col-4">
           <label class="form-label">Visibility</label>
           <select id="field-visibility" class="form-select">
             <option value="public">Public — everyone</option>
@@ -96,6 +96,13 @@
             <option value="admin">Admins only</option>
           </select>
         </div>
+        <div class="col-4">
+          <label class="form-label">Project</label>
+          <select id="field-project" class="form-select">
+            <option value="">(none)</option>
+          </select>
+          <small class="form-hint">Pre-filled from URL inheritance; choose explicitly to override.</small>
+        </div>
       </div>
       <div class="row mb-3">
         <div class="col-6">

package/admin/js/templates/project-detail.html

@@ -0,0 +1,50 @@
+<style>
+    .dm-qa-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 0.75rem;
+    }
+    .dm-count-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+    }
+    .dm-card-link {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+    }
+    .dm-card-link:hover .dm-count-card {
+        background: var(--dm-bg-subtle, rgba(0,0,0,0.04));
+        border-radius: 4px;
+    }
+</style>
+
+<div class="page-header">
+    <h2><span id="pd-icon" data-icon="folder"></span> <span id="pd-name">Project</span></h2>
+    <div class="header-actions">
+        <a class="btn btn-secondary" href="#/projects"><span data-icon="arrow-left"></span> Back to projects</a>
+        <a class="btn btn-secondary" id="pd-settings"><span data-icon="settings"></span> Settings</a>
+    </div>
+</div>
+<p id="pd-desc" class="text-muted mb-4"></p>
+
+<div class="card mb-4">
+    <div class="card-header">
+        <span data-icon="layers"></span> Artefacts in this project
+    </div>
+    <div class="card-body">
+        <div id="pd-counts"></div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <span data-icon="plus-circle"></span> Quick add
+    </div>
+    <div class="card-body">
+        <p class="text-muted mb-3" style="margin-top:0;">Create a new artefact and have it tagged to this project automatically.</p>
+        <div id="pd-quick-add"></div>
+    </div>
+</div>

package/admin/js/templates/project-editor.html

@@ -0,0 +1,45 @@
+<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/templates/project-settings.html

@@ -0,0 +1,60 @@
+<div class="page-header">
+    <h2><span id="ps-icon" data-icon="settings"></span> <span id="ps-title">Project settings</span></h2>
+    <div class="header-actions">
+        <a class="btn btn-secondary" id="ps-back"><span data-icon="arrow-left"></span> Back to project</a>
+        <button class="btn btn-primary" id="ps-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="ps-slug">Slug</label>
+                <input type="text" id="ps-slug" name="slug" class="form-input" disabled>
+                <small class="form-hint">Immutable after create</small>
+            </div>
+            <div class="form-group">
+                <label for="ps-name">Name <span class="required">*</span></label>
+                <input type="text" id="ps-name" name="name" class="form-input" required>
+            </div>
+            <div class="form-group col-span-2">
+                <label for="ps-description">Description</label>
+                <textarea id="ps-description" name="description" class="form-input" rows="2"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="ps-icon">Icon</label>
+                <div id="ps-icon-mount"></div>
+                <small class="form-hint">Click <code>⊞</code> to browse Domma icons</small>
+            </div>
+            <div class="form-group">
+                <label for="ps-rootUrl">Root URL</label>
+                <input type="text" id="ps-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="ps-sortOrder">Sort order</label>
+                <input type="number" id="ps-sortOrder" name="sortOrder" class="form-input" value="0">
+                <small class="form-hint">Lower = higher in the sidebar</small>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card" style="border-color:#c33;">
+    <div class="card-header"><h3>Danger zone</h3></div>
+    <div class="card-body">
+        <p>Untagging removes <code>meta.project</code> from every artefact currently tagged with this project. The artefacts remain (untagged); the project record is unchanged.</p>
+        <p>
+            <button class="btn btn-warning" id="ps-untag-all"><span data-icon="tag"></span> Untag all artefacts</button>
+        </p>
+        <hr>
+        <p>Deleting a project is only possible when no artefacts are tagged. The server returns an explanatory error otherwise.</p>
+        <p>
+            <button class="btn btn-danger" id="ps-delete"><span data-icon="trash"></span> Delete project</button>
+        </p>
+    </div>
+</div>

package/admin/js/templates/projects.html

@@ -0,0 +1,13 @@
+<div class="page-header">
+    <h2><span data-icon="folder"></span> Projects</h2>
+    <div class="header-actions">
+        <a class="btn btn-primary" href="#/projects/new"><span data-icon="plus"></span> New project</a>
+    </div>
+</div>
+<p class="text-muted mb-4">Group related artefacts under a project for navigation and per-user access scoping.</p>
+
+<div class="card">
+    <div class="card-body">
+        <div id="projects-table"></div>
+    </div>
+</div>

package/admin/js/templates/role-editor.html

@@ -47,6 +47,17 @@
                             </div>
                         </div>
                     </div>
+                    <div class="row">
+                        <div class="col-6">
+                            <div class="mb-3">
+                                <label class="form-label">Project</label>
+                                <select id="role-project" class="form-input">
+                                    <option value="">— none —</option>
+                                </select>
+                                <p class="form-hint">Tag this role to a project for grouping.</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

package/admin/js/templates/settings.html

@@ -13,6 +13,7 @@
     <button class="tab-item">Cookie Consent</button>
     <button class="tab-item">Breadcrumbs</button>
     <button class="tab-item">Custom CSS</button>
+    <button class="tab-item">Cache</button>
   </div>
   <div class="tab-content">
 
@@ -502,5 +503,30 @@
       </div>
     </div>
 
+    <!-- Cache -->
+    <div class="tab-panel">
+      <div class="row mb-3">
+        <div class="col">
+          <p class="text-muted" style="font-size:.875rem;margin-bottom:1rem;">
+            Status: <strong id="cache-status">checking…</strong>
+          </p>
+          <p class="text-muted" style="font-size:.875rem;margin-bottom:1rem;">
+            Public page renders are cached by URL and role. Writes (page, collection, form, block, view, navigation, site settings) auto-invalidate the relevant tags. Use the button below to flush every cached entry — the next visitor to each page will trigger a fresh render.
+          </p>
+          <button id="btn-clear-cache" class="btn btn-secondary" type="button"><span data-icon="trash"></span> Clear cache</button>
+          <button id="btn-refresh-cache-keys" class="btn btn-ghost" type="button" style="margin-left:8px;"><span data-icon="refresh"></span> Refresh list</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h4 style="margin-top:1.5rem;">Cached entries <span id="cache-key-count" class="text-muted" style="font-weight:normal;font-size:.875rem;"></span></h4>
+          <p class="text-muted" style="font-size:.85rem;margin-bottom:.5rem;">
+            Snapshot of what's currently keyed. Newest entries first. Values are not shown — they can be large HTML blobs.
+          </p>
+          <div id="cache-keys-table"></div>
+        </div>
+      </div>
+    </div>
+
   </div>
 </div>