domma-cms 1.6.59 → 1.7.0

package/docs/plans/2026-03-09-page-editor-view-cta-inserts-design.md

@@ -0,0 +1,78 @@
+# Page Editor - View & CTA Insert Pickers Design
+
+**Date:** 2026-03-09
+**Status:** Approved
+
+---
+
+## Overview
+
+Add **View** and **CTA** items to the Insert dropdown in the page editor toolbar. Each opens a guided picker dropdown that fetches live data from the API and generates the correct shortcode.
+
+---
+
+## Toolbar Changes
+
+Two new items appended to the existing Insert dropdown (`plus-circle`) in `markdown-toolbar.js`:
+
+| Label | Icon | Action key |
+|-------|------|------------|
+| View | `eye` | `view` |
+| CTA | `mouse-pointer` | `cta` |
+
+Both follow the established picker pattern (`openIconPicker`, `openSpacerPicker`): DOM-built dropdown, positioned below the trigger button, closed on outside click.
+
+---
+
+## View Picker
+
+Fetches `GET /api/views` and presents:
+
+1. **View** - `<select>` populated with view slugs + titles from the API
+2. **Display** - `<select>`: Table / Cards / List
+3. **Insert** button → generates:
+
+```
+[view slug="selected-slug" display="table" /]
+```
+
+If the API returns no views, shows: *"No Views configured yet - create one under Data → Views."*
+
+---
+
+## CTA Picker
+
+Fetches `GET /api/actions` and presents:
+
+1. **Action** - `<select>` populated with action slugs + titles
+2. **Label** - text input (pre-filled with the selected action's trigger label)
+3. **Entry ID** - free-text input (UUID), left blank by default with placeholder `"Paste entry UUID…"`
+4. **Style** - `<select>`: Primary / Secondary / Ghost / Danger
+5. **Icon** - text input (icon name, optional)
+6. **Confirm** - text input (optional confirmation message)
+7. **Insert** button → generates:
+
+```
+[cta action="selected-action" entry="uuid-or-blank" style="primary" icon="check" confirm="Are you sure?"]Label[/cta]
+```
+
+If no icon or confirm, those attributes are omitted. If entry ID is blank, `entry=""` is inserted so the author knows to fill it in.
+
+If the API returns no actions, shows: *"No Actions configured yet - create one under Data → Actions."*
+
+---
+
+## Wiring
+
+`markdown-toolbar.js` exports two new handler hooks: `onView(cb)` and `onCta(cb)`.
+
+`page-editor.js` sets these handlers with the API fetch calls (same pattern as the existing `onCollection` handler).
+
+---
+
+## Files
+
+| File | Change |
+|------|--------|
+| `admin/js/lib/markdown-toolbar.js` | Add `openViewPicker`, `openCtaPicker`, two Insert items, two handler hooks |
+| `admin/js/views/page-editor.js` | Wire `toolbar.onView()` and `toolbar.onCta()` |

package/docs/plans/2026-03-09-page-editor-view-cta-inserts.md

@@ -0,0 +1,388 @@
+# Page Editor View & CTA Insert Pickers Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add View and CTA shortcode insert pickers to the page editor toolbar's Insert dropdown.
+
+**Architecture:** Two new items in the existing Insert dropdown call handler callbacks registered by page-editor.js. Each handler opens an `E.modal` with a DOM-built form, fetches the relevant API list, and inserts the generated shortcode via `insertAtCursor`. Exactly mirrors the existing `onCollection` pattern.
+
+**Tech Stack:** Domma admin SPA, `E.modal` (light DOM projection), `insertAtCursor`, `api.views.list()`, `api.actions.list()`.
+
+---
+
+## Key reference points before starting
+
+- **Insert dropdown items array** - `admin/js/lib/markdown-toolbar.js` line ~632-641 (inside `buttons` array, the `plus-circle` dropdown `items`)
+- **`handlers` object** - line ~656: `const handlers = {link, image, card, grid, help, effects, collection}`
+- **`executeAction`** - line ~523, the `else if (action === 'collection')` block ends at ~592
+- **Return object** - line ~785, exports `onLink`, `onImage`, `onCard`, `onGrid`, `onHelp`, `onEffects`, `onCollection`
+- **`onCollection` handler in page-editor.js** - line ~740-911, the exact modal pattern to follow
+- **`labelStyle` / `inputStyle`** constants are defined inside `toolbar.onCollection` - redeclare them in each new handler (they are local constants, not exported)
+
+---
+
+## Task 1: Extend markdown-toolbar.js - add View and CTA hooks
+
+**Files:**
+- Modify: `admin/js/lib/markdown-toolbar.js`
+
+**Step 1: Add `view` and `cta` to the `handlers` object**
+
+Find (line ~656):
+```js
+const handlers = {link: null, image: null, card: null, grid: null, help: null, effects: null, collection: null};
+```
+
+Replace with:
+```js
+const handlers = {link: null, image: null, card: null, grid: null, help: null, effects: null, collection: null, view: null, cta: null};
+```
+
+**Step 2: Add two items to the Insert dropdown**
+
+Find the Insert dropdown items array (the `plus-circle` button object, line ~632):
+```js
+      {label: 'Collection', icon: 'database', action: 'collection'},
+    ]
+  },
+```
+
+Replace with:
+```js
+      {label: 'Collection', icon: 'database', action: 'collection'},
+      {label: 'View',       icon: 'eye',      action: 'view'},
+      {label: 'CTA Button', icon: 'mouse-pointer', action: 'cta'},
+    ]
+  },
+```
+
+**Step 3: Add `view` and `cta` branches to `executeAction`**
+
+Find (immediately after the `collection` block, line ~591-593):
+```js
+  } else if (action === 'help') {
+    if (handlers.help) handlers.help(ta);
+  }
+```
+
+Replace with:
+```js
+  } else if (action === 'view') {
+    if (handlers.view) handlers.view(ta);
+  } else if (action === 'cta') {
+    if (handlers.cta) handlers.cta(ta);
+  } else if (action === 'help') {
+    if (handlers.help) handlers.help(ta);
+  }
+```
+
+**Step 4: Export `onView` and `onCta` in the return object**
+
+Find (line ~805-808):
+```js
+      onCollection(cb) {
+          handlers.collection = cb;
+    }
+```
+
+Replace with:
+```js
+      onCollection(cb) {
+        handlers.collection = cb;
+      },
+      onView(cb) {
+        handlers.view = cb;
+      },
+      onCta(cb) {
+        handlers.cta = cb;
+      }
+```
+
+**Step 5: Verify no syntax errors**
+
+```bash
+cd /home/darryl/src/js/domma-cms && node --check admin/js/lib/markdown-toolbar.js
+```
+Expected: exits 0, no output.
+
+**Step 6: Commit**
+
+```bash
+git add admin/js/lib/markdown-toolbar.js
+git commit -m "feat: add view and cta action hooks to editor toolbar"
+```
+
+---
+
+## Task 2: Wire onView handler in page-editor.js
+
+**Files:**
+- Modify: `admin/js/views/page-editor.js`
+
+**Step 1: Add the `toolbar.onView` handler after the `onCollection` block**
+
+Find (line ~911-913):
+```js
+        });
+
+      // Help callback: open editor reference slideover
+      toolbar.onHelp(() => {
+```
+
+Insert between them:
+```js
+        });
+
+        // View picker callback
+        toolbar.onView(async (ta) => {
+            const views = await api.views.list().catch(() => []);
+
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'padding:1rem;display:flex;flex-direction:column;gap:.75rem;';
+
+            const labelStyle = 'display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;';
+            const inputStyle = '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;';
+
+            // View select
+            const viewRow = document.createElement('div');
+            const viewLabel = document.createElement('label');
+            viewLabel.style.cssText = labelStyle;
+            viewLabel.textContent = 'View';
+            const viewSelect = document.createElement('select');
+            viewSelect.style.cssText = inputStyle;
+            if (!views.length) {
+                const opt = document.createElement('option');
+                opt.value = '';
+                opt.textContent = 'No Views configured yet - create one under Data → Views';
+                viewSelect.appendChild(opt);
+            } else {
+                views.forEach(v => {
+                    const opt = document.createElement('option');
+                    opt.value = v.slug;
+                    opt.textContent = v.title || v.slug;
+                    viewSelect.appendChild(opt);
+                });
+            }
+            viewRow.appendChild(viewLabel);
+            viewRow.appendChild(viewSelect);
+            wrapper.appendChild(viewRow);
+
+            // Display mode select
+            const dispRow = document.createElement('div');
+            const dispLabel = document.createElement('label');
+            dispLabel.style.cssText = labelStyle;
+            dispLabel.textContent = 'Display';
+            const dispSelect = document.createElement('select');
+            dispSelect.style.cssText = inputStyle;
+            ['table', 'cards', 'list'].forEach(d => {
+                const opt = document.createElement('option');
+                opt.value = d;
+                opt.textContent = d.charAt(0).toUpperCase() + d.slice(1);
+                dispSelect.appendChild(opt);
+            });
+            dispRow.appendChild(dispLabel);
+            dispRow.appendChild(dispSelect);
+            wrapper.appendChild(dispRow);
+
+            // Insert button
+            const insertBtn = document.createElement('button');
+            insertBtn.type = 'button';
+            insertBtn.className = 'btn btn-primary';
+            insertBtn.textContent = 'Insert';
+            wrapper.appendChild(insertBtn);
+
+            const modal = E.modal({title: 'Insert View', size: 'sm'});
+            modal.element.appendChild(wrapper);
+            modal.open();
+
+            insertBtn.addEventListener('click', () => {
+                const slug = viewSelect.value;
+                if (!slug) return;
+                const snippet = `[view slug="${slug}" display="${dispSelect.value}" /]`;
+                modal.close();
+                insertAtCursor(ta, snippet);
+                ta.dispatchEvent(new Event('input', {bubbles: true}));
+                ta.focus();
+            });
+        });
+
+      // Help callback: open editor reference slideover
+      toolbar.onHelp(() => {
+```
+
+**Step 2: Verify no syntax errors**
+
+```bash
+node --check admin/js/views/page-editor.js
+```
+Expected: exits 0.
+
+**Step 3: Commit**
+
+```bash
+git add admin/js/views/page-editor.js
+git commit -m "feat: add View shortcode insert picker to page editor toolbar"
+```
+
+---
+
+## Task 3: Wire onCta handler in page-editor.js
+
+**Files:**
+- Modify: `admin/js/views/page-editor.js`
+
+**Step 1: Add the `toolbar.onCta` handler after the `onView` block**
+
+Find (immediately after the view handler's closing `});` and before the help comment):
+```js
+      // Help callback: open editor reference slideover
+      toolbar.onHelp(() => {
+```
+
+Insert between them:
+```js
+        // CTA picker callback
+        toolbar.onCta(async (ta) => {
+            const actions = await api.actions.list().catch(() => []);
+
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'padding:1rem;display:flex;flex-direction:column;gap:.75rem;';
+
+            const labelStyle = 'display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;';
+            const inputStyle = '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;';
+
+            function makeRow(labelText, control) {
+                const row = document.createElement('div');
+                const lbl = document.createElement('label');
+                lbl.style.cssText = labelStyle;
+                lbl.textContent = labelText;
+                row.appendChild(lbl);
+                row.appendChild(control);
+                return row;
+            }
+
+            function makeSelect(options) {
+                const sel = document.createElement('select');
+                sel.style.cssText = inputStyle;
+                options.forEach(([val, text]) => {
+                    const opt = document.createElement('option');
+                    opt.value = val;
+                    opt.textContent = text;
+                    sel.appendChild(opt);
+                });
+                return sel;
+            }
+
+            function makeInput(type, placeholder, value) {
+                const inp = document.createElement('input');
+                inp.type = type;
+                inp.placeholder = placeholder || '';
+                inp.value = value || '';
+                inp.style.cssText = inputStyle;
+                return inp;
+            }
+
+            // Action select
+            const actionSelect = makeSelect(
+                actions.length
+                    ? actions.map(a => [a.slug, a.title || a.slug])
+                    : [['', 'No Actions configured yet - create one under Data → Actions']]
+            );
+            wrapper.appendChild(makeRow('Action', actionSelect));
+
+            // Label input - pre-fill from selected action's trigger label when available
+            const labelInput = makeInput('text', 'Button label', 'Run');
+            wrapper.appendChild(makeRow('Label', labelInput));
+
+            // Auto-fill label when action selection changes
+            actionSelect.addEventListener('change', () => {
+                const selected = actions.find(a => a.slug === actionSelect.value);
+                if (selected?.trigger?.label) labelInput.value = selected.trigger.label;
+            });
+            // Trigger once on load
+            if (actions.length) {
+                const first = actions[0];
+                if (first?.trigger?.label) labelInput.value = first.trigger.label;
+            }
+
+            // Entry ID input
+            const entryInput = makeInput('text', 'Paste entry UUID…', '');
+            wrapper.appendChild(makeRow('Entry ID', entryInput));
+
+            // Style select
+            const styleSelect = makeSelect([
+                ['primary',   'Primary'],
+                ['secondary', 'Secondary'],
+                ['ghost',     'Ghost'],
+                ['danger',    'Danger'],
+            ]);
+            wrapper.appendChild(makeRow('Style', styleSelect));
+
+            // Icon input
+            const iconInput = makeInput('text', 'e.g. check, zap, send (optional)', '');
+            wrapper.appendChild(makeRow('Icon', iconInput));
+
+            // Confirm input
+            const confirmInput = makeInput('text', 'Confirmation message (optional)', '');
+            wrapper.appendChild(makeRow('Confirm prompt', confirmInput));
+
+            // Insert button
+            const insertBtn = document.createElement('button');
+            insertBtn.type = 'button';
+            insertBtn.className = 'btn btn-primary';
+            insertBtn.textContent = 'Insert';
+            wrapper.appendChild(insertBtn);
+
+            const modal = E.modal({title: 'Insert CTA Button', size: 'sm'});
+            modal.element.appendChild(wrapper);
+            modal.open();
+
+            insertBtn.addEventListener('click', () => {
+                const action = actionSelect.value;
+                if (!action) return;
+                const entry  = entryInput.value.trim();
+                const label  = labelInput.value.trim()  || 'Run';
+                const style  = styleSelect.value;
+                const icon   = iconInput.value.trim();
+                const confirm = confirmInput.value.trim();
+
+                let attrs = `action="${action}" entry="${entry}" style="${style}"`;
+                if (icon) attrs += ` icon="${icon}"`;
+                if (confirm) attrs += ` confirm="${confirm}"`;
+
+                const snippet = `[cta ${attrs}]${label}[/cta]`;
+                modal.close();
+                insertAtCursor(ta, snippet);
+                ta.dispatchEvent(new Event('input', {bubbles: true}));
+                ta.focus();
+            });
+        });
+
+      // Help callback: open editor reference slideover
+      toolbar.onHelp(() => {
+```
+
+**Step 2: Verify no syntax errors**
+
+```bash
+node --check admin/js/views/page-editor.js
+```
+Expected: exits 0.
+
+**Step 3: Commit**
+
+```bash
+git add admin/js/views/page-editor.js
+git commit -m "feat: add CTA shortcode insert picker to page editor toolbar"
+```
+
+---
+
+## Verification checklist
+
+1. Open the page editor (`#/pages` → edit any page)
+2. Click the **Insert** toolbar button (plus-circle icon) - dropdown shows: Card, Grid, Badge, Timeline, Spacer, Icon, Collection, **View**, **CTA Button**
+3. Click **View** → modal opens → if Views exist, select shows their titles; pick one, pick display mode, click Insert → `[view slug="..." display="..." /]` inserted at cursor
+4. Click **CTA Button** → modal opens → if Actions exist, select shows them; label auto-fills from action trigger; enter an entry UUID; pick style/icon/confirm; click Insert → `[cta action="..." entry="..." style="..." ...]Label[/cta]` inserted
+5. Both modals close cleanly after Insert; textarea retains focus
+6. With no Views/Actions configured: select shows the "No X configured" message; Insert button produces `[view slug="" ...]` - acceptable, no crash

package/docs/plans/2026-03-09-pro-documentation-design.md

@@ -0,0 +1,80 @@
+# Pro Documentation - Design
+
+**Date:** 2026-03-09
+**Status:** Approved
+
+---
+
+## Overview
+
+Add a Pro documentation section in two places:
+
+1. **Public Resources** - New `/resources/pro/` sub-section with individual pages for Views, Actions, and the CTA shortcode
+2. **Admin sidebar** - New "Pro Documentation" page at `#/pro/docs` with three tabs (Views, Actions, CTA Shortcode)
+
+---
+
+## Public Resources Pro Section
+
+### Structure
+
+| File | URL | Description |
+|------|-----|-------------|
+| `content/pages/resources/pro/index.md` | `/resources/pro` | Landing page with hero + 3 cards |
+| `content/pages/resources/pro/views.md` | `/resources/pro/views` | Views reference - aggregation pipelines |
+| `content/pages/resources/pro/actions.md` | `/resources/pro/actions` | Actions reference - step types, templates |
+| `content/pages/resources/pro/cta.md` | `/resources/pro/cta` | CTA shortcode - syntax, attributes, collection integration |
+
+### Page Pattern
+
+Each page follows the existing resources convention:
+- `[hero variant="dark" size="sm" fullwidth="true" twinkle twinkle-count="20" blobs]` at the top
+- A `[badge]Pro[/badge]` + "Requires MongoDB" notice near the top (Views and Actions pages)
+- Content with attribute tables and fenced code block examples
+- `← Back to Pro Features` link at the bottom
+
+### Resources Index Update
+
+Add a "Pro Features" card to `content/pages/resources/index.md` (the existing 3-column grid), linking to `/resources/pro`.
+
+---
+
+## Admin Pro Docs Panel
+
+### Route
+
+`#/pro/docs`
+
+### Files
+
+| File | Purpose |
+|------|---------|
+| `admin/js/views/pro-docs.js` | View module - `{ templateUrl, onMount }` |
+| `admin/js/templates/pro-docs.html` | HTML template with three-tab layout |
+
+### Sidebar Entry
+
+- Added to the admin sidebar config (in `admin/js/app.js` or wherever `getSidebarConfig` is defined)
+- Section label: **"Pro"**
+- Item label: **"Documentation"**
+- Icon: `zap`
+- Route: `#/pro/docs`
+- Permission gate: visible if user has `views` OR `actions` permission
+
+### Tab Content
+
+| Tab | Content |
+|-----|---------|
+| **Views** | What Views are; the execute pipeline; allowed `$match`/`$sort`/`$lookup` etc. stages; forbidden stages; template variable reference; worked example pipeline |
+| **Actions** | What Actions are; Phase 1 step types (`updateField`, `deleteEntry`, `moveToCollection`, `webhook`, `email`); template interpolation (`{{entry.data.x}}`, `{{now}}`, `{{user.name}}`); partial execution behaviour |
+| **CTA Shortcode** | Syntax (wrapping + self-closing forms); attribute table; standalone page example; collection integration example (`cta="slug"` on `[collection /]`) |
+
+Content is written for **admin users configuring features**, not public readers. Focus on how to set up and use each feature in the admin UI.
+
+---
+
+## Out of Scope
+
+- Live demo executions inside the admin docs panel
+- Public site navigation changes (no new navbar items)
+- Plugin or API documentation changes