domma-cms 1.6.60 → 1.7.1

package/docs/superpowers/specs/plans/2026-04-06-layouts.md

@@ -0,0 +1,1015 @@
+# Layout Presets Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:
+> executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Extend layout presets with width, background colour, background image, and custom CSS class; add full CRUD to
+the admin UI using a slideover edit form.
+
+**Architecture:** Presets are stored in `config/presets.json` and looked up in `renderer.js` at page render time. New
+fields are applied as body CSS classes (width) and inline styles on the `.page-body` div (backgrounds). The admin view
+is a card grid with a Domma slideover for creating and editing presets.
+
+**Tech Stack:** Fastify 5 (ESM), Domma SPA admin (`E.slideover`, `E.toast`, `E.confirm`), Domma `apiRequest()` client,
+`getConfig` / `saveConfig` config layer.
+
+---
+
+## File Map
+
+| File                              | Change                                                                                          |
+|-----------------------------------|-------------------------------------------------------------------------------------------------|
+| `config/presets.json`             | Add new fields to all presets; add `builtin: true` to default/landing/blank; add `blank` preset |
+| `server/routes/api/layouts.js`    | Add POST, PUT /:key, DELETE /:key; built-in merge-in seeding                                    |
+| `server/services/renderer.js`     | Compute `layoutBodyClass` and `pageBodyStyle` from preset; add to `vars`                        |
+| `server/templates/page.html`      | Inject `{{layoutBodyClass}}` into body class; inject `{{pageBodyStyle}}` onto `.page-body`      |
+| `public/css/site.css`             | Add four `body.dm-layout-*` width utility classes                                               |
+| `admin/js/api.js`                 | Add `create`, `update`, `remove` to `api.layouts` (line 158)                                    |
+| `admin/js/views/layouts.js`       | Full rebuild: CRUD card grid + slideover edit form                                              |
+| `admin/js/templates/layouts.html` | Add Create button and update description text                                                   |
+
+---
+
+### Task 1: Update `config/presets.json`
+
+**Files:**
+
+- Modify: `config/presets.json`
+
+The existing presets (`default`, `with-sidebar`, `minimal`, `landing`) need the new fields added. The spec names three
+built-in presets: `default`, `landing`, `blank`. Mark those with `builtin: true`. Add the missing `blank` preset. Leave
+`with-sidebar` and `minimal` as non-builtin (users can delete them).
+
+> **Note:** The existing `landing` preset is labelled "Landing Page" and has navbar + footer. Per the spec, `landing`
+> should be: navbar true, footer false, width full. Update it accordingly.
+
+- [ ] **Step 1: Replace `config/presets.json` with updated content**
+
+```json
+{
+    "default": {
+        "key": "default",
+        "label": "Default",
+        "description": "Standard page with navbar and footer.",
+        "builtin": true,
+        "navbar": true,
+        "footer": true,
+        "sidebar": false,
+        "width": "normal",
+        "bgColor": "",
+        "bgImage": "",
+        "class": ""
+    },
+    "landing": {
+        "key": "landing",
+        "label": "Landing Page",
+        "description": "Full-width landing page with navbar, no footer.",
+        "builtin": true,
+        "navbar": true,
+        "footer": false,
+        "sidebar": false,
+        "width": "full",
+        "bgColor": "",
+        "bgImage": "",
+        "class": ""
+    },
+    "blank": {
+        "key": "blank",
+        "label": "Blank",
+        "description": "Minimal page with no navbar or footer.",
+        "builtin": true,
+        "navbar": false,
+        "footer": false,
+        "sidebar": false,
+        "width": "normal",
+        "bgColor": "",
+        "bgImage": "",
+        "class": ""
+    },
+    "with-sidebar": {
+        "key": "with-sidebar",
+        "label": "With Sidebar",
+        "description": "Page with navbar, sidebar, and footer.",
+        "builtin": false,
+        "navbar": true,
+        "footer": true,
+        "sidebar": true,
+        "width": "normal",
+        "bgColor": "",
+        "bgImage": "",
+        "class": ""
+    },
+    "minimal": {
+        "key": "minimal",
+        "label": "Minimal",
+        "description": "Clean page with no navbar or footer.",
+        "builtin": false,
+        "navbar": false,
+        "footer": false,
+        "sidebar": false,
+        "width": "normal",
+        "bgColor": "",
+        "bgImage": "",
+        "class": ""
+    }
+}
+```
+
+- [ ] **Step 2: Verify the file is valid JSON**
+
+```bash
+node -e "JSON.parse(require('fs').readFileSync('config/presets.json','utf8')); console.log('OK')"
+```
+
+Expected: `OK`
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add config/presets.json
+git commit -m "feat(layouts): add width/bg/class fields and blank preset to presets.json"
+```
+
+---
+
+### Task 2: Update API routes (`server/routes/api/layouts.js`)
+
+**Files:**
+
+- Modify: `server/routes/api/layouts.js`
+
+Add three new routes (POST, PUT /:key, DELETE /:key) and a built-in merge-in seeding block. Keep the four existing
+routes unchanged.
+
+The `slugify` helper turns a label into a safe key (lowercase, spaces → hyphens, strip non-alphanumeric).
+
+The `VALID_WIDTHS` set guards the `width` field. The `bgColor` regex guards CSS injection. The `class` field is
+sanitised by stripping anything outside `[a-zA-Z0-9 _-]`.
+
+- [ ] **Step 1: Replace `server/routes/api/layouts.js` with the full updated file**
+
+```javascript
+/**
+ * Layouts (Presets) API
+ * GET    /api/layouts        - get all layout presets
+ * PUT    /api/layouts        - bulk-save layout presets (legacy, kept for compatibility)
+ * POST   /api/layouts        - create a new preset
+ * PUT    /api/layouts/:key   - update a single preset
+ * DELETE /api/layouts/:key   - delete a preset (builtin presets cannot be deleted)
+ * GET    /api/layouts/options - get layout options
+ * PUT    /api/layouts/options - save layout options
+ */
+import {getConfig, saveConfig} from '../../config.js';
+import {authenticate, requirePermission} from '../../middleware/auth.js';
+
+const VALID_WIDTHS = new Set(['narrow', 'normal', 'wide', 'full']);
+const BG_COLOR_RE = /^[a-zA-Z0-9#(),.\s%/-]+$/;
+const CLASS_RE = /[^a-zA-Z0-9\s_-]/g;
+
+const BUILTIN_PRESETS = {
+    default: {
+        key: 'default', label: 'Default',
+        description: 'Standard page with navbar and footer.',
+        builtin: true, navbar: true, footer: true, sidebar: false,
+        width: 'normal', bgColor: '', bgImage: '', class: ''
+    },
+    landing: {
+        key: 'landing', label: 'Landing Page',
+        description: 'Full-width landing page with navbar, no footer.',
+        builtin: true, navbar: true, footer: false, sidebar: false,
+        width: 'full', bgColor: '', bgImage: '', class: ''
+    },
+    blank: {
+        key: 'blank', label: 'Blank',
+        description: 'Minimal page with no navbar or footer.',
+        builtin: true, navbar: false, footer: false, sidebar: false,
+        width: 'normal', bgColor: '', bgImage: '', class: ''
+    }
+};
+
+function slugify(str) {
+    return str.toLowerCase().trim().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
+}
+
+function sanitisePreset(data) {
+    return {
+        navbar:  data.navbar  !== false,
+        footer:  data.footer  !== false,
+        sidebar: data.sidebar === true,
+        width:   VALID_WIDTHS.has(data.width) ? data.width : 'normal',
+        bgColor: data.bgColor && BG_COLOR_RE.test(data.bgColor) ? data.bgColor : '',
+        bgImage: typeof data.bgImage === 'string' ? data.bgImage.trim() : '',
+        class:   typeof data.class  === 'string' ? data.class.replace(CLASS_RE, '').trim() : '',
+        label:       String(data.label       || '').slice(0, 60).trim(),
+        description: String(data.description || '').slice(0, 200).trim()
+    };
+}
+
+export async function layoutsRoutes(fastify) {
+    // ── Merge-in seeding: ensure built-in presets exist ──────────────────────
+    const existing = getConfig('presets') || {};
+    let seeded = false;
+    for (const [key, preset] of Object.entries(BUILTIN_PRESETS)) {
+        if (!existing[key]) {
+            existing[key] = preset;
+            seeded = true;
+        }
+    }
+    if (seeded) saveConfig('presets', existing);
+
+    const canRead   = {preHandler: [authenticate, requirePermission('layouts', 'read')]};
+    const canUpdate = {preHandler: [authenticate, requirePermission('layouts', 'update')]};
+
+    // ── Existing routes ───────────────────────────────────────────────────────
+    fastify.get('/layouts', canRead, async () => {
+        return getConfig('presets');
+    });
+
+    fastify.put('/layouts', canUpdate, async (request, reply) => {
+        const data = request.body;
+        if (!data || typeof data !== 'object' || Array.isArray(data)) {
+            return reply.status(400).send({error: 'Invalid presets data: expected an object'});
+        }
+        for (const [key, preset] of Object.entries(data)) {
+            if (!preset || typeof preset !== 'object' || Array.isArray(preset)) {
+                return reply.status(400).send({error: `Invalid preset "${key}": expected an object`});
+            }
+            if (typeof preset.label !== 'string' || !preset.label.trim()) {
+                return reply.status(400).send({error: `Invalid preset "${key}": missing or empty "label" field`});
+            }
+        }
+        saveConfig('presets', data);
+        return {success: true};
+    });
+
+    // ── New CRUD routes ───────────────────────────────────────────────────────
+    fastify.post('/layouts', canUpdate, async (request, reply) => {
+        const {label, description, ...rest} = request.body || {};
+        if (!label || !String(label).trim()) {
+            return reply.status(400).send({error: 'label is required'});
+        }
+        const key = slugify(label);
+        if (!key) {
+            return reply.status(400).send({error: 'label must contain at least one alphanumeric character'});
+        }
+        const presets = getConfig('presets') || {};
+        if (presets[key]) {
+            return reply.status(409).send({error: 'A preset with this key already exists'});
+        }
+        presets[key] = {
+            key,
+            builtin: false,
+            label: String(label).slice(0, 60).trim(),
+            description: String(description || '').slice(0, 200).trim(),
+            ...sanitisePreset({label, description, ...rest})
+        };
+        saveConfig('presets', presets);
+        return {success: true, key, preset: presets[key]};
+    });
+
+    fastify.put('/layouts/:key', canUpdate, async (request, reply) => {
+        const {key} = request.params;
+        const presets = getConfig('presets') || {};
+        if (!presets[key]) {
+            return reply.status(404).send({error: `Preset "${key}" not found`});
+        }
+        const {label, description, ...rest} = request.body || {};
+        if (!label || !String(label).trim()) {
+            return reply.status(400).send({error: 'label is required'});
+        }
+        presets[key] = {
+            ...presets[key],
+            label: String(label).slice(0, 60).trim(),
+            description: String(description || '').slice(0, 200).trim(),
+            ...sanitisePreset({label, description, ...rest}),
+            key,
+            builtin: presets[key].builtin  // never overwrite builtin flag
+        };
+        saveConfig('presets', presets);
+        return {success: true, preset: presets[key]};
+    });
+
+    fastify.delete('/layouts/:key', canUpdate, async (request, reply) => {
+        const {key} = request.params;
+        const presets = getConfig('presets') || {};
+        if (!presets[key]) {
+            return reply.status(404).send({error: `Preset "${key}" not found`});
+        }
+        if (presets[key].builtin) {
+            return reply.status(400).send({error: 'Built-in presets cannot be deleted'});
+        }
+        delete presets[key];
+        saveConfig('presets', presets);
+        return {success: true};
+    });
+
+    // ── Layout options ────────────────────────────────────────────────────────
+    fastify.get('/layouts/options', canRead, async () => {
+        return getConfig('site')?.layoutOptions ?? {spacerSize: 8};
+    });
+
+    fastify.put('/layouts/options', canUpdate, async (request, reply) => {
+        const data = request.body;
+        if (!data || typeof data !== 'object') {
+            return reply.status(400).send({error: 'Invalid layout options'});
+        }
+        const site = getConfig('site');
+        site.layoutOptions = {...site.layoutOptions, ...data};
+        saveConfig('site', site);
+        return {success: true};
+    });
+}
+```
+
+- [ ] **Step 2: Test the server starts cleanly**
+
+```bash
+curl -s http://localhost:4096/api/layouts -H "Authorization: Bearer $(node -e "const S=require('./admin/js/api.js') catch '' ")" 2>/dev/null | head -5
+```
+
+Actually, just tail the server log or visit `http://localhost:4096` to confirm no startup errors. The server is already
+running on port 4096 - do NOT kill or restart it. Instead, check the server process is alive:
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost:4096/
+```
+
+Expected: `200`
+
+> **Note:** Because the server uses file-watching or is already running, you may need to trigger a restart for the new
+> routes to take effect. If `nodemon` is running, it will restart automatically on file save. If not, the routes won't be
+> live until the server is manually restarted - but that's outside your scope. The test below uses curl once the server is
+> running.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add server/routes/api/layouts.js
+git commit -m "feat(layouts): add POST/PUT/:key/DELETE/:key routes and built-in preset seeding"
+```
+
+---
+
+### Task 3: Update renderer and page template
+
+**Files:**
+
+- Modify: `server/services/renderer.js` (lines 107-147 - the `vars` object)
+- Modify: `server/templates/page.html` (lines 32 and 46)
+
+Add `layoutBodyClass` and `pageBodyStyle` to the renderer's `vars` object. Update the template to inject them.
+
+- [ ] **Step 1: Add the two computed values to `vars` in `renderer.js`**
+
+Inside `renderPage`, after the existing `preset` lookup (line 69), add two computed constants just before the `vars`
+block:
+
+```javascript
+// After: const preset = presets[page.layout] || presets['default'] || {};
+// Add these two lines:
+const layoutWidth = VALID_LAYOUT_WIDTHS.has(preset.width) ? preset.width : 'normal';
+const layoutBodyClass = ['dm-layout-' + layoutWidth, preset.class || ''].filter(Boolean).join(' ');
+
+const pageBodyStyleParts = [];
+if (preset.bgColor) pageBodyStyleParts.push(`background-color:${preset.bgColor}`);
+if (preset.bgImage) pageBodyStyleParts.push(`background-image:url('${preset.bgImage}');background-size:cover;background-position:center`);
+const pageBodyStyle = pageBodyStyleParts.join(';');
+```
+
+Add the `VALID_LAYOUT_WIDTHS` constant at the top of the file (after imports):
+
+```javascript
+const VALID_LAYOUT_WIDTHS = new Set(['narrow', 'normal', 'wide', 'full']);
+```
+
+Then add `layoutBodyClass` and `pageBodyStyle` to the `vars` object:
+
+```javascript
+const vars = {
+    // ... existing fields ...
+    layout: page.layout || 'default',
+    layoutBodyClass,      // ← add this
+    pageBodyStyle,        // ← add this
+    showNavbar: preset.navbar !== false,
+    // ... rest unchanged ...
+};
+```
+
+The full updated section (replace lines 97-147 of `renderer.js`):
+
+```javascript
+    const autoTheme = (!page.theme && site.autoTheme?.enabled) ? site.autoTheme : null;
+    const activeTheme = page.theme
+        || (autoTheme ? autoTheme.dayTheme : site.theme)
+        || 'charcoal-dark';
+    const dommaTheme = site.baseTheme || activeTheme;
+    const customThemeClass = site.baseTheme ? `dm-theme-${activeTheme}` : '';
+
+    const layoutWidth = VALID_LAYOUT_WIDTHS.has(preset.width) ? preset.width : 'normal';
+    const layoutBodyClass = ['dm-layout-' + layoutWidth, preset.class || ''].filter(Boolean).join(' ');
+    const pageBodyStyleParts = [];
+    if (preset.bgColor) pageBodyStyleParts.push(`background-color:${preset.bgColor}`);
+    if (preset.bgImage) pageBodyStyleParts.push(`background-image:url('${preset.bgImage}');background-size:cover;background-position:center`);
+    const pageBodyStyle = pageBodyStyleParts.join(';');
+
+    const vars = {
+        seoTitle,
+        seoDescription,
+        ogImage,
+        title: page.title,
+        html: page.html,
+        breadcrumbsHtml,
+        theme: activeTheme,
+        dommaTheme,
+        customThemeClass,
+        fontLink,
+        fontStyleTag,
+        layout: page.layout || 'default',
+        layoutBodyClass,
+        pageBodyStyle,
+        showNavbar: preset.navbar !== false,
+        showFooter: preset.footer !== false,
+        showSidebar: preset.sidebar === true || page.sidebar === true,
+        navJson: JSON.stringify(filterHiddenNavItems(navigation)).replace(/<\/script>/gi, '<\\/script>'),
+        siteJson: JSON.stringify(Object.assign(
+            {
+                title: site.title,
+                footer: site.footer
+                    ? {
+                        ...site.footer,
+                        links: (site.footer.links || []).filter(l => !l.hidden)
+                    }
+                    : site.footer,
+                social: site.social || null
+            },
+            site.backToTop?.enabled    ? { backToTop: site.backToTop }         : {},
+            site.cookieConsent?.enabled ? {cookieConsent: site.cookieConsent} : {},
+            autoTheme ? {autoTheme} : {}
+        )).replace(/<\/script>/gi, '<\\/script>'),
+        headInject: [injection.head, navbarFontLink].filter(Boolean).join('\n'),
+        headInjectLate: [injection.headLate, customCssTag, navbarStyleTag].filter(Boolean).join('\n'),
+        bodyEndInject: [
+            injection.bodyEnd,
+            site.backToTop?.enabled    ? '<script src="/public/js/btt.js"></script>'             : '',
+            site.cookieConsent?.enabled ? '<script src="/public/js/cookie-consent.js"></script>' : ''
+        ].filter(Boolean).join('\n'),
+        dconfigScript,
+    };
+```
+
+Also add `VALID_LAYOUT_WIDTHS` near the top of `renderer.js`, after the imports:
+
+```javascript
+const VALID_LAYOUT_WIDTHS = new Set(['narrow', 'normal', 'wide', 'full']);
+```
+
+- [ ] **Step 2: Update `server/templates/page.html`**
+
+**Line 32** - add `{{layoutBodyClass}}` to the body class:
+
+Before:
+
+```html
+<body class="dm-cloaked dm-theme-{{theme}}" data-layout="{{layout}}">
+```
+
+After:
+
+```html
+<body class="dm-cloaked dm-theme-{{theme}} {{layoutBodyClass}}" data-layout="{{layout}}">
+```
+
+**Line 46** - add conditional style to `.page-body`:
+
+Before:
+
+```html
+                <div class="page-body">
+```
+
+After:
+
+```html
+                <div class="page-body"{{#if pageBodyStyle}} style="{{pageBodyStyle}}"{{/if}}>
+```
+
+- [ ] **Step 3: Verify syntax**
+
+```bash
+node -e "import('./server/services/renderer.js').then(() => console.log('OK')).catch(e => console.error(e.message))"
+```
+
+Expected: `OK`
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add server/services/renderer.js server/templates/page.html
+git commit -m "feat(layouts): apply width class and bg styles from preset in renderer"
+```
+
+---
+
+### Task 4: Add CSS width utility classes (`public/css/site.css`)
+
+**Files:**
+
+- Modify: `public/css/site.css` (append to end of file)
+
+- [ ] **Step 1: Append the four width classes to `public/css/site.css`**
+
+```css
+/* ── Layout preset width utilities ────────────────────────────── */
+body.dm-layout-narrow  .page-body { max-width: 768px;  margin-inline: auto; }
+body.dm-layout-normal  .page-body { max-width: 1100px; margin-inline: auto; }
+body.dm-layout-wide    .page-body { max-width: 1280px; margin-inline: auto; }
+body.dm-layout-full    .page-body { max-width: none; }
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add public/css/site.css
+git commit -m "feat(layouts): add dm-layout-* width utility classes"
+```
+
+---
+
+### Task 5: Add new methods to the API client (`admin/js/api.js`)
+
+**Files:**
+
+- Modify: `admin/js/api.js` (lines 158-163 - the `layouts` namespace)
+
+The current `layouts` block (line 158):
+
+```javascript
+layouts: {
+    get: () => apiRequest('/layouts', { method: 'GET' }),
+    save: (data) => apiRequest('/layouts', {method: 'PUT', body: JSON.stringify(data)}),
+    getOptions: () => apiRequest('/layouts/options', {method: 'GET'}),
+    saveOptions: (data) => apiRequest('/layouts/options', {method: 'PUT', body: JSON.stringify(data)})
+},
+```
+
+Replace with:
+
+```javascript
+layouts: {
+    get:         ()           => apiRequest('/layouts',          {method: 'GET'}),
+    save:        (data)       => apiRequest('/layouts',          {method: 'PUT',    body: JSON.stringify(data)}),
+    create:      (data)       => apiRequest('/layouts',          {method: 'POST',   body: JSON.stringify(data)}),
+    update:      (key, data)  => apiRequest(`/layouts/${key}`,   {method: 'PUT',    body: JSON.stringify(data)}),
+    remove:      (key)        => apiRequest(`/layouts/${key}`,   {method: 'DELETE'}),
+    getOptions:  ()           => apiRequest('/layouts/options',  {method: 'GET'}),
+    saveOptions: (data)       => apiRequest('/layouts/options',  {method: 'PUT',    body: JSON.stringify(data)})
+},
+```
+
+- [ ] **Step 1: Apply the edit to `admin/js/api.js`**
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add admin/js/api.js
+git commit -m "feat(layouts): add create/update/remove methods to api.layouts client"
+```
+
+---
+
+### Task 6: Rebuild admin layouts UI
+
+**Files:**
+
+- Modify: `admin/js/templates/layouts.html`
+- Modify: `admin/js/views/layouts.js`
+
+This is the biggest task. The view is rebuilt from scratch. The template gets a Create button and an updated
+description.
+
+#### Part A - Update the template (`admin/js/templates/layouts.html`)
+
+Replace the entire file:
+
+```html
+<div class="view-header">
+  <h1><span data-icon="layout"></span> Layouts</h1>
+</div>
+
+<div class="tabs" id="layouts-tabs">
+  <div class="tab-list">
+    <button class="tab-item active" data-tab="panel-presets">Layout Presets</button>
+    <button class="tab-item" data-tab="panel-options">Layout Options</button>
+  </div>
+  <div class="tab-content">
+
+    <div class="tab-panel active" id="panel-presets">
+      <div class="view-actions mb-4" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
+        <p class="text-muted" style="margin:0;">Layout presets define the structure, width, and background of pages. Assign a layout to each page via the page editor.</p>
+        <button id="create-layout-btn" class="btn btn-primary"><span data-icon="plus"></span> New Layout</button>
+      </div>
+      <div id="presets-grid" class="presets-grid"></div>
+    </div>
+
+    <div class="tab-panel" id="panel-options">
+      <div class="card mb-4">
+        <div class="card-header"><h3>Spacer Shortcode</h3></div>
+        <div class="card-body">
+          <p class="text-muted mb-3">
+            The <code>[spacer /]</code> shortcode inserts a vertical gap. Set the default height here;
+            individual spacers can override it with <code>size="N"</code>.
+          </p>
+          <div class="form-group">
+            <label class="form-label" for="spacer-size-input">Default spacer height (px)</label>
+            <input id="spacer-size-input" type="number" class="form-input" style="max-width:120px" min="0" max="500"
+                   step="1" value="8">
+          </div>
+          <div class="form-group mt-3">
+            <label class="form-label" for="spacer-class-input">Default spacer CSS class</label>
+            <input id="spacer-class-input" type="text" class="form-input" style="max-width:240px"
+                   placeholder="e.g. my-gap">
+            <small class="text-muted">Applied to every <code>[spacer /]</code> unless overridden per-instance with
+              <code>class="…"</code>.</small>
+          </div>
+          <button id="save-options-btn" class="btn btn-primary mt-3"><span data-icon="save"></span> Save Options
+          </button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+```
+
+#### Part B - Rebuild the view (`admin/js/views/layouts.js`)
+
+Replace the entire file:
+
+```javascript
+/**
+ * Layouts View
+ * Card grid + slideover edit/create for layout presets.
+ */
+import {api} from '../api.js';
+
+const WIDTH_LABELS = {narrow: 'Narrow', normal: 'Normal', wide: 'Wide', full: 'Full'};
+
+const LABEL_STYLE  = 'display:block;font-size:.7rem;font-weight:600;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;';
+const INPUT_STYLE  = 'width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;box-sizing:border-box;';
+const FIELD_STYLE  = 'display:flex;flex-direction:column;gap:.25rem;';
+
+function field(labelText, control) {
+    const wrap = document.createElement('div');
+    wrap.style.cssText = FIELD_STYLE;
+    const lbl = document.createElement('label');
+    lbl.style.cssText = LABEL_STYLE;
+    lbl.textContent = labelText;
+    wrap.appendChild(lbl);
+    wrap.appendChild(control);
+    return wrap;
+}
+
+function textInput(placeholder = '', value = '') {
+    const inp = document.createElement('input');
+    inp.type = 'text';
+    inp.placeholder = placeholder;
+    inp.value = value;
+    inp.style.cssText = INPUT_STYLE;
+    return inp;
+}
+
+function checkbox(label, checked = false) {
+    const wrap = document.createElement('label');
+    wrap.style.cssText = 'display:flex;align-items:center;gap:.5rem;cursor:pointer;';
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    cb.checked = checked;
+    const span = document.createElement('span');
+    span.style.cssText = 'font-size:.9em;color:var(--dm-text,#eee);';
+    span.textContent = label;
+    wrap.appendChild(cb);
+    wrap.appendChild(span);
+    return {wrap, cb};
+}
+
+function widthSelect(current = 'normal') {
+    const sel = document.createElement('select');
+    sel.style.cssText = INPUT_STYLE;
+    [['narrow', 'Narrow (768px)'], ['normal', 'Normal (1100px)'], ['wide', 'Wide (1280px)'], ['full', 'Full width']].forEach(([val, text]) => {
+        const opt = document.createElement('option');
+        opt.value = val;
+        opt.textContent = text;
+        if (val === current) opt.selected = true;
+        sel.appendChild(opt);
+    });
+    return sel;
+}
+
+function colourPicker(value = '') {
+    const wrap = document.createElement('div');
+    wrap.style.cssText = 'display:flex;align-items:center;gap:.5rem;';
+
+    const picker = document.createElement('input');
+    picker.type = 'color';
+    picker.value = value || '#ffffff';
+    picker.disabled = !value;
+    picker.style.cssText = 'width:38px;height:32px;padding:2px;border:1px solid var(--dm-border,#333);border-radius:4px;background:transparent;cursor:pointer;';
+
+    const statusSpan = document.createElement('span');
+    statusSpan.style.cssText = 'font-size:.85em;color:var(--dm-text-muted,#aaa);';
+    statusSpan.textContent = value ? value : 'None';
+
+    const chooseBtn = document.createElement('button');
+    chooseBtn.type = 'button';
+    chooseBtn.textContent = 'Choose';
+    chooseBtn.style.cssText = 'padding:.25rem .6rem;font-size:.8em;background:transparent;border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;';
+
+    const clearBtn = document.createElement('button');
+    clearBtn.type = 'button';
+    clearBtn.textContent = 'Clear';
+    clearBtn.style.cssText = chooseBtn.style.cssText;
+    clearBtn.disabled = !value;
+
+    chooseBtn.addEventListener('click', () => {
+        picker.disabled = false;
+        clearBtn.disabled = false;
+        picker.click();
+    });
+
+    picker.addEventListener('input', () => {
+        statusSpan.textContent = picker.value;
+        clearBtn.disabled = false;
+    });
+
+    clearBtn.addEventListener('click', () => {
+        picker.value = '#ffffff';
+        picker.disabled = true;
+        clearBtn.disabled = true;
+        statusSpan.textContent = 'None';
+    });
+
+    wrap.appendChild(picker);
+    wrap.appendChild(statusSpan);
+    wrap.appendChild(chooseBtn);
+    wrap.appendChild(clearBtn);
+
+    return {
+        wrap,
+        getValue() { return picker.disabled ? '' : picker.value; }
+    };
+}
+
+function buildCard(key, preset, onEdit) {
+    const card = document.createElement('div');
+    card.className = 'card preset-card';
+    card.style.cssText = 'cursor:pointer;transition:box-shadow .15s;';
+    card.addEventListener('mouseenter', () => { card.style.boxShadow = '0 0 0 2px var(--dm-primary,#4f7fff)'; });
+    card.addEventListener('mouseleave', () => { card.style.boxShadow = ''; });
+    card.addEventListener('click', () => onEdit(key, preset));
+
+    const header = document.createElement('div');
+    header.className = 'card-header';
+    header.style.cssText = 'display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;';
+
+    const title = document.createElement('strong');
+    title.textContent = preset.label || key;
+    header.appendChild(title);
+
+    if (preset.builtin) {
+        const badge = document.createElement('span');
+        badge.className = 'badge';
+        badge.textContent = 'built-in';
+        badge.style.cssText = 'font-size:.65rem;';
+        header.appendChild(badge);
+    }
+
+    const widthPill = document.createElement('span');
+    widthPill.className = 'badge badge-outline';
+    widthPill.textContent = WIDTH_LABELS[preset.width] || 'Normal';
+    widthPill.style.cssText = 'margin-left:auto;font-size:.65rem;';
+    header.appendChild(widthPill);
+
+    card.appendChild(header);
+
+    const body = document.createElement('div');
+    body.className = 'card-body';
+
+    if (preset.description) {
+        const desc = document.createElement('p');
+        desc.className = 'text-muted';
+        desc.style.cssText = 'font-size:.85em;margin:0 0 .5rem;';
+        desc.textContent = preset.description;
+        body.appendChild(desc);
+    }
+
+    // Toggle indicators
+    const indicators = document.createElement('div');
+    indicators.style.cssText = 'display:flex;gap:.75rem;flex-wrap:wrap;';
+    [['Navbar', preset.navbar], ['Footer', preset.footer], ['Sidebar', preset.sidebar]].forEach(([label, on]) => {
+        const dot = document.createElement('span');
+        dot.style.cssText = `font-size:.75em;color:${on ? 'var(--dm-success,#4caf50)' : 'var(--dm-text-muted,#666)'};display:flex;align-items:center;gap:.25rem;`;
+        dot.textContent = (on ? '● ' : '○ ') + label;
+        indicators.appendChild(dot);
+    });
+    body.appendChild(indicators);
+
+    // Bg colour swatch
+    if (preset.bgColor) {
+        const swatch = document.createElement('span');
+        swatch.title = preset.bgColor;
+        swatch.style.cssText = `display:inline-block;width:14px;height:14px;border-radius:3px;background:${preset.bgColor};border:1px solid var(--dm-border,#333);margin-top:.4rem;vertical-align:middle;`;
+        body.appendChild(swatch);
+    }
+
+    card.appendChild(body);
+    return card;
+}
+
+function openSlideover(key, preset, isNew, onSaved, onDeleted) {
+    const so = E.slideover({title: isNew ? 'New Layout' : 'Edit Layout', size: 'md'});
+
+    const form = document.createElement('div');
+    form.style.cssText = 'display:flex;flex-direction:column;gap:1rem;padding:1rem;';
+
+    const labelInp     = textInput('e.g. Dark Landing', preset.label || '');
+    const descInp      = textInput('Optional description', preset.description || '');
+    const widthSel     = widthSelect(preset.width || 'normal');
+    const navbarCb     = checkbox('Show Navbar',  preset.navbar  !== false);
+    const footerCb     = checkbox('Show Footer',  preset.footer  !== false);
+    const sidebarCb    = checkbox('Show Sidebar', preset.sidebar === true);
+    const bgCol        = colourPicker(preset.bgColor || '');
+    const bgImageInp   = textInput('https://...', preset.bgImage || '');
+    const cssClassInp  = textInput('e.g. no-hero wide-content', preset.class || '');
+
+    form.appendChild(field('Label', labelInp));
+    form.appendChild(field('Description', descInp));
+    form.appendChild(field('Width', widthSel));
+
+    const toggleRow = document.createElement('div');
+    toggleRow.style.cssText = 'display:flex;gap:1.5rem;flex-wrap:wrap;';
+    toggleRow.appendChild(navbarCb.wrap);
+    toggleRow.appendChild(footerCb.wrap);
+    toggleRow.appendChild(sidebarCb.wrap);
+    form.appendChild(toggleRow);
+
+    form.appendChild(field('Background Colour', bgCol.wrap));
+    form.appendChild(field('Background Image URL', bgImageInp));
+    form.appendChild(field('Custom CSS Class', cssClassInp));
+
+    // Action buttons
+    const btnRow = document.createElement('div');
+    btnRow.style.cssText = 'display:flex;gap:.5rem;flex-wrap:wrap;padding-top:.5rem;border-top:1px solid var(--dm-border,#333);';
+
+    const saveBtn = document.createElement('button');
+    saveBtn.type = 'button';
+    saveBtn.className = 'btn btn-primary';
+    saveBtn.textContent = 'Save';
+
+    btnRow.appendChild(saveBtn);
+
+    if (!isNew && !preset.builtin) {
+        const delBtn = document.createElement('button');
+        delBtn.type = 'button';
+        delBtn.className = 'btn btn-danger';
+        delBtn.style.marginLeft = 'auto';
+        delBtn.textContent = 'Delete';
+        delBtn.addEventListener('click', async () => {
+            const confirmed = await E.confirm(`Delete the "${preset.label || key}" layout?`);
+            if (!confirmed) return;
+            try {
+                await api.layouts.remove(key);
+                E.toast('Layout deleted.', {type: 'success'});
+                so.close();
+                onDeleted(key);
+            } catch (err) {
+                E.toast(err?.message || 'Failed to delete layout.', {type: 'error'});
+            }
+        });
+        btnRow.appendChild(delBtn);
+    }
+
+    form.appendChild(btnRow);
+
+    saveBtn.addEventListener('click', async () => {
+        const label = labelInp.value.trim();
+        if (!label) { E.toast('Label is required.', {type: 'warning'}); return; }
+
+        const data = {
+            label,
+            description: descInp.value.trim(),
+            width:       widthSel.value,
+            navbar:      navbarCb.cb.checked,
+            footer:      footerCb.cb.checked,
+            sidebar:     sidebarCb.cb.checked,
+            bgColor:     bgCol.getValue(),
+            bgImage:     bgImageInp.value.trim(),
+            class:       cssClassInp.value.trim()
+        };
+
+        try {
+            let result;
+            if (isNew) {
+                result = await api.layouts.create(data);
+            } else {
+                result = await api.layouts.update(key, data);
+            }
+            E.toast('Layout saved.', {type: 'success'});
+            so.close();
+            onSaved(isNew ? result.key : key, result.preset || {...preset, ...data});
+        } catch (err) {
+            E.toast(err?.message || 'Failed to save layout.', {type: 'error'});
+        }
+    });
+
+    so.element.appendChild(form);
+    so.open();
+}
+
+export const layoutsView = {
+    templateUrl: '/admin/js/templates/layouts.html',
+
+    async onMount($container) {
+        E.tabs($container.find('#layouts-tabs').get(0));
+
+        // ── Layout Presets tab ──────────────────────────────────────────────
+        let presets = await api.layouts.get().catch(() => ({}));
+        const $grid = $container.find('#presets-grid').empty();
+
+        function renderGrid() {
+            $grid.empty();
+            const gridEl = document.createElement('div');
+            gridEl.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;';
+
+            Object.entries(presets).forEach(([key, preset]) => {
+                const card = buildCard(key, preset, (k, p) => {
+                    openSlideover(k, p, false,
+                        (savedKey, savedPreset) => {
+                            presets[savedKey] = {...presets[savedKey], ...savedPreset};
+                            renderGrid();
+                        },
+                        (deletedKey) => {
+                            delete presets[deletedKey];
+                            renderGrid();
+                        }
+                    );
+                });
+                gridEl.appendChild(card);
+            });
+
+            $grid.get(0).appendChild(gridEl);
+            I.scan($grid.get(0));
+        }
+
+        renderGrid();
+
+        $container.find('#create-layout-btn').on('click', () => {
+            openSlideover(null, {}, true,
+                (newKey, newPreset) => {
+                    presets[newKey] = newPreset;
+                    renderGrid();
+                },
+                () => {}
+            );
+        });
+
+        // ── Layout Options tab ──────────────────────────────────────────────
+        const options = await api.layouts.getOptions().catch(() => ({spacerSize: 8, spacerClass: ''}));
+        const $spacerSize  = $container.find('#spacer-size-input');
+        const $spacerClass = $container.find('#spacer-class-input');
+        $spacerSize.val(options.spacerSize ?? 8);
+        $spacerClass.val(options.spacerClass ?? '');
+
+        $container.find('#save-options-btn').on('click', async () => {
+            const spacerSize  = parseInt($spacerSize.val(), 10) || 8;
+            const spacerClass = $spacerClass.val().trim();
+            try {
+                await api.layouts.saveOptions({spacerSize, spacerClass});
+                E.toast('Layout options saved.', {type: 'success'});
+            } catch {
+                E.toast('Failed to save layout options.', {type: 'error'});
+            }
+        });
+    }
+};
+```
+
+- [ ] **Step 1: Replace `admin/js/templates/layouts.html` with Part A above**
+
+- [ ] **Step 2: Replace `admin/js/views/layouts.js` with Part B above**
+
+- [ ] **Step 3: Smoke test in the browser**
+    - Open the admin panel → Layouts
+    - Verify the preset cards render (Default, Landing, Blank, With Sidebar, Minimal)
+    - Click a card → slideover opens with all fields pre-filled
+    - Edit a non-builtin card → Save → card updates in grid → success toast
+    - Click "New Layout" → fill in label → Save → new card appears
+    - Delete a non-builtin preset → confirm dialog → card disappears
+    - Try to delete a built-in preset from the API directly:
+      `curl -X DELETE http://localhost:4096/api/layouts/default` → should return 400
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add admin/js/templates/layouts.html admin/js/views/layouts.js
+git commit -m "feat(layouts): rebuild admin UI with CRUD card grid and slideover edit form"
+```