domma-cms 1.6.60 → 1.7.0

package/docs/superpowers/plans/2026-06-08-navbar-mobile-drawer-and-menu-enrichment.md

@@ -0,0 +1,1161 @@
+# Navbar Mobile Drawer & Menu Entry Enrichment - 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:** Make the public navbar mobile-first (far-left hamburger + slide-in drawer) and let menu entries carry badges, pills, and colour overrides, configured in the menu editor and painted by every menu renderer.
+
+**Architecture:** All work layers on top of `domma-js` (never edited). A single server-side resolver (`resolveMenuDecorations`) resolves live badge counts before menus are injected/rendered. One shared colour primitive (`colourToCss`) maps a colour value (preset key → theme CSS var, or `#rrggbb` → literal) and is used by every painter. Custom colours/badges are applied via inline `style` on server-rendered surfaces (the `sanitize-html` config allows it) and via post-render DOM manipulation on Domma `.html()` surfaces (which strip `style`/`data-*`).
+
+**Tech Stack:** Node 18+ ESM, Fastify 5, `node --test` + `node:assert/strict`, Domma SPA admin, `sanitize-html` (server), DOMPurify (Domma client).
+
+> **COMMIT POLICY (project standing rule):** Do **not** run `git commit` during implementation - the user commits separately. Each task therefore ends with a **Checkpoint** (run tests / verify in browser, then pause for review) instead of a commit step. Never add `Co-Authored-By` footers.
+
+> **VERIFICATION POLICY (project standing rule):** Never claim a UI change "works"/"verified" from server-side checks (curl, `node --test`, file diffs) alone. Every visual surface (drawer, badges, pills, colours, editor slideover) must be loaded and clicked in a **real browser** before being called done. The server runs permanently on port **4096** - never start/kill it; use it for browser checks.
+
+> **CONTEXT:** The working tree already contains in-progress "separator" support across these same files (menu-editor, sidebar-renderer, site.js, markdown.js, menus.js). This plan builds alongside it - preserve the `type: 'separator'` short-circuits already present.
+
+> **DOM-BUILD RULE:** The admin editor form is built with `createElement` / `new Option` / `textContent` - never by assigning raw HTML strings to elements. This matches the codebase gotcha (Domma sanitisation strips `<button>`/`<input>`) and keeps the form interactive.
+
+---
+
+## Colour value convention (used throughout)
+
+A **colour value** is a single string:
+- preset key - one of `primary | success | danger | warning | info | neutral`, or
+- a custom hex matching `/^#[0-9a-fA-F]{6}$/`.
+
+Preset → CSS variable map (the **single source of truth**, duplicated once on the
+client - keep the two copies in sync):
+
+| preset    | CSS var            |
+|-----------|--------------------|
+| `primary` | `--dm-primary`     |
+| `success` | `--dm-success`     |
+| `danger`  | `--dm-danger`      |
+| `warning` | `--dm-warning`     |
+| `info`    | `--dm-info`        |
+| `neutral` | `--dm-text-muted`  |
+
+`colourToCss(value)` returns `var(--dm-…)` for a preset, the hex literal for a
+hex, and `''` for anything else. Because `var(--dm-…)` is valid in an inline
+`style`, the *same* function serves both preset and custom on every surface.
+
+---
+
+## File structure
+
+**Server (ours to extend):**
+- `server/services/menus.js` - add `isValidColour`, `colourToCss`, `PRESET_COLOUR_VARS`, `resolveMenuDecorations`; extend `validateMenu`.
+- `server/services/renderer.js` - run navbar + footer menu items through `resolveMenuDecorations` before composing the injected globals.
+- `server/services/markdown.js` - `processMenuBlocks` resolves decorations; `renderMenuItemsAsUl` emits badge + colour (no pills).
+
+**Public site (ours):**
+- `public/js/menu-decor.mjs` *(new)* - shared client primitives: `colourToCss`, `makeBadgeEl`, `applyColour`, `applyPill`.
+- `public/js/site.js` - navbar decoration pass, footer decoration pass, drawer wiring (backdrop + Esc).
+- `public/css/site.css` - drawer styles + `.dm-menu-badge` / `.dm-nav-pill` base styles.
+
+**Admin (ours):**
+- `admin/js/views/menu-editor.js` - slim rows, edit slideover, flatten/nest/sync for new fields, live row preview.
+- `admin/js/templates/menu-editor.html` - row/toolbar scaffold tweaks (if needed).
+- `admin/js/lib/sidebar-renderer.js` - badge + colour on sidebar items.
+- `admin/css/admin.css` - slim-row + slideover form styles.
+
+**Tests:**
+- `tests/services/menus-decorations.test.js` *(new)* - `isValidColour`, `colourToCss`, `validateMenu` shape checks, `resolveMenuDecorations`.
+- `tests/services/menu-decor-client.test.js` *(new)* - client `colourToCss` mirror.
+- `tests/services/menus-shortcode.test.js` - extend for `[menu]` badge/colour output.
+
+---
+
+## Task 1: Colour primitives - `isValidColour`, `colourToCss`
+
+**Files:**
+- Modify: `server/services/menus.js` (add near the top-level helpers, after the existing `validateSlug`)
+- Test: `tests/services/menus-decorations.test.js` (create)
+
+- [ ] **Step 1: Write the failing test**
+
+Create `tests/services/menus-decorations.test.js`:
+
+```js
+/**
+ * Menu decorations - colour validation/mapping, validateMenu shape checks,
+ * and live-count resolution. Pure functions; no filesystem.
+ */
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {isValidColour, colourToCss} from '../../server/services/menus.js';
+
+test('isValidColour accepts preset keys', () => {
+    for (const p of ['primary', 'success', 'danger', 'warning', 'info', 'neutral']) {
+        assert.equal(isValidColour(p), true, p);
+    }
+});
+
+test('isValidColour accepts 6-digit hex', () => {
+    assert.equal(isValidColour('#f59e0b'), true);
+    assert.equal(isValidColour('#ABCDEF'), true);
+});
+
+test('isValidColour rejects junk', () => {
+    assert.equal(isValidColour('reddish'), false);
+    assert.equal(isValidColour('#fff'), false);       // 3-digit not allowed
+    assert.equal(isValidColour('#ff'), false);
+    assert.equal(isValidColour(42), false);
+    assert.equal(isValidColour(null), false);
+});
+
+test('colourToCss maps presets to theme vars and passes hex through', () => {
+    assert.equal(colourToCss('primary'), 'var(--dm-primary)');
+    assert.equal(colourToCss('neutral'), 'var(--dm-text-muted)');
+    assert.equal(colourToCss('#f59e0b'), '#f59e0b');
+    assert.equal(colourToCss('nonsense'), '');
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `node --test tests/services/menus-decorations.test.js`
+Expected: FAIL - `isValidColour`/`colourToCss` are not exported from `menus.js`.
+
+- [ ] **Step 3: Add the implementation to `server/services/menus.js`**
+
+Add after `export function validateSlug(...) { ... }`:
+
+```js
+// ---------------------------------------------------------------------------
+// Decoration colour convention - preset key → theme CSS var, or #rrggbb hex.
+// A "colour value" is one of these preset keys or a 6-digit hex.
+// Keep PRESET_COLOUR_VARS in sync with the copy in public/js/menu-decor.mjs.
+// ---------------------------------------------------------------------------
+export const PRESET_COLOUR_VARS = {
+    primary: '--dm-primary',
+    success: '--dm-success',
+    danger:  '--dm-danger',
+    warning: '--dm-warning',
+    info:    '--dm-info',
+    neutral: '--dm-text-muted'
+};
+
+const HEX_COLOUR_RE = /^#[0-9a-fA-F]{6}$/;
+
+/** True if value is a known preset key or a 6-digit hex colour. */
+export function isValidColour(value) {
+    return typeof value === 'string'
+        && (Object.prototype.hasOwnProperty.call(PRESET_COLOUR_VARS, value) || HEX_COLOUR_RE.test(value));
+}
+
+/** Map a colour value to inline-CSS-ready text: var(--dm-…) | #hex | ''. */
+export function colourToCss(value) {
+    if (typeof value !== 'string') return '';
+    if (PRESET_COLOUR_VARS[value]) return `var(${PRESET_COLOUR_VARS[value]})`;
+    if (HEX_COLOUR_RE.test(value)) return value;
+    return '';
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `node --test tests/services/menus-decorations.test.js`
+Expected: PASS (4 tests).
+
+- [ ] **Step 5: Checkpoint** - tests green. Pause for review (no commit).
+
+---
+
+## Task 2: Extend `validateMenu` for badge / pill / colour
+
+**Files:**
+- Modify: `server/services/menus.js:240-282` (the `validateMenu` `walkItems` callback)
+- Test: `tests/services/menus-decorations.test.js` (append)
+
+- [ ] **Step 1: Write the failing tests** - append to `tests/services/menus-decorations.test.js`:
+
+```js
+import {validateMenu} from '../../server/services/menus.js';
+
+const baseMenu = (item) => ({slug: 'deco-test', name: 'Deco Test', items: [item]});
+
+test('validateMenu accepts well-formed decorations', () => {
+    const errors = validateMenu(baseMenu({
+        text: 'Pricing', url: '/pricing',
+        badge: {text: 'New', variant: 'success'},
+        colour: '#f59e0b'
+    }));
+    assert.deepEqual(errors, []);
+});
+
+test('validateMenu accepts a pill with a preset variant', () => {
+    const errors = validateMenu(baseMenu({
+        text: 'Sign up', url: '/signup',
+        pill: {style: 'filled', variant: 'primary'}
+    }));
+    assert.deepEqual(errors, []);
+});
+
+test('validateMenu accepts badge.countFrom', () => {
+    const errors = validateMenu(baseMenu({
+        text: 'Inbox', url: '/inbox', badge: {countFrom: 'orders', variant: 'danger'}
+    }));
+    assert.deepEqual(errors, []);
+});
+
+test('validateMenu rejects a bad pill style', () => {
+    const errors = validateMenu(baseMenu({
+        text: 'X', url: '/x', pill: {style: 'glow', variant: 'primary'}
+    }));
+    assert.ok(errors.some(e => /pill\.style/.test(e)), errors.join('; '));
+});
+
+test('validateMenu rejects an invalid colour', () => {
+    const errors = validateMenu(baseMenu({text: 'X', url: '/x', colour: 'reddish'}));
+    assert.ok(errors.some(e => /colour/.test(e)), errors.join('; '));
+});
+
+test('validateMenu rejects a non-string badge.text', () => {
+    const errors = validateMenu(baseMenu({text: 'X', url: '/x', badge: {text: 5}}));
+    assert.ok(errors.some(e => /badge\.text/.test(e)), errors.join('; '));
+});
+```
+
+- [ ] **Step 2: Run to verify failure**
+
+Run: `node --test tests/services/menus-decorations.test.js`
+Expected: FAIL - the new decoration assertions fail (no validation yet).
+
+- [ ] **Step 3: Extend the `walkItems` callback in `validateMenu`**
+
+In `server/services/menus.js`, inside `validateMenu`'s `walkItems((item, path) => { ... })`, **after** the existing `item.items` array check and **before** the callback closes, insert:
+
+```js
+            // --- Decoration shape checks (all optional) ---
+            if (item.badge != null) {
+                if (typeof item.badge !== 'object' || Array.isArray(item.badge)) {
+                    errors.push(`Item ${path}: badge must be an object`);
+                } else {
+                    if (item.badge.text != null && typeof item.badge.text !== 'string') {
+                        errors.push(`Item ${path}: badge.text must be a string`);
+                    }
+                    if (item.badge.countFrom != null && typeof item.badge.countFrom !== 'string') {
+                        errors.push(`Item ${path}: badge.countFrom must be a collection slug`);
+                    }
+                    if (item.badge.variant != null && !isValidColour(item.badge.variant)) {
+                        errors.push(`Item ${path}: badge.variant must be a preset key or #rrggbb`);
+                    }
+                }
+            }
+            if (item.pill != null) {
+                if (typeof item.pill !== 'object' || Array.isArray(item.pill)) {
+                    errors.push(`Item ${path}: pill must be an object`);
+                } else {
+                    if (item.pill.style != null && item.pill.style !== 'filled' && item.pill.style !== 'outline') {
+                        errors.push(`Item ${path}: pill.style must be "filled" or "outline"`);
+                    }
+                    if (item.pill.variant != null && !isValidColour(item.pill.variant)) {
+                        errors.push(`Item ${path}: pill.variant must be a preset key or #rrggbb`);
+                    }
+                }
+            }
+            if (item.colour != null && !isValidColour(item.colour)) {
+                errors.push(`Item ${path}: colour must be a preset key or #rrggbb`);
+            }
+```
+
+- [ ] **Step 4: Run to verify pass**
+
+Run: `node --test tests/services/menus-decorations.test.js`
+Expected: PASS (all decoration tests).
+
+- [ ] **Step 5: Regression** - `node --test tests/services/menus.test.js`
+Expected: PASS (36 tests unchanged).
+
+- [ ] **Step 6: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 3: `resolveMenuDecorations` (live badge counts)
+
+**Files:**
+- Modify: `server/services/menus.js` (add export; import `listEntries` from `./collections.js`)
+- Test: `tests/services/menus-decorations.test.js` (append)
+
+- [ ] **Step 1: Write the failing tests** - append:
+
+```js
+import {resolveMenuDecorations} from '../../server/services/menus.js';
+
+test('resolveMenuDecorations stamps live count onto badge.text', async () => {
+    const items = [{text: 'Inbox', url: '/inbox', badge: {countFrom: 'orders', variant: 'danger'}}];
+    const out = await resolveMenuDecorations(items, {countEntries: async slug => slug === 'orders' ? 7 : 0});
+    assert.equal(out[0].badge.text, '7');
+    assert.equal(out[0].badge.variant, 'danger');   // untouched
+});
+
+test('resolveMenuDecorations leaves static badges alone', async () => {
+    const items = [{text: 'Pricing', url: '/pricing', badge: {text: 'New'}}];
+    const out = await resolveMenuDecorations(items, {countEntries: async () => 99});
+    assert.equal(out[0].badge.text, 'New');
+});
+
+test('resolveMenuDecorations recurses into child items', async () => {
+    const items = [{text: 'More', items: [{text: 'Inbox', url: '/i', badge: {countFrom: 'orders'}}]}];
+    const out = await resolveMenuDecorations(items, {countEntries: async () => 3});
+    assert.equal(out[0].items[0].badge.text, '3');
+});
+
+test('resolveMenuDecorations survives a failing counter (drops the count)', async () => {
+    const items = [{text: 'Inbox', url: '/i', badge: {countFrom: 'missing', variant: 'info'}}];
+    const out = await resolveMenuDecorations(items, {countEntries: async () => { throw new Error('no such collection'); }});
+    // Badge object preserved (variant kept); no resolved text injected.
+    assert.equal(out[0].badge.variant, 'info');
+    assert.equal(out[0].badge.text, undefined);
+});
+
+test('resolveMenuDecorations passes separators through untouched', async () => {
+    const items = [{type: 'separator'}, {text: 'A', url: '/a'}];
+    const out = await resolveMenuDecorations(items, {countEntries: async () => 1});
+    assert.deepEqual(out[0], {type: 'separator'});
+});
+```
+
+- [ ] **Step 2: Run to verify failure**
+
+Run: `node --test tests/services/menus-decorations.test.js`
+Expected: FAIL - `resolveMenuDecorations` not exported.
+
+- [ ] **Step 3: Implement in `server/services/menus.js`**
+
+Add the import near the other imports at the top of the file:
+
+```js
+import {listEntries} from './collections.js';
+```
+
+Add the resolver (e.g. after `colourToCss`):
+
+```js
+/**
+ * Walk a menu tree and resolve live badge counts. For any item whose
+ * `badge.countFrom` names a collection, the entry count replaces `badge.text`.
+ * Static badges and all other fields are left untouched. Failures (missing /
+ * unreadable collection) drop only that count, never the menu.
+ *
+ * @param {Array} items  Menu items (may be nested via `items`).
+ * @param {{countEntries?: (slug:string)=>Promise<number>}} [opts]
+ *        countEntries is injectable for testing; defaults to listEntries().length.
+ * @returns {Promise<Array>} A decorated copy (inputs are not mutated).
+ */
+export async function resolveMenuDecorations(items, opts = {}) {
+    const countEntries = opts.countEntries
+        || (async (slug) => (await listEntries(slug)).length);
+
+    async function walk(list) {
+        return Promise.all((list || []).map(async (it) => {
+            if (!it || it.type === 'separator') return it;
+            const next = {...it};
+            if (it.badge && it.badge.countFrom) {
+                try {
+                    const n = await countEntries(it.badge.countFrom);
+                    next.badge = {...it.badge, text: String(n)};
+                } catch {
+                    next.badge = {...it.badge};   // keep variant/etc; drop the count
+                }
+            }
+            if (Array.isArray(it.items)) next.items = await walk(it.items);
+            return next;
+        }));
+    }
+
+    return walk(items);
+}
+```
+
+- [ ] **Step 4: Run to verify pass**
+
+Run: `node --test tests/services/menus-decorations.test.js`
+Expected: PASS (all tests).
+
+- [ ] **Step 5: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 4: Wire the resolver into the renderer (navbar + footer)
+
+**Files:**
+- Modify: `server/services/renderer.js` - import the resolver; resolve `navMenu.items`, `footerPrimary.items`, `footerLegal.items` before composing globals. Both render paths (~lines 75-94 / 148-154 and the second path ~451-536).
+
+- [ ] **Step 1: Import** - extend the existing `from './menus.js'` import in `server/services/renderer.js`:
+
+```js
+import {resolveLocation, resolveMenuDecorations} from './menus.js';
+```
+
+- [ ] **Step 2: Resolve navbar + footer items in the first render path**
+
+Immediately **after** the `Promise.all([...])` that destructures `navMenu`, `footerPrimary`, `footerLegal` (the block ending ~line 78), add:
+
+```js
+    // Resolve live badge counts (countFrom) before the menus are injected as
+    // globals. Static badges/colours/pills pass through unchanged.
+    const [navItemsDecorated, footerPrimaryDecorated, footerLegalDecorated] = await Promise.all([
+        resolveMenuDecorations(navMenu ? navMenu.items : []),
+        resolveMenuDecorations(footerPrimary ? footerPrimary.items : []),
+        resolveMenuDecorations(footerLegal ? footerLegal.items : [])
+    ]);
+```
+
+Change the `navigation` composition to use `navItemsDecorated`:
+
+```js
+    const navigation = navMenu
+        ? {
+            brand:    site.brand || {},
+            items:    navItemsDecorated,
+            variant:  navMenu.variant  || 'default',
+            position: navMenu.position || 'sticky',
+            ...(navMenu.style && {style: navMenu.style})
+        }
+        : (await readLegacyNavBackup()) || {brand: site.brand || {}, items: []};
+```
+
+Change the `footer` composition (~line 149) to:
+
+```js
+    const footer = {
+        primary:   footerPrimaryDecorated,
+        legal:     footerLegalDecorated,
+        copyright: site.footer?.copyright || ''
+    };
+```
+
+- [ ] **Step 3: Repeat for the second render path**
+
+Locate the second `resolveLocation('navbar', user)` block (~line 451) and its footer composition (~line 508). Apply the **same** three changes there: add the `resolveMenuDecorations` `Promise.all`, swap `items:` to the decorated navbar array, and swap the footer `primary`/`legal` to the decorated arrays. (Repeated deliberately - the two paths are independent.)
+
+- [ ] **Step 4: Regression - render/route suite**
+
+Run: `node --test tests/routes/menus.test.js tests/routes/sidebar.test.js`
+Expected: PASS (static menus unaffected - items without `countFrom` pass through unchanged).
+
+- [ ] **Step 5: Browser sanity** - load a public page at **http://192.168.1.4:4096/** and confirm the navbar + footer still render normally (no decorations configured yet - this just proves the wiring didn't break rendering). Decoration visuals are verified later (Task 9).
+
+- [ ] **Step 6: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 5: `[menu]` shortcode - resolve + render badge & colour
+
+**Files:**
+- Modify: `server/services/markdown.js` - `processMenuBlocks` (~line 3366) calls the resolver; `renderMenuItemsAsUl` (~line 3394) emits badge + colour. Import `resolveMenuDecorations` + `colourToCss` from `./menus.js`.
+- Test: `tests/services/menus-shortcode.test.js` (append)
+
+- [ ] **Step 1: Write the failing test** - append to `tests/services/menus-shortcode.test.js`, matching the file's existing harness for creating a menu + rendering markdown (mirror its existing `createMenu`/`renderMarkdown`/`deleteMenu` usage; check the top of the file and reuse its imports):
+
+```js
+test('[menu] renders a static badge and colour', async () => {
+    const slug = 'deco-shortcode-' + Date.now();
+    await createMenu({
+        slug, name: 'Deco SC',
+        items: [{text: 'Pricing', url: '/pricing', badge: {text: 'New', variant: 'success'}, colour: '#f59e0b'}]
+    });
+    const {html} = await renderMarkdown(`[menu slug="${slug}" /]`, null);
+    assert.match(html, /dm-menu-badge/);
+    assert.match(html, /New/);
+    assert.match(html, /color:\s*#f59e0b/i);
+    await deleteMenu(slug);
+});
+```
+
+> If the file does not already import `renderMarkdown`/`createMenu`/`deleteMenu`, add the imports it uses for its existing cases (match the top of the file). The point of the test is the three `assert.match` lines.
+
+- [ ] **Step 2: Run to verify failure**
+
+Run: `node --test tests/services/menus-shortcode.test.js`
+Expected: FAIL - output has no `dm-menu-badge` / colour style.
+
+- [ ] **Step 3: Implement**
+
+In `server/services/markdown.js`, extend the existing `./menus.js` import to add the helpers:
+
+```js
+import {getMenu, resolveLocation, resolveMenuDecorations, colourToCss} from './menus.js';
+```
+
+In `processMenuBlocks`, after `capped` is computed and before building `html`, resolve decorations and feed the decorated tree to the renderer:
+
+```js
+        const decorated = await resolveMenuDecorations(capped);
+        const html = `<nav class="dm-menu dm-menu--${escapeAttr(menu.slug)}${variantClass}${klass}" data-menu="${escapeAttr(menu.slug)}">${renderMenuItemsAsUl(decorated)}</nav>`;
+```
+
+(Replace the existing `renderMenuItemsAsUl(capped)` call.)
+
+Replace `renderMenuItemsAsUl` with the decoration-aware version (pills intentionally omitted - navbar-only):
+
+```js
+function renderMenuItemsAsUl(items) {
+    if (!items.length) return '';
+    const lis = items.map(it => {
+        // Separator items render as a list-style <hr> divider.
+        if (it && it.type === 'separator') return '<li class="dm-menu-sep" role="separator"><hr></li>';
+        const href  = escapeAttr(it.url || '#');
+        const text  = escapeAttr(it.text || '');
+        const child = Array.isArray(it.items) && it.items.length ? renderMenuItemsAsUl(it.items) : '';
+
+        // Colour override (server sanitiser allows inline style on <a>).
+        const colourCss = it.colour ? colourToCss(it.colour) : '';
+        const styleAttr = colourCss ? ` style="color:${colourCss}"` : '';
+
+        // Badge (static text or resolver-stamped count). Background from variant.
+        let badge = '';
+        if (it.badge && it.badge.text != null && it.badge.text !== '') {
+            const bg = it.badge.variant ? colourToCss(it.badge.variant) : '';
+            const badgeStyle = bg ? ` style="background:${bg};color:#fff"` : '';
+            badge = `<span class="dm-menu-badge"${badgeStyle}>${escapeAttr(String(it.badge.text))}</span>`;
+        }
+
+        return `<li><a href="${href}"${styleAttr}>${text}${badge}</a>${child}</li>`;
+    }).join('');
+    return `<ul>${lis}</ul>`;
+}
+```
+
+- [ ] **Step 4: Run to verify pass**
+
+Run: `node --test tests/services/menus-shortcode.test.js`
+Expected: PASS.
+
+- [ ] **Step 5: Regression** - `node --test tests/services/menus.test.js tests/services/menus-decorations.test.js`
+Expected: PASS.
+
+- [ ] **Step 6: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 6: Shared client primitives - `public/js/menu-decor.mjs`
+
+**Files:**
+- Create: `public/js/menu-decor.mjs`
+- Test: `tests/services/menu-decor-client.test.js` (create - covers the pure `colourToCss` only; DOM builders are browser-verified)
+
+- [ ] **Step 1: Write the failing test** - create `tests/services/menu-decor-client.test.js`:
+
+```js
+/**
+ * Client menu-decor - only the pure colourToCss mirror is unit-tested here
+ * (no DOM). The DOM builders are verified in a real browser.
+ */
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {colourToCss} from '../../public/js/menu-decor.mjs';
+
+test('client colourToCss mirrors the server mapping', () => {
+    assert.equal(colourToCss('primary'), 'var(--dm-primary)');
+    assert.equal(colourToCss('neutral'), 'var(--dm-text-muted)');
+    assert.equal(colourToCss('#f59e0b'), '#f59e0b');
+    assert.equal(colourToCss('nope'), '');
+});
+```
+
+- [ ] **Step 2: Run to verify failure**
+
+Run: `node --test tests/services/menu-decor-client.test.js`
+Expected: FAIL - module does not exist.
+
+- [ ] **Step 3: Create `public/js/menu-decor.mjs`** (DOM builders use `createElement`/`textContent` only)
+
+```js
+/**
+ * Shared menu-decoration primitives for the public site and admin editor.
+ * Served at /public/js/menu-decor.mjs - importable by both public/js and admin/js.
+ *
+ * IMPORTANT: PRESET_COLOUR_VARS must stay in sync with the copy in
+ * server/services/menus.js.
+ */
+export const PRESET_COLOUR_VARS = {
+    primary: '--dm-primary',
+    success: '--dm-success',
+    danger:  '--dm-danger',
+    warning: '--dm-warning',
+    info:    '--dm-info',
+    neutral: '--dm-text-muted'
+};
+
+const HEX_COLOUR_RE = /^#[0-9a-fA-F]{6}$/;
+
+/** preset key → var(--dm-…) | #hex → itself | otherwise ''. */
+export function colourToCss(value) {
+    if (typeof value !== 'string') return '';
+    if (PRESET_COLOUR_VARS[value]) return `var(${PRESET_COLOUR_VARS[value]})`;
+    if (HEX_COLOUR_RE.test(value)) return value;
+    return '';
+}
+
+/** Build a badge <span> DOM node, or null when there is nothing to show. */
+export function makeBadgeEl(badge) {
+    if (!badge || badge.text == null || badge.text === '') return null;
+    const span = document.createElement('span');
+    span.className = 'dm-menu-badge';
+    span.textContent = String(badge.text);
+    const bg = badge.variant ? colourToCss(badge.variant) : '';
+    if (bg) { span.style.background = bg; span.style.color = '#fff'; }
+    return span;
+}
+
+/** Apply a colour override to an element's text colour. */
+export function applyColour(el, value) {
+    const css = colourToCss(value);
+    if (css) el.style.color = css;
+}
+
+/** Style an <a>/<button> as a pill (navbar only). */
+export function applyPill(el, pill) {
+    if (!pill) return;
+    el.classList.add('dm-nav-pill');
+    const css = pill.variant ? colourToCss(pill.variant) : '';
+    if (pill.style === 'outline') {
+        el.classList.add('dm-nav-pill--outline');
+        if (css) { el.style.borderColor = css; el.style.color = css; }
+    } else {
+        if (css) { el.style.background = css; el.style.color = '#fff'; }
+    }
+}
+```
+
+- [ ] **Step 4: Run to verify pass**
+
+Run: `node --test tests/services/menu-decor-client.test.js`
+Expected: PASS.
+
+- [ ] **Step 5: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 7: Decoration CSS - `public/css/site.css`
+
+**Files:**
+- Modify: `public/css/site.css` (append a new section)
+
+- [ ] **Step 1: Append the decoration styles**
+
+```css
+/* ===========================================================================
+   Menu entry decorations - badges & pills (colours applied inline via JS)
+   =========================================================================== */
+.dm-menu-badge {
+    display: inline-block;
+    margin-left: 6px;
+    padding: 1px 7px;
+    font-size: 0.7em;
+    font-weight: 700;
+    line-height: 1.4;
+    border-radius: 999px;
+    background: var(--dm-text-muted);
+    color: #fff;
+    vertical-align: middle;
+}
+
+/* Pills - base shape; background/border colour set inline by applyPill(). */
+.dm-nav-pill {
+    border-radius: 999px;
+    padding: 6px 14px;
+    font-weight: 600;
+}
+.dm-nav-pill--outline {
+    background: transparent !important;
+    border: 1px solid currentColor;
+}
+```
+
+- [ ] **Step 2: Browser verify (deferred to Task 9)** - these classes have no visible effect until items are decorated and painted; verified together with the navbar/footer painters in Task 9.
+
+- [ ] **Step 3: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 8: Mobile drawer - CSS + JS
+
+**Files:**
+- Modify: `public/css/site.css` (drawer styles)
+- Modify: `public/js/site.js` (backdrop + Esc wiring, after navbar init ~line 64)
+
+- [ ] **Step 1: Append the drawer CSS to `public/css/site.css`**
+
+```css
+/* ===========================================================================
+   Mobile navbar drawer - hamburger far-left, slide-in panel + backdrop.
+   Desktop (>= breakpoint) keeps Domma's default layout (collapse shown inline).
+   =========================================================================== */
+@media (max-width: 768px) {
+    /* Hamburger to the far left, brand just after it. */
+    #site-navbar .navbar-toggle { order: 0; margin-right: var(--dm-space-2); }
+    #site-navbar .navbar-brand  { order: 1; }
+
+    /* The collapse body becomes a fixed left drawer. Domma toggles .show. */
+    #site-navbar .navbar-collapse {
+        position: fixed;
+        top: 0; left: 0; bottom: 0;
+        width: 80vw;
+        max-width: 320px;
+        z-index: 1100;
+        margin: 0;
+        padding-top: var(--dm-space-4);
+        background: var(--dm-navbar-bg, var(--dm-surface));
+        border-top: none;
+        border-right: 1px solid var(--dm-border);
+        box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35);
+        transform: translateX(-100%);
+        transition: transform 0.25s ease;
+        overflow-y: auto;
+    }
+    #site-navbar .navbar-collapse.show { transform: translateX(0); }
+
+    /* Backdrop element added by site.js when the drawer opens. */
+    .dm-navbar-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 1090;
+        background: rgba(0, 0, 0, 0.45);
+        border: 0;
+        padding: 0;
+        cursor: pointer;
+    }
+    /* Lock page scroll while the drawer is open. */
+    body.dm-drawer-open { overflow: hidden; }
+}
+```
+
+- [ ] **Step 2: Wire the backdrop + Esc in `public/js/site.js`**
+
+Immediately after the `Domma.elements.navbar('#site-navbar', {...})` + `Domma.icons.scan('#site-navbar')` block (inside the `if ($navbar.length && nav.brand)` block, ~line 64), add:
+
+```js
+        // --- Mobile drawer: backdrop + Esc, reusing Domma's own collapse ---
+        const navEl    = $navbar.get(0);
+        const toggleEl = navEl.querySelector('.navbar-toggle');
+        const collapse = navEl.querySelector('.navbar-collapse');
+        if (toggleEl && collapse) {
+            let backdrop = null;
+
+            const closeDrawer = () => {
+                // Re-trigger Domma's collapse so its state stays in sync.
+                if (collapse.classList.contains('show')) toggleEl.click();
+            };
+            const removeBackdrop = () => {
+                if (backdrop) { backdrop.remove(); backdrop = null; }
+                document.body.classList.remove('dm-drawer-open');
+            };
+            const addBackdrop = () => {
+                if (backdrop) return;
+                backdrop = document.createElement('div');
+                backdrop.className = 'dm-navbar-backdrop';
+                backdrop.addEventListener('click', closeDrawer);
+                document.body.appendChild(backdrop);
+                document.body.classList.add('dm-drawer-open');
+            };
+
+            // Domma toggles `.show` on click; mirror that into the backdrop.
+            toggleEl.addEventListener('click', () => {
+                // Defer so we read the post-toggle state.
+                requestAnimationFrame(() => {
+                    if (collapse.classList.contains('show')) addBackdrop();
+                    else removeBackdrop();
+                });
+            });
+
+            // Domma auto-collapses on link click (mobile) - tidy the backdrop too.
+            collapse.addEventListener('click', (e) => {
+                if (e.target.closest('a')) requestAnimationFrame(removeBackdrop);
+            });
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && collapse.classList.contains('show')) closeDrawer();
+            });
+        }
+```
+
+- [ ] **Step 3: Browser verify (mandatory)** - open **http://192.168.1.4:4096/** in a browser, narrow to a mobile width (≤768px, e.g. DevTools device toolbar). Confirm:
+  - hamburger is on the far left, brand to its right;
+  - tapping it slides the drawer in from the left with a dimmed backdrop;
+  - the **entire** menu is visible (the old clipping/hidden-behind-bar bug is gone);
+  - backdrop tap, `Esc`, and tapping a link all close it; page scroll is locked while open;
+  - at desktop width the navbar is unchanged.
+
+- [ ] **Step 4: Checkpoint** - record the browser result honestly. Pause for review (no commit).
+
+---
+
+## Task 9: Navbar + footer decoration painters - `public/js/site.js`
+
+**Files:**
+- Modify: `public/js/site.js` - import `menu-decor.js`; paint navbar after init; paint footer after `$footer.html(html)`.
+
+- [ ] **Step 1: Add the import.** First check how `site.js` is loaded - inspect the `<script src=".../js/site.js" ...>` tag in `server/templates/page.html` for `type="module"`.
+  - If it **is** a module, add at the top of `public/js/site.js`:
+    ```js
+    import {makeBadgeEl, applyColour, applyPill} from '/public/js/menu-decor.mjs';
+    ```
+  - If it is **not** a module, make the `$(() => { ... })` callback `async` and add as its first line:
+    ```js
+    const {makeBadgeEl, applyColour, applyPill} = await import('/public/js/menu-decor.mjs');
+    ```
+
+- [ ] **Step 2: Paint the navbar** - after the drawer wiring from Task 8 (still inside the navbar `if` block), add a decoration pass over the **separator-stripped** items array (the same one passed to `Domma.elements.navbar`, so `data-index` aligns):
+
+```js
+        // --- Decoration pass: badges / pills / colour on the rendered navbar ---
+        const decoItems = stripSeparators(nav.items || []);
+        navEl.querySelectorAll('.navbar-link[data-index], .navbar-dropdown-item[data-index]').forEach(linkEl => {
+            const top = decoItems[parseInt(linkEl.dataset.index, 10)];
+            if (!top) return;
+            const isChild = linkEl.dataset.subindex != null;   // dropdown children carry data-subindex
+            const item = isChild && Array.isArray(top.items)
+                ? top.items[parseInt(linkEl.dataset.subindex, 10)]
+                : top;
+            if (!item) return;
+            if (item.colour) applyColour(linkEl, item.colour);
+            if (item.pill && !isChild) applyPill(linkEl, item.pill);   // pills: top-level only
+            const badge = makeBadgeEl(item.badge);
+            if (badge) linkEl.appendChild(badge);
+        });
+```
+
+> Confirm against the **live DOM** how Domma marks dropdown child anchors. The framework source shows top-level links as `.navbar-link[data-index]` and dropdown children as `.navbar-dropdown-item[data-index][data-subindex]`. The selector above covers both; verify `data-subindex` is present on children before finalising, and adjust if the framework differs.
+
+- [ ] **Step 3: Paint the footer** - the footer is built as an HTML string and injected via `$footer.html(html)` (Domma's DOMPurify strips `style`/`data-*`), so decorations must be applied to the **DOM after** injection, matched by document order against the footer data. After the existing `$footer.html(html);` line (~line 147), add:
+
+```js
+        // --- Footer decoration pass (post-sanitise DOM) ---
+        // Flatten primary+legal items depth-first in the SAME order renderItem
+        // emitted their <a> elements, then zip against the rendered anchors.
+        function flattenFooter(items, out) {
+            (items || []).forEach(it => {
+                if (it && it.type === 'separator') return;   // renderItem emits <hr>, no <a>
+                out.push(it);
+                if (Array.isArray(it.items) && it.items.length) flattenFooter(it.items, out);
+            });
+            return out;
+        }
+        const footerItemsFlat = [
+            ...flattenFooter(footerData.primary, []),
+            ...flattenFooter(footerData.legal, [])
+        ];
+        const footerAnchors = $footer.get(0).querySelectorAll('.footer-nav a');
+        footerAnchors.forEach((a, i) => {
+            const it = footerItemsFlat[i];
+            if (!it) return;
+            if (it.colour) applyColour(a, it.colour);
+            const badge = makeBadgeEl(it.badge);   // footer: badge + colour, no pills
+            if (badge) a.appendChild(badge);
+        });
+```
+
+> The zip relies on `renderItem` and `flattenFooter` walking children in the same depth-first order. They do (both recurse into `it.items` immediately after the parent). Keep them consistent if either changes.
+
+- [ ] **Step 4: Browser verify (mandatory)** - decorate a navbar item and a footer item (via the editor once Tasks 11-13 land, OR by hand-editing the relevant `config/menus/<slug>.json` for this check). Reload **http://192.168.1.4:4096/** and confirm on desktop:
+  - a static badge shows beside its label; a `countFrom` badge shows the live count;
+  - a pill item renders as a filled/outline chip on the navbar;
+  - a colour override changes the entry's text colour;
+  - the same badge + colour show in the footer (no pill);
+  - preset colours and a custom hex both work.
+
+- [ ] **Step 5: Checkpoint** - record browser result. Pause for review (no commit).
+
+---
+
+## Task 10: Admin sidebar - badge + colour
+
+**Files:**
+- Modify: `admin/js/lib/sidebar-renderer.js` - `renderItem` (~line 160) adds badge + colour.
+
+> The sidebar HTML is admin-trust. Confirm during this task whether the rendered string is mounted as raw HTML (inline `style` survives) or via Domma's sanitising `.html()` (inline `style` stripped). If stripped, mirror the footer approach (Task 9 Step 3): emit plain markup and apply colour/badge in a small post-mount DOM pass instead.
+
+- [ ] **Step 1: Import the shared helper** at the top of `admin/js/lib/sidebar-renderer.js`:
+
+```js
+import {colourToCss} from '/public/js/menu-decor.mjs';
+```
+
+- [ ] **Step 2: Extend `renderItem`** - after the existing `const url = ...` line, compute the colour + badge:
+
+```js
+    const colourCss = item.colour ? colourToCss(item.colour) : '';
+    const itemStyle = colourCss ? ` style="color:${esc(colourCss)}"` : '';
+    let badgeHtml = '';
+    if (item.badge && item.badge.text != null && item.badge.text !== '') {
+        const bg = item.badge.variant ? colourToCss(item.badge.variant) : '';
+        const bStyle = bg ? ` style="background:${esc(bg)};color:#fff"` : '';
+        badgeHtml = `<span class="dm-menu-badge"${bStyle}>${esc(String(item.badge.text))}</span>`;
+    }
+```
+
+Then add `${itemStyle}` to the rendered anchor/button's opening tag and append `${badgeHtml}` after the label in the function's existing return template. Keep the current element structure; only add the style attribute and the badge span.
+
+- [ ] **Step 3: Browser verify (mandatory)** - decorate an `admin-sidebar` menu item (badge + colour) via the editor (after Tasks 11-13) or by hand-editing `config/menus/admin-sidebar.json`, reload the admin panel, and confirm the badge + colour appear on top of the existing count display without breaking the sidebar.
+
+- [ ] **Step 4: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 11: Editor - flatten / nest for new fields
+
+**Files:**
+- Modify: `admin/js/views/menu-editor.js` - `flatten` (~line 24), `nest` (~line 49).
+
+- [ ] **Step 1: Extend `flatten`** so each non-separator row carries decoration fields. In the `out.push({ ... })` object inside `flatten`, add after `bundled`:
+
+```js
+            badge:      it.badge  ? {...it.badge}  : null,
+            pill:       it.pill   ? {...it.pill}   : null,
+            colour:     it.colour || ''
+```
+
+- [ ] **Step 2: Extend `nest`** so they serialise (omit empties). In the `build()` return object inside `nest`, add after the `bundled` spread:
+
+```js
+                ...(r.badge && (r.badge.text || r.badge.countFrom)
+                    ? {badge: {
+                        ...(r.badge.text      && {text:      r.badge.text}),
+                        ...(r.badge.countFrom && {countFrom: r.badge.countFrom}),
+                        ...(r.badge.variant   && {variant:   r.badge.variant})
+                    }}
+                    : {}),
+                ...(r.pill && r.pill.variant
+                    ? {pill: {style: r.pill.style || 'filled', variant: r.pill.variant}}
+                    : {}),
+                ...(r.colour && {colour: r.colour}),
+```
+
+- [ ] **Step 3: Confirm `syncRowsFromDom` is unaffected** - decoration values live on the row object and are edited via the slideover (Task 12), not via inline tree inputs, so `syncRowsFromDom` keeps reading only the inline inputs that remain. No code change here (deliberate confirmation).
+
+- [ ] **Step 4: Browser verify** - open **http://192.168.1.4:4096/admin/#/menus** → edit a menu. Confirm existing items still load/save (round-trip an edit, reload, values persist). Decoration UI lands in Task 12; here we only prove the data plumbing didn't break.
+
+- [ ] **Step 5: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 12: Editor - slim rows + edit slideover
+
+**Files:**
+- Modify: `admin/js/views/menu-editor.js` - `renderTree` (~line 91) slims rows + adds `✎ Edit` + live preview; new module-level `openItemEditor(...)` builds the slideover form via DOM APIs; new `.me-edit` wiring in `onMount`.
+
+- [ ] **Step 1: Slim the row markup + add Edit button + preview** - in `renderTree`, replace the non-separator `$host.append(...)` block with a slimmer row (keep grip, structure buttons, hide, remove; move content fields into the slideover; add a preview span + Edit button). The separator row block and the `walk(row.id)` recursion stay unchanged:
+
+```js
+            const badgePrev = row.badge && (row.badge.text || row.badge.countFrom)
+                ? `<span class="dm-menu-badge">${escapeAttr(String(row.badge.text || '#'))}</span>` : '';
+            const colourPrev = row.colour
+                ? ` style="color:${escapeAttr(row.colour.startsWith('#') ? row.colour : 'var(--dm-' + (row.colour === 'neutral' ? 'text-muted' : row.colour) + ')')}"`
+                : '';
+            $host.append(`
+                <div class="menu-tree-row menu-tree-row--slim${row.hidden ? ' menu-tree-row--hidden' : ''}" data-id="${row.id}" style="margin-left:${d * 28}px">
+                    <span class="menu-tree-grip" data-icon="grip-vertical"></span>
+                    <span class="me-row-label"${colourPrev}>${escapeAttr(row.text || '(untitled)')}${badgePrev}</span>
+                    <span class="me-row-url">${escapeAttr(row.url || '')}</span>
+                    <button class="btn btn-sm btn-ghost me-outdent" data-tooltip="Outdent"><span data-icon="chevron-left"></span></button>
+                    <button class="btn btn-sm btn-ghost me-indent"  data-tooltip="Indent"><span data-icon="chevron-right"></span></button>
+                    <button class="btn btn-sm btn-ghost me-up"      data-tooltip="Move up"><span data-icon="arrow-up"></span></button>
+                    <button class="btn btn-sm btn-ghost me-down"    data-tooltip="Move down"><span data-icon="arrow-down"></span></button>
+                    <button class="btn btn-sm btn-ghost me-hidden ${row.hidden ? 'active' : ''}" data-tooltip="${row.hidden ? 'Show' : 'Hide'}"><span data-icon="eye-off"></span></button>
+                    <button class="btn btn-sm btn-secondary me-edit" data-tooltip="Edit"><span data-icon="pencil"></span></button>
+                    <button class="btn btn-sm btn-danger me-remove" data-tooltip="Remove"><span data-icon="trash"></span></button>
+                </div>
+            `);
+```
+
+- [ ] **Step 2: Add the slideover form builder** - add these module-level helpers to `admin/js/views/menu-editor.js`. Everything is built with `createElement`/`new Option`/`textContent` (no raw-HTML assignment), then appended to `slideover.element` (light-DOM projection, per `effects-builder.js` / `collection-entries.js`). Add the shared-helper import at the top of the file:
+
+```js
+import {colourToCss} from '/public/js/menu-decor.mjs';
+```
+
+```js
+// Small DOM helpers - keep the form free of raw-HTML assignment.
+function elem(tag, props = {}, ...children) {
+    const node = document.createElement(tag);
+    Object.assign(node, props);
+    for (const c of children) if (c != null) node.append(c);
+    return node;
+}
+function fieldRow(labelText, control) {
+    return elem('label', {className: 'form-field'},
+        elem('span', {className: 'form-label', textContent: labelText}), control);
+}
+function selectFrom(pairs, selected) {   // pairs: [[value,label],…]
+    const sel = elem('select', {className: 'form-select'});
+    pairs.forEach(([v, l]) => sel.add(new Option(l, v)));
+    sel.value = selected != null ? selected : '';
+    return sel;
+}
+
+// Colour <select> (presets) + "Custom…" hex swatch. Exposes _read() → ''|preset|#hex.
+function colourField(labelText, value) {
+    const isHex = typeof value === 'string' && value.startsWith('#');
+    const sel = selectFrom(
+        [['', '- none -'], ['primary', 'primary'], ['success', 'success'], ['danger', 'danger'],
+         ['warning', 'warning'], ['info', 'info'], ['neutral', 'neutral'], ['__custom__', 'Custom…']],
+        isHex ? '__custom__' : (value || ''));
+    const hex = elem('input', {type: 'color', className: 'form-input me-colour-hex', value: isHex ? value : '#000000'});
+    hex.style.display = isHex ? '' : 'none';
+    sel.addEventListener('change', () => { hex.style.display = sel.value === '__custom__' ? '' : 'none'; });
+    const wrap = fieldRow(labelText, sel);
+    wrap.append(hex);
+    wrap._read = () => sel.value === '__custom__' ? hex.value : sel.value;
+    return wrap;
+}
+
+// Opens the per-item editor. permResources: array from /api/auth/permissions-registry.
+async function openItemEditor(row, permResources, collections, onSave) {
+    const fText = fieldRow('Label', elem('input', {className: 'form-input', name: 'text', value: row.text || ''}));
+    const fUrl  = fieldRow('URL',   elem('input', {className: 'form-input', name: 'url',  value: row.url  || ''}));
+    const fIcon = fieldRow('Icon',  elem('input', {className: 'form-input', name: 'icon', value: row.icon || ''}));
+    const fVis  = fieldRow('Visibility', elem('input', {className: 'form-input', name: 'visibility', value: row.visibility || ''}));
+
+    const permSel = selectFrom(
+        [['', '- no permission gate -'], ...(permResources || []).map(r => [r.key, r.label || r.key])],
+        row.permission || '');
+    permSel.name = 'permission';
+    const fPerm = fieldRow('Permission', permSel);
+
+    const heading = elem('h4', {className: 'me-form-section', textContent: 'Decoration'});
+
+    const fBadgeText = fieldRow('Badge text', elem('input', {className: 'form-input', name: 'badgeText', value: row.badge?.text || ''}));
+    const countSel = selectFrom(
+        [['', '- none -'], ...(collections || []).map(c => [c.slug, c.title || c.slug])],
+        row.badge?.countFrom || '');
+    countSel.name = 'badgeCount';
+    const fBadgeCount  = fieldRow('Badge count from', countSel);
+    const fBadgeColour = colourField('Badge colour', row.badge?.variant || '');
+
+    const renderAs = selectFrom([['link', 'Link'], ['pill', 'Pill']], row.pill ? 'pill' : 'link');
+    renderAs.name = 'renderAs';
+    const fRenderAs  = fieldRow('Render as', renderAs);
+    const fPillStyle = fieldRow('Pill style', selectFrom([['filled', 'Filled'], ['outline', 'Outline']], row.pill?.style || 'filled'));
+    const fPillColour = colourField('Pill colour', row.pill?.variant || '');
+    const pillWrap = elem('div', {}, fPillStyle, fPillColour);
+    pillWrap.style.display = row.pill ? '' : 'none';
+    renderAs.addEventListener('change', () => { pillWrap.style.display = renderAs.value === 'pill' ? '' : 'none'; });
+
+    const fColour = colourField('Text colour', row.colour || '');
+
+    const saveBtn = elem('button', {className: 'btn btn-primary', textContent: 'Apply'});
+    const form = elem('div', {className: 'me-item-form'},
+        fText, fUrl, fIcon, fVis, fPerm, heading,
+        fBadgeText, fBadgeCount, fBadgeColour, fRenderAs, pillWrap, fColour, saveBtn);
+
+    const so = E.slideover({title: 'Edit menu item', size: 'md', position: 'right'});
+    so.element.appendChild(form);     // light-DOM projection keeps inputs/buttons interactive
+    so.open();
+    Domma.icons.scan(form);
+
+    const val = (n) => form.querySelector(`[name="${n}"]`)?.value || '';
+    saveBtn.addEventListener('click', () => {
+        row.text = val('text'); row.url = val('url'); row.icon = val('icon');
+        row.visibility = val('visibility'); row.permission = val('permission');
+
+        const bText = val('badgeText'), bCount = val('badgeCount'), bColour = fBadgeColour._read();
+        row.badge = (bText || bCount)
+            ? {...(bText && {text: bText}), ...(bCount && {countFrom: bCount}), ...(bColour && {variant: bColour})}
+            : null;
+
+        if (val('renderAs') === 'pill') {
+            const pc = fPillColour._read();
+            row.pill = {style: val('pillStyle') || 'filled', ...(pc && {variant: pc})};
+        } else {
+            row.pill = null;
+        }
+        row.colour = fColour._read();
+
+        so.close();
+        onSave();
+    });
+}
+```
+
+- [ ] **Step 3: Wire the `.me-edit` button** in `onMount`, alongside the other delegated row handlers (e.g. after the `.me-hidden` handler ~line 284). It needs the permission resources and collection list - fetch the collection list once near the top of `onMount` (next to the existing `permRegistry` fetch):
+
+```js
+        // Collections drive the badge "count from" select.
+        const collectionsList = await api.collections.list().catch(() => []);
+```
+
+```js
+        $container.off('click', '.me-edit').on('click', '.me-edit', function () {
+            const id  = $(this).closest('.menu-tree-row').data('id');
+            const row = flat.find(r => r.id === id);
+            if (!row || row.type === 'separator') return;
+            openItemEditor(row, permRegistry.resources || [], collectionsList,
+                () => renderTree($list, flat, permOptionsFor));
+        });
+```
+
+- [ ] **Step 4: Browser verify (mandatory)** - open **http://192.168.1.4:4096/admin/#/menus**, edit a menu:
+  - rows are slim with a live label/badge/colour preview;
+  - `✎ Edit` opens a right slideover whose inputs/selects/buttons are all interactive (not stripped);
+  - set a static badge, a `countFrom` badge, a pill (filled + outline), preset and custom-hex colours;
+  - Apply updates the row preview; Save persists; reload the page → values round-trip;
+  - reorder / indent / outdent / hide / remove and separators still work.
+
+- [ ] **Step 5: Checkpoint** - record browser result. Pause for review (no commit).
+
+---
+
+## Task 13: Editor CSS - slim rows + slideover form
+
+**Files:**
+- Modify: `admin/css/admin.css` (append)
+
+- [ ] **Step 1: Append styles**
+
+```css
+/* Slim menu-editor rows - label + url + action buttons in a single line. */
+.menu-tree-row--slim {
+    display: grid;
+    grid-template-columns: 16px 1fr auto repeat(7, auto);
+    gap: 6px;
+    align-items: center;
+}
+.menu-tree-row--slim .me-row-label { font-weight: 600; }
+.menu-tree-row--slim .me-row-url   { color: var(--dm-text-muted); font-size: 0.85em; }
+
+/* Edit slideover form. */
+.me-item-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
+.me-item-form .form-field { display: flex; flex-direction: column; gap: 4px; }
+.me-item-form .form-label { font-size: 0.85em; color: var(--dm-text-muted); }
+.me-form-section { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--dm-border-subtle, rgba(0,0,0,.15)); }
+.me-item-form .me-colour-hex { width: 48px; height: 32px; padding: 2px; }
+```
+
+- [ ] **Step 2: Browser verify** - reload the menu editor; confirm slim rows line up cleanly and the slideover form reads well (labels, colour swatch input, sections). Adjust the grid column count if the button count differs from the markup.
+
+- [ ] **Step 3: Checkpoint** - pause for review (no commit).
+
+---
+
+## Task 14: Full regression + final browser sweep
+
+- [ ] **Step 1: Run the whole affected server suite**
+
+Run: `node --test tests/services/menus.test.js tests/services/menus-decorations.test.js tests/services/menus-shortcode.test.js tests/services/menu-decor-client.test.js tests/routes/menus.test.js tests/routes/sidebar.test.js`
+Expected: all PASS.
+
+- [ ] **Step 2: Final browser sweep** (mandatory, one session at **http://192.168.1.4:4096/** + `/admin/`):
+  - Mobile drawer: far-left hamburger, slide-in, backdrop/Esc/link close, full visibility, desktop unchanged.
+  - Navbar decorations: static badge, live `countFrom` badge, filled + outline pill, preset + hex colour.
+  - Footer decorations: badge + colour (no pill).
+  - `[menu]` shortcode on a content page: badge + colour.
+  - Admin sidebar: badge + colour over existing counts.
+  - Editor: slim rows, slideover round-trip, separators intact.
+
+- [ ] **Step 3: Checkpoint** - summarise results honestly (what was verified in-browser vs not). Hand back for the user to commit.
+
+---
+
+## Self-review notes (author)
+
+- **Spec coverage:** drawer (T8), far-left hamburger (T8), badges static+count (T1-T6,T9), pills (T6,T9), colour presets+hex (T1,T6,T9), data model + validation (T1-T2), resolver (T3), navbar/footer/shortcode/sidebar rendering (T4,T5,T9,T10), editor slim rows + slideover (T11-T13), regression sweep (T14). All spec sections map to tasks.
+- **Sanitiser asymmetry handled:** server surfaces (`[menu]`, sidebar) use inline `style` (allowed by `sanitize-html`'s config); footer uses post-DOM painting because Domma `.html()`/DOMPurify strip `style`/`data-*`.
+- **DOM-build rule:** the editor form is built with `createElement`/`new Option`/`textContent` - no raw-HTML assignment - matching the codebase gotcha that Domma sanitisation strips `<button>`/`<input>`.
+- **Type consistency:** `colourToCss`/`isValidColour`/`PRESET_COLOUR_VARS` identical on server (`menus.js`) and client (`menu-decor.js`); `resolveMenuDecorations(items, {countEntries})` signature consistent across T3-T5; row decoration fields (`badge`/`pill`/`colour`) consistent across flatten/nest/slideover.
+- **Open risks (carry into execution):** (a) live-count perf - if a menu references many `countFrom` collections, add response-cache memoisation (`server/services/cache`) keyed by collection+role; (b) navbar `data-index`/`data-subindex` selector must be confirmed against the live Domma DOM (flagged in T9 Step 2); (c) sidebar mount path (raw HTML vs Domma `.html()`) must be confirmed (flagged in T10).
+```