domma-cms 0.55.1 → 0.66.0

package/plugins/_template/admin/views/index.js

@@ -14,6 +14,13 @@ export const indexView = {
         // Confirm:       if (!await E.confirm('Are you sure?')) return;
         // Create table:  T.create(el, { data, columns: [...] });
         // Create form:   F.create({ fields }, defaults, { showSubmitButton: false }).renderTo(el);
+        //
+        // Route params:  onMount is handed ONE argument and never the route
+        //                params, and R.current is a METHOD - R.current.params
+        //                is always undefined. An editor view reads its id off
+        //                the hash:
+        //                  const m = location.hash.match(/^#\/plugins\/PLUGIN_SLUG\/edit\/([^?#]+)/);
+        //                  const id = m ? decodeURIComponent(m[1]) : null;
         I.scan();
     }
 };

package/plugins/analytics/admin/css/index.css

@@ -0,0 +1 @@
+.analytics-filter{max-width:240px}

package/plugins/analytics/admin/templates/analytics.html

@@ -1,6 +1,6 @@
 <div class="view-header">
     <h1><span data-icon="chart-bar"></span> Analytics</h1>
-    <div class="d-flex gap-2">
+    <div class="view-header-actions">
         <button id="export-btn" class="btn btn-ghost btn-sm" type="button">
             <span data-icon="download"></span> Export CSV
         </button>
@@ -12,7 +12,7 @@
 
 <div class="card mb-4">
     <div class="card-body">
-        <div id="range-tabs" class="d-flex gap-2 flex-wrap">
+        <div id="range-tabs" class="flex gap-2 flex-wrap">
             <button class="btn btn-ghost btn-sm range-btn" data-range="today">Today</button>
             <button class="btn btn-ghost btn-sm range-btn active" data-range="7d">Last 7 days</button>
             <button class="btn btn-ghost btn-sm range-btn" data-range="30d">Last 30 days</button>
@@ -23,22 +23,31 @@
 </div>
 
 <div class="grid grid-cols-3 gap-4 mb-4">
-    <div class="card">
+    <div class="card stat-card">
         <div class="card-body">
-            <div class="text-muted text-sm">Hits in range</div>
-            <div class="h2 mb-0" id="kpi-range">-</div>
+            <div class="stat-icon"><span data-icon="activity"></span></div>
+            <div>
+                <div class="stat-value" id="kpi-range">-</div>
+                <div class="stat-label">Hits in range</div>
+            </div>
         </div>
     </div>
-    <div class="card">
+    <div class="card stat-card">
         <div class="card-body">
-            <div class="text-muted text-sm">Unique pages</div>
-            <div class="h2 mb-0" id="kpi-pages">-</div>
+            <div class="stat-icon"><span data-icon="file-text"></span></div>
+            <div>
+                <div class="stat-value" id="kpi-pages">-</div>
+                <div class="stat-label">Unique pages</div>
+            </div>
         </div>
     </div>
-    <div class="card">
+    <div class="card stat-card">
         <div class="card-body">
-            <div class="text-muted text-sm">Lifetime hits</div>
-            <div class="h2 mb-0" id="kpi-lifetime">-</div>
+            <div class="stat-icon stat-icon--success"><span data-icon="trending-up"></span></div>
+            <div>
+                <div class="stat-value" id="kpi-lifetime">-</div>
+                <div class="stat-label">Lifetime hits</div>
+            </div>
         </div>
     </div>
 </div>
@@ -51,9 +60,9 @@
 </div>
 
 <div class="card">
-    <div class="card-header d-flex justify-content-between align-items-center">
+    <div class="card-header flex justify-between items-center">
         <strong>Top pages</strong>
-        <input id="filter-input" type="search" class="form-input form-input-sm" placeholder="Filter URL…" style="max-width: 240px;">
+        <input id="filter-input" type="search" class="form-input form-input-sm analytics-filter" placeholder="Filter URL…">
     </div>
     <div class="card-body">
         <div id="analytics-table"></div>

package/plugins/analytics/plugin.json

@@ -7,6 +7,9 @@
   "date": "2026-05-04",
   "icon": "chart-bar",
   "admin": {
+    "css": [
+      "admin/css/index.css"
+    ],
     "sidebar": [
       {
         "id": "analytics",

package/plugins/blog/admin/css/index.css

@@ -0,0 +1 @@
+.blog-hidden{display:none!important}.blog-clickable{cursor:pointer}.blog-nowrap{white-space:nowrap}.blog-editor{align-items:flex-start}.blog-editor-main{flex:1;min-width:0}.blog-editor-side{width:280px;flex-shrink:0}@media(max-width:900px){.blog-editor{flex-wrap:wrap}.blog-editor-side{width:100%}}.blog-filter-select{width:auto}.blog-filter-search{width:240px}.blog-settings-card{max-width:600px}.blog-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;padding:.5rem}.blog-media-tile{border:1px solid var(--dm-border, #333);background:transparent;border-radius:.25rem;padding:.25rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem}.blog-media-tile img{width:100%;height:90px;object-fit:cover;border-radius:.15rem}.blog-media-tile span{font-size:.7rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.blog-modal-form{display:flex;flex-direction:column;gap:1rem}.blog-modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.blog-image-preview{max-width:100%;border-radius:.25rem;display:block;margin-bottom:.5rem}.blog-title-link{font-weight:600}.blog-empty-cell{opacity:.4}.blog-row-actions{display:flex;gap:.4rem}.blog-comment-body{font-size:.87rem}.blog-moderation-actions{display:flex;gap:.3rem;flex-wrap:wrap}

package/plugins/blog/admin/templates/blog.html

@@ -1,42 +1,54 @@
-<div class="view-header d-flex align-items-center justify-content-between mb-4">
-  <h1 class="h3 mb-0"><span data-icon="file-text"></span> Blog Posts</h1>
+<div class="view-header">
+  <h1><span data-icon="file-text"></span> Blog Posts</h1>
   <button id="btn-new-post" class="btn btn-primary">
     <span data-icon="plus"></span> New Post
   </button>
 </div>
 
 <div class="grid grid-cols-4 gap-3 mb-4">
-  <div class="card"><div class="card-body">
-    <div class="text-muted small">Total</div>
-    <div class="h3 mb-0" id="kpi-total">-</div>
+  <div class="card stat-card"><div class="card-body">
+    <div class="stat-icon"><span data-icon="file-text"></span></div>
+    <div>
+      <div class="stat-value" id="kpi-total">-</div>
+      <div class="stat-label">Total</div>
+    </div>
   </div></div>
-  <div class="card"><div class="card-body">
-    <div class="text-muted small">Published</div>
-    <div class="h3 mb-0" id="kpi-published">-</div>
+  <div class="card stat-card"><div class="card-body">
+    <div class="stat-icon stat-icon--success"><span data-icon="check-circle"></span></div>
+    <div>
+      <div class="stat-value" id="kpi-published">-</div>
+      <div class="stat-label">Published</div>
+    </div>
   </div></div>
-  <div class="card"><div class="card-body">
-    <div class="text-muted small">Drafts</div>
-    <div class="h3 mb-0" id="kpi-drafts">-</div>
+  <div class="card stat-card"><div class="card-body">
+    <div class="stat-icon"><span data-icon="edit"></span></div>
+    <div>
+      <div class="stat-value" id="kpi-drafts">-</div>
+      <div class="stat-label">Drafts</div>
+    </div>
   </div></div>
-  <div class="card"><div class="card-body">
-    <div class="text-muted small">Scheduled</div>
-    <div class="h3 mb-0" id="kpi-scheduled">-</div>
+  <div class="card stat-card"><div class="card-body">
+    <div class="stat-icon stat-icon--warning"><span data-icon="clock"></span></div>
+    <div>
+      <div class="stat-value" id="kpi-scheduled">-</div>
+      <div class="stat-label">Scheduled</div>
+    </div>
   </div></div>
 </div>
 
 <div class="card mb-3">
   <div class="card-body">
-    <div class="d-flex gap-2 flex-wrap">
-      <select id="filter-status" class="form-select" style="width:auto;">
+    <div class="flex gap-2 flex-wrap items-center">
+      <select id="filter-status" class="form-select blog-filter-select">
         <option value="">All statuses</option>
         <option value="draft">Draft</option>
         <option value="scheduled">Scheduled</option>
         <option value="published">Published</option>
       </select>
-      <select id="filter-category" class="form-select" style="width:auto;">
+      <select id="filter-category" class="form-select blog-filter-select">
         <option value="">All categories</option>
       </select>
-      <input id="filter-search" type="text" class="form-control" style="width:240px;" placeholder="Search title or excerpt…">
+      <input id="filter-search" type="search" class="form-input blog-filter-search" placeholder="Search title or excerpt…">
       <button id="filter-reset" class="btn btn-ghost btn-sm">Reset</button>
     </div>
   </div>

package/plugins/blog/admin/templates/categories.html

@@ -1,5 +1,5 @@
-<div class="view-header d-flex align-items-center justify-content-between mb-4">
-  <h1 class="h3 mb-0">Blog Categories</h1>
+<div class="view-header">
+  <h1><span data-icon="folder"></span> Blog Categories</h1>
   <button id="btn-new-category" class="btn btn-primary">
     <span data-icon="plus"></span> New Category
   </button>

package/plugins/blog/admin/templates/comments.html

@@ -1,5 +1,5 @@
-<div class="view-header mb-4">
-  <h1 class="h3 mb-0">Blog Comments</h1>
+<div class="view-header">
+  <h1><span data-icon="message-circle"></span> Blog Comments</h1>
 </div>
 
 <div class="tab-list mb-3">

package/plugins/blog/admin/templates/post-editor.html

@@ -1,87 +1,87 @@
-<div class="view-header d-flex align-items-center justify-content-between mb-4">
-  <h1 class="h3 mb-0" id="editor-title">New Post</h1>
-  <div class="d-flex gap-2">
+<div class="view-header">
+  <h1 id="editor-title">New Post</h1>
+  <div class="view-header-actions">
     <button id="btn-save-draft" class="btn btn-secondary">Save Draft</button>
-    <button id="btn-schedule" class="btn btn-warning" style="display:none;">Schedule</button>
+    <button id="btn-schedule" class="btn btn-warning blog-hidden">Schedule</button>
     <button id="btn-publish" class="btn btn-primary">Publish Now</button>
   </div>
 </div>
 
-<div class="d-flex gap-4" style="align-items:flex-start;">
+<div class="flex gap-4 blog-editor">
   <!-- Main content area -->
-  <div style="flex:1; min-width:0;">
+  <div class="blog-editor-main">
     <div class="card mb-3">
       <div class="card-body">
         <div class="mb-3">
-          <label class="form-label fw-bold">Title</label>
-          <input type="text" id="post-title" class="form-control form-control-lg" placeholder="Post title…">
+          <label class="form-label font-bold" for="post-title">Title</label>
+          <input type="text" id="post-title" class="form-input form-input-lg" placeholder="Post title…">
         </div>
         <div class="mb-3">
-          <label class="form-label">Slug</label>
-          <div class="d-flex gap-2 align-items-center">
-            <input type="text" id="post-slug" class="form-control font-monospace">
-            <label class="d-flex align-items-center gap-1 text-muted small" style="white-space:nowrap;">
-              <input type="checkbox" id="slug-auto"> Auto
+          <label class="form-label" for="post-slug">Slug</label>
+          <div class="flex gap-2 items-center">
+            <input type="text" id="post-slug" class="form-input font-mono">
+            <label class="flex items-center gap-1 text-muted text-sm blog-nowrap" for="slug-auto">
+              <input type="checkbox" id="slug-auto" class="form-checkbox"> Auto
             </label>
           </div>
-          <div id="slug-warning" class="text-warning small mt-1" style="display:none;">
+          <div id="slug-warning" class="text-warning text-sm mt-1 blog-hidden">
             ⚠ Changing slug breaks existing links
           </div>
         </div>
         <div class="mb-3">
-          <label class="form-label">Excerpt</label>
-          <textarea id="post-excerpt" class="form-control" rows="2" placeholder="Short summary…"></textarea>
+          <label class="form-label" for="post-excerpt">Excerpt</label>
+          <textarea id="post-excerpt" class="form-textarea" rows="2" placeholder="Short summary…"></textarea>
         </div>
         <div class="mb-3">
-          <label class="form-label">Content</label>
-          <textarea id="post-content" class="form-control font-monospace" rows="20" placeholder="Write in Markdown…"></textarea>
+          <label class="form-label" for="post-content">Content</label>
+          <textarea id="post-content" class="form-textarea font-mono" rows="20" placeholder="Write in Markdown…"></textarea>
         </div>
       </div>
     </div>
 
     <!-- SEO accordion -->
     <div class="card mb-3">
-      <div class="card-header" id="seo-toggle" style="cursor:pointer;">
-        SEO <span class="text-muted small">(click to expand)</span>
+      <div class="card-header blog-clickable" id="seo-toggle">
+        SEO <span class="text-muted text-sm">(click to expand)</span>
       </div>
-      <div class="card-body" id="seo-panel" style="display:none;">
+      <div class="card-body blog-hidden" id="seo-panel">
         <div class="mb-3">
-          <label class="form-label">SEO Title</label>
-          <input type="text" id="seo-title" class="form-control" placeholder="Overrides page title">
+          <label class="form-label" for="seo-title">SEO Title</label>
+          <input type="text" id="seo-title" class="form-input" placeholder="Overrides page title">
         </div>
         <div class="mb-3">
-          <label class="form-label">SEO Description</label>
-          <textarea id="seo-description" class="form-control" rows="2" placeholder="Overrides excerpt for meta description"></textarea>
+          <label class="form-label" for="seo-description">SEO Description</label>
+          <textarea id="seo-description" class="form-textarea" rows="2" placeholder="Overrides excerpt for meta description"></textarea>
         </div>
       </div>
     </div>
   </div>
 
   <!-- Sidebar -->
-  <div style="width:280px; flex-shrink:0;">
+  <div class="blog-editor-side">
     <div class="card mb-3">
       <div class="card-header">Status</div>
       <div class="card-body">
-        <div id="schedule-picker" style="display:none;" class="mb-3">
-          <label class="form-label">Scheduled for</label>
-          <input type="datetime-local" id="post-scheduled-at" class="form-control">
+        <div id="schedule-picker" class="mb-3 blog-hidden">
+          <label class="form-label" for="post-scheduled-at">Scheduled for</label>
+          <input type="datetime-local" id="post-scheduled-at" class="form-input">
         </div>
-        <span id="post-status-badge" class="badge bg-secondary">draft</span>
+        <span id="post-status-badge" class="badge badge-secondary">draft</span>
       </div>
     </div>
 
     <div class="card mb-3">
       <div class="card-header">Categories</div>
       <div class="card-body" id="categories-checklist">
-        <p class="text-muted small">Loading…</p>
+        <p class="text-muted text-sm">Loading…</p>
       </div>
     </div>
 
     <div class="card mb-3">
       <div class="card-header">Tags</div>
       <div class="card-body">
-        <input type="text" id="post-tags" class="form-control" placeholder="tag1, tag2, …">
-        <div class="text-muted small mt-1">Comma-separated</div>
+        <input type="text" id="post-tags" class="form-input" placeholder="tag1, tag2, …">
+        <div class="text-muted text-sm mt-1">Comma-separated</div>
       </div>
     </div>
 
@@ -90,7 +90,7 @@
       <div class="card-body">
         <div id="featured-image-preview" class="mb-2"></div>
         <button id="btn-pick-image" class="btn btn-sm btn-secondary">Pick Image</button>
-        <button id="btn-clear-image" class="btn btn-sm btn-outline-secondary" style="display:none;">Clear</button>
+        <button id="btn-clear-image" class="btn btn-sm btn-outline blog-hidden">Clear</button>
       </div>
     </div>
   </div>

package/plugins/blog/admin/templates/settings.html

@@ -1,11 +1,14 @@
-<div class="view-header mb-4">
-  <h1 class="h3 mb-0">Blog Settings</h1>
+<div class="view-header">
+  <h1><span data-icon="settings"></span> Blog Settings</h1>
+  <button id="btn-save-settings" class="btn btn-primary">
+    <span data-icon="save"></span> Save
+  </button>
 </div>
 
 <div class="alert alert-warning mb-4">
   Base path and posts-per-page changes require a server restart to take effect.
 </div>
 
-<div class="card" style="max-width:600px;">
+<div class="card blog-settings-card">
   <div class="card-body" id="settings-form"></div>
 </div>

package/plugins/blog/admin/views/blog.js

@@ -44,7 +44,7 @@ export const blogView = {
                         title: 'Title',
                         sortable: true,
                         render: (v, row) =>
-                            `<a href="#/plugins/blog/posts/${escapeHtml(row.id)}" style="font-weight:600;">${escapeHtml(v || 'Untitled')}</a>`
+                            `<a href="#/plugins/blog/posts/${escapeHtml(row.id)}" class="blog-title-link">${escapeHtml(v || 'Untitled')}</a>`
                     },
                     {
                         key: 'status',
@@ -61,7 +61,7 @@ export const blogView = {
                         sortable: false,
                         render: (val) => Array.isArray(val) && val.length
                             ? val.map((id) => `<span class="badge badge-secondary mr-1">${escapeHtml(catNameById(id) || id)}</span>`).join('')
-                            : '<span style="opacity:0.4;">-</span>'
+                            : '<span class="blog-empty-cell">-</span>'
                     },
                     {
                         key: 'publishedAt',
@@ -69,7 +69,7 @@ export const blogView = {
                         sortable: true,
                         render: (v) => v
                             ? `<span title="${escapeHtml(D(v).format('DD MMM YYYY HH:mm'))}">${escapeHtml(D(v).format('DD MMM YYYY'))}</span>`
-                            : '<span style="opacity:0.4;">-</span>'
+                            : '<span class="blog-empty-cell">-</span>'
                     },
                     {
                         key: 'id',
@@ -80,7 +80,7 @@ export const blogView = {
                             const viewLink = row.status === 'published' && slug
                                 ? `<a href="/blog/${slug}" target="_blank" class="btn btn-sm btn-outline" title="View on site"><span data-icon="external-link" data-icon-size="14"></span></a>`
                                 : '';
-                            return `<div style="display:flex;gap:.4rem;">` +
+                            return `<div class="blog-row-actions">` +
                                 `<button class="btn btn-sm btn-outline post-edit-btn" data-id="${escapeHtml(id)}"><span data-icon="edit" data-icon-size="14"></span></button>` +
                                 viewLink +
                                 `<button class="btn btn-sm btn-danger post-delete-btn" data-id="${escapeHtml(id)}"><span data-icon="trash" data-icon-size="14"></span></button>` +
@@ -165,7 +165,10 @@ export const blogView = {
                     H.get(`${BASE}/categories`).catch(() => ({ data: [] }))
                 ]);
                 if (postsRes.error) throw new Error(postsRes.error);
-                allPosts = postsRes.data ?? [];
+                // GET /posts sends a BARE ARRAY, so `.data` is undefined and this
+                // read emptied the whole screen - no rows, all four KPIs zero.
+                // Same guard as categories.js and comments.js.
+                allPosts = postsRes.data ?? (Array.isArray(postsRes) ? postsRes : []);
                 categories = catsRes.data ?? catsRes ?? [];
             } catch {
                 allPosts = [];

package/plugins/blog/admin/views/categories.js

@@ -33,9 +33,7 @@ export const categoriesView = {
 
         function buildModal() {
             const form = document.createElement('div');
-            form.style.display = 'flex';
-            form.style.flexDirection = 'column';
-            form.style.gap = '1rem';
+            form.className = 'blog-modal-form';
 
             const mkField = (labelText, id, tag = 'input', rows) => {
                 const group = document.createElement('div');
@@ -48,7 +46,7 @@ export const categoriesView = {
 
                 const el = document.createElement(tag);
                 el.id = id;
-                el.className = 'form-control';
+                el.className = tag === 'textarea' ? 'form-textarea' : 'form-input';
                 if (tag === 'textarea' && rows) el.rows = rows;
                 group.appendChild(el);
 
@@ -65,10 +63,7 @@ export const categoriesView = {
 
             // Footer buttons
             const footer = document.createElement('div');
-            footer.style.display = 'flex';
-            footer.style.justifyContent = 'flex-end';
-            footer.style.gap = '0.5rem';
-            footer.style.marginTop = '0.5rem';
+            footer.className = 'blog-modal-actions';
 
             const cancelBtn = document.createElement('button');
             cancelBtn.className = 'btn btn-secondary';
@@ -159,14 +154,14 @@ export const categoriesView = {
                         key: 'description',
                         title: 'Description',
                         sortable: false,
-                        render: (v) => escapeHtml(v) || '<span style="opacity:0.4;">-</span>'
+                        render: (v) => escapeHtml(v) || '<span class="blog-empty-cell">-</span>'
                     },
                     {
                         key: 'id',
                         title: 'Actions',
                         sortable: false,
                         render: (id) =>
-                            `<div style="display:flex;gap:.4rem;">` +
+                            `<div class="blog-row-actions">` +
                             `<button class="btn btn-sm btn-outline cat-edit-btn" data-id="${escapeHtml(id)}">` +
                             `<span data-icon="edit" data-icon-size="14"></span> Edit</button>` +
                             `<button class="btn btn-sm btn-danger cat-delete-btn" data-id="${escapeHtml(id)}">` +

package/plugins/blog/admin/views/comments.js

@@ -65,7 +65,7 @@ export const commentsView = {
                         sortable: false,
                         render: (v) => v
                             ? `<a href="mailto:${escapeHtml(v)}">${escapeHtml(v)}</a>`
-                            : '<span style="opacity:0.4;">-</span>'
+                            : '<span class="blog-empty-cell">-</span>'
                     },
                     {
                         key: 'body',
@@ -74,7 +74,7 @@ export const commentsView = {
                         render: (v) => {
                             const preview = String(v ?? '').slice(0, 80);
                             const ellipsis = String(v ?? '').length > 80 ? '\u2026' : '';
-                            return `<span style="font-size:0.87rem;">${escapeHtml(preview)}${ellipsis}</span>`;
+                            return `<span class="blog-comment-body">${escapeHtml(preview)}${ellipsis}</span>`;
                         }
                     },
                     {
@@ -83,7 +83,7 @@ export const commentsView = {
                         sortable: false,
                         render: (v) => v
                             ? `<a href="#/plugins/blog/posts/${escapeHtml(v)}">${escapeHtml(v)}</a>`
-                            : '<span style="opacity:0.4;">-</span>'
+                            : '<span class="blog-empty-cell">-</span>'
                     },
                     {
                         key: 'createdAt',
@@ -91,7 +91,7 @@ export const commentsView = {
                         sortable: true,
                         render: (v) => v
                             ? `<span title="${escapeHtml(D(v).format('DD MMM YYYY HH:mm'))}">${escapeHtml(D(v).fromNow())}</span>`
-                            : '<span style="opacity:0.4;">-</span>'
+                            : '<span class="blog-empty-cell">-</span>'
                     },
                     {
                         key: 'id',
@@ -110,7 +110,7 @@ export const commentsView = {
                             }
                             btns.push(`<button class="btn btn-sm btn-danger comment-delete-btn" data-id="${escapeHtml(id)}">` +
                                 `<span data-icon="trash" data-icon-size="14"></span></button>`);
-                            return `<div style="display:flex;gap:.3rem;flex-wrap:wrap;">${btns.join('')}</div>`;
+                            return `<div class="blog-moderation-actions">${btns.join('')}</div>`;
                         }
                     }
                 ],