domma-cms 0.3.0 → 0.5.2

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

@@ -0,0 +1,158 @@
+<div class="view-header">
+    <h1><span data-icon="box"></span> <span id="block-editor-title">New Block</span></h1>
+    <div style="display:flex;gap:.5rem;">
+        <a href="#/blocks" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> All Blocks
+        </a>
+        <button id="save-block-btn" class="btn btn-primary">
+            <span data-icon="save"></span> Save Block
+        </button>
+    </div>
+</div>
+
+<!-- Block Name -->
+<div class="card card-collapsible mb-3">
+    <div class="card-header">
+        <h2>Block Name</h2>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    </div>
+    <div class="card-body" style="max-width:420px;">
+        <label class="form-label">Name <span style="color:var(--dm-danger,#f87171);">*</span></label>
+        <input id="block-name" type="text" class="form-input" placeholder="e.g. feedback-card">
+        <small class="text-muted">Lowercase letters, digits, and hyphens only. Cannot be changed after creation.</small>
+    </div>
+</div>
+
+<!-- HTML Editor + Preview -->
+<div class="card card-collapsible editor-card mb-3">
+    <div class="card-header">
+        <h2>Template HTML</h2>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    </div>
+    <div class="card-body p-0">
+
+        <!-- Toolbar -->
+        <div id="block-editor-toolbar" class="editor-toolbar">
+            <button type="button" class="btn btn-ghost btn-sm" data-action="undo" title="Undo (Ctrl+Z)">
+                <span data-icon="corner-up-left"></span>
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="redo" title="Redo (Ctrl+Y)">
+                <span data-icon="corner-up-right"></span>
+            </button>
+            <span class="editor-toolbar-sep"></span>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="cut" title="Cut (Ctrl+X)">
+                <span data-icon="scissors"></span>
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="copy" title="Copy (Ctrl+C)">
+                <span data-icon="copy"></span>
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="paste" title="Paste (Ctrl+V)">
+                <span data-icon="clipboard"></span>
+            </button>
+            <span class="editor-toolbar-sep"></span>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="select-all" title="Select All (Ctrl+A)">
+                <span data-icon="maximize-2"></span>
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="format" title="Format HTML">
+                <span data-icon="code"></span> Format
+            </button>
+
+            <!-- View mode toggles (right side) -->
+            <div class="editor-toolbar-right">
+                <span id="block-cursor-pos"
+                      style="font-size:.75rem;color:var(--dm-text-muted,#888);margin-right:.5rem;">Ln 1, Col 1</span>
+                <span class="editor-toolbar-sep"></span>
+                <button type="button" class="editor-view-btn active" data-mode="write" title="Edit only">
+                    <span data-icon="edit-2"></span>
+                </button>
+                <button type="button" class="editor-view-btn" data-mode="split" title="Split view">
+                    <span data-icon="columns"></span>
+                </button>
+                <button type="button" class="editor-view-btn" data-mode="preview" title="Preview only">
+                    <span data-icon="eye"></span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Editor body — split pane -->
+        <div id="block-editor-body" class="editor-body editor-mode-write" style="min-height:460px;">
+
+            <!-- Write pane -->
+            <div class="editor-pane editor-pane--write" style="flex-direction:row;overflow:hidden;">
+                <div id="block-line-numbers" class="editor-line-numbers">1</div>
+                <textarea id="block-content" class="editor-textarea"
+                          spellcheck="false"
+                          placeholder="<div class=&quot;card mb-3&quot;>&#10;  <div class=&quot;card-body&quot;>&#10;    <h3>{{title}}</h3>&#10;    <p>{{message}}</p>&#10;  </div>&#10;</div>"></textarea>
+            </div>
+
+            <div class="editor-divider"></div>
+
+            <!-- Preview pane -->
+            <div class="editor-pane editor-pane--preview" style="flex-direction:column;overflow:hidden;">
+                <!-- Sample data inputs — auto-populated by JS -->
+                <div id="block-sample-data" style="
+                    border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
+                    padding:.6rem .75rem;
+                    background:var(--dm-surface-subtle,rgba(0,0,0,.1));
+                    flex-shrink:0;">
+                    <p class="text-muted" style="font-size:.8rem;margin:0;">
+                        Write some template HTML to populate sample data fields.
+                    </p>
+                </div>
+                <!-- Rendered output -->
+                <div id="block-preview-output" style="flex:1;overflow-y:auto;padding:1rem;"></div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<!-- Placeholder Reference -->
+<div class="card card-collapsible mb-3 card-collapsed">
+    <div class="card-header">
+        <h2>Placeholder Reference</h2>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    </div>
+    <div class="card-body" style="font-size:.85rem;line-height:1.8;">
+        <p>Use <code class="dm-code-inline">{{fieldName}}</code> to insert entry field values. Values are HTML-escaped
+            automatically to prevent XSS.</p>
+        <table class="table" style="max-width:520px;margin:.75rem 0;">
+            <thead>
+            <tr>
+                <th style="width:180px;">Placeholder</th>
+                <th>Value</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td><code class="dm-code-inline">{{fieldName}}</code></td>
+                <td>Any entry field — e.g. <code class="dm-code-inline">{{title}}</code>, <code class="dm-code-inline">{{rating}}</code>,
+                    <code class="dm-code-inline">{{message}}</code></td>
+            </tr>
+            <tr>
+                <td><code class="dm-code-inline">{{_id}}</code></td>
+                <td>Entry UUID</td>
+            </tr>
+            <tr>
+                <td><code class="dm-code-inline">{{_createdAt}}</code></td>
+                <td>Creation timestamp (ISO 8601)</td>
+            </tr>
+            <tr>
+                <td><code class="dm-code-inline">{{_updatedAt}}</code></td>
+                <td>Last-updated timestamp (ISO 8601)</td>
+            </tr>
+            </tbody>
+        </table>
+        <p><strong>Use in a shortcode:</strong></p>
+        <pre class="dm-code-block">[collection slug="feedback" display="block" block="feedback-card" /]
+[view slug="my-view" display="block" block="feedback-card" /]</pre>
+        <p style="margin-top:.75rem;"><strong>Example block template:</strong></p>
+        <pre class="dm-code-block">&lt;div class="card mb-3"&gt;
+  &lt;div class="card-body"&gt;
+    &lt;h3&gt;{{name}}&lt;/h3&gt;
+    &lt;p&gt;{{message}}&lt;/p&gt;
+    &lt;small&gt;Rating: {{rating}} &amp;mdash; {{_createdAt}}&lt;/small&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+    </div>
+</div>

package/admin/js/templates/blocks.html

@@ -0,0 +1,8 @@
+<div class="view-header">
+    <h1><span data-icon="box"></span> Blocks</h1>
+    <a href="#/blocks/new" class="btn btn-primary">
+        <span data-icon="plus"></span> New Block
+    </a>
+</div>
+
+<div id="blocks-table-container"></div>

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

@@ -15,6 +15,7 @@
         <button class="tab-item active">Settings</button>
         <button class="tab-item">Fields</button>
         <button class="tab-item">API Access</button>
+      <button class="tab-item" id="storage-tab-btn" style="display:none;">Storage</button>
     </div>
     <div class="tab-content">
 
@@ -39,6 +40,19 @@
                             <textarea id="field-description" class="form-input" rows="2" placeholder="Optional description…"></textarea>
                         </div>
                     </div>
+                    <div class="row mt-3">
+                        <div class="col-6">
+                            <label class="form-label">Entry Form Layout</label>
+                            <select id="collection-layout" class="form-input">
+                                <option value="stacked">Stacked</option>
+                                <option value="grid">Grid</option>
+                            </select>
+                        </div>
+                        <div class="col-6" id="collection-columns-group" style="display:none;">
+                            <label class="form-label">Columns</label>
+                            <input id="collection-columns" type="number" class="form-input" min="1" max="6" value="2">
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -76,5 +90,38 @@
             </div>
         </div>
 
+      <!-- Storage tab (Pro) -->
+      <div class="tab-panel" id="storage-panel">
+        <div class="card">
+          <div class="card-header"><h2>Storage Adapter</h2></div>
+          <div class="card-body">
+            <p class="text-muted mb-4">Choose where this collection's entries are stored. File-based storage is the
+              default. MongoDB requires Pro mode to be enabled.</p>
+            <div class="form-group mb-3">
+              <label class="form-label">Adapter</label>
+              <button id="storage-adapter-trigger" class="form-input" type="button"
+                      style="text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;">
+                <span id="storage-adapter-label">File (default)</span>
+                <span data-icon="chevron-down" style="opacity:.5;"></span>
+              </button>
+              <input type="hidden" id="storage-adapter" value="file">
+            </div>
+            <div id="storage-connection-group" class="form-group mb-3" style="display:none;">
+              <label class="form-label">Connection</label>
+              <button id="storage-connection-trigger" class="form-input" type="button"
+                      style="text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;">
+                <span id="storage-connection-label">default</span>
+                <span data-icon="chevron-down" style="opacity:.5;"></span>
+              </button>
+              <input type="hidden" id="storage-connection" value="default">
+              <p class="form-text text-muted mt-1">Named connection from config/connections.json</p>
+            </div>
+            <div id="storage-migration-warning" class="alert alert-warning mt-3" style="display:none;">
+              Changing the storage adapter does not migrate existing entries. Export your data before switching.
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
 </div>

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

@@ -7,6 +7,9 @@
         <a id="edit-schema-btn" href="#/collections" class="btn btn-ghost btn-sm">
             <span data-icon="edit-3"></span> Edit Schema
         </a>
+        <a id="form-btn" href="#/forms" class="btn btn-ghost btn-sm">
+            <span data-icon="layout"></span> Form
+        </a>
         <button id="import-btn" class="btn btn-ghost btn-sm">
             <span data-icon="upload"></span> Import
         </button>

package/admin/js/templates/collections.html

@@ -1,12 +1,59 @@
 <div class="view-header">
     <h1><span data-icon="database"></span> Collections</h1>
+  <div id="collections-header-actions">
     <button id="create-collection-btn" class="btn btn-primary">
-        <span data-icon="plus"></span> New Collection
+      <span data-icon="plus"></span> New Collection
     </button>
+  </div>
 </div>
 
-<div class="card">
-    <div class="card-body">
-        <div id="collections-table"></div>
+<div class="tabs" id="collections-tabs">
+  <div class="tab-list">
+    <button class="tab-item active">Collections</button>
+    <button class="tab-item">Options</button>
+  </div>
+  <div class="tab-content">
+
+    <!-- Collections tab -->
+    <div class="tab-panel active">
+      <div class="card">
+        <div class="card-body">
+          <div id="collections-table"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Options tab -->
+    <div class="tab-panel">
+      <div class="card">
+        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+          <h2>Database Connections</h2>
+          <div style="display:flex;align-items:center;gap:.75rem;">
+            <label style="display:flex;align-items:center;gap:.4rem;font-size:.875rem;cursor:pointer;">
+              <input type="checkbox" id="connections-raw-toggle"> Raw JSON
+            </label>
+            <button id="add-connection-btn" class="btn btn-ghost btn-sm" type="button">
+              <span data-icon="plus"></span> Add Connection
+            </button>
+            <button id="save-connections-btn" class="btn btn-primary btn-sm" type="button">
+              <span data-icon="save"></span> Save
+            </button>
+          </div>
+        </div>
+        <div class="card-body">
+          <div id="connections-form-view">
+            <div id="connections-list"></div>
+            <p id="connections-empty" class="text-muted" style="text-align:center;padding:2rem 0;">
+              No connections configured. Add a connection to enable MongoDB storage.
+            </p>
+          </div>
+          <div id="connections-raw-view" style="display:none;">
+                        <textarea id="connections-raw-json" class="form-input" rows="12"
+                                  style="font-family:monospace;font-size:.8rem;resize:vertical;width:100%;"></textarea>
+          </div>
+        </div>
+      </div>
     </div>
+
+  </div>
 </div>

package/admin/js/templates/documentation.html

@@ -249,6 +249,102 @@ Content goes here.
       </div>
     </div>
 
+    <!-- Shortcodes -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="code"></span> Shortcodes</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Shortcodes extend Markdown with layout components. They are processed server-side before Markdown rendering, so you can freely mix shortcodes and Markdown in the same page body.</p>
+        <p><strong>Syntax:</strong> <code>[shortcode attribute="value"]</code> (self-closing: <code>[shortcode /]</code>) and <code>[/shortcode]</code> for paired tags.</p>
+
+        <h3>Layout</h3>
+        <table class="table table-sm">
+          <thead><tr><th>Shortcode</th><th>Description</th></tr></thead>
+          <tbody>
+            <tr><td><code>[grid cols="N" gap="N"]...[/grid]</code></td><td>CSS Grid container — N columns (1–12), optional gap (1–6)</td></tr>
+            <tr><td><code>[row gap="N"]...[/row]</code></td><td>Flexbox row — columns share width equally</td></tr>
+            <tr><td><code>[col span="N"]...[/col]</code></td><td>Column inside a grid or row; <code>span</code> sets column span</td></tr>
+          </tbody>
+        </table>
+
+        <h3>Components</h3>
+        <table class="table table-sm">
+          <thead><tr><th>Shortcode</th><th>Description</th></tr></thead>
+          <tbody>
+            <tr><td><code>[card title="..."]...[/card]</code></td><td>Styled card; <code>collapsible="true"</code> makes the body toggleable</td></tr>
+            <tr><td><code>[tabs]...[/tabs]</code></td><td>Tab group; use <code>[tab title="..."]...[/tab]</code> inside</td></tr>
+            <tr><td><code>[accordion]...[/accordion]</code></td><td>Accordion group; use <code>[item title="..."]...[/item]</code> inside</td></tr>
+            <tr><td><code>[carousel]...[/carousel]</code></td><td>Carousel; use <code>[slide]...[/slide]</code> inside</td></tr>
+            <tr><td><code>[badge variant="success"]...[/badge]</code></td><td>Inline badge; variants: primary, secondary, success, danger, warning, info</td></tr>
+            <tr><td><code>[icon name="star" /]</code></td><td>Inline Domma icon; optional <code>size</code> and <code>color</code></td></tr>
+            <tr><td><code>[spacer size="16" /]</code></td><td>Vertical whitespace block (px height)</td></tr>
+            <tr><td><code>[timeline]...[/timeline]</code></td><td>Progression timeline; use <code>[event title="..." date="..." status="..."]...[/event]</code> inside</td></tr>
+            <tr><td><code>[countdown to="2026-12-31" /]</code></td><td>Animated countdown to a date</td></tr>
+          </tbody>
+        </table>
+
+        <h3>Content</h3>
+        <table class="table table-sm">
+          <thead><tr><th>Shortcode</th><th>Description</th></tr></thead>
+          <tbody>
+            <tr><td><code>[hero variant="dark" size="sm"]...[/hero]</code></td><td>Full-width hero section; supports <code>twinkle</code>, <code>blobs</code>, <code>image</code>, <code>overlay</code></td></tr>
+            <tr><td><code>[table striped="true"]...[/table]</code></td><td>Wraps a GFM Markdown table with Domma table CSS classes</td></tr>
+            <tr><td><code>[form name="slug" /]</code></td><td>Embeds a Form Builder form by slug</td></tr>
+            <tr><td><code>[collection slug="..." display="table" /]</code></td><td>Renders collection entries inline (table, cards, or list)</td></tr>
+          </tbody>
+        </table>
+
+        <h3>Form follow-up</h3>
+        <p>Two optional settings control what happens after a submission is stored:</p>
+        <table class="table" style="font-size:.9rem;">
+          <thead>
+            <tr><th>Field</th><th>Where</th><th>Description</th></tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>successMessage</code></td>
+              <td>Settings tab</td>
+              <td>Text shown inline after submission (replaces the form). Default: "Thank you for your submission."</td>
+            </tr>
+            <tr>
+              <td><code>successRedirect</code></td>
+              <td>Settings tab</td>
+              <td>URL to redirect the visitor on success. Takes priority over <code>successMessage</code> if set.</td>
+            </tr>
+            <tr>
+              <td><code>actionSlug</code></td>
+              <td>Actions tab → CMS Action</td>
+              <td>Slug of a CMS Action to execute after the entry is stored. Requires Pro (MongoDB). Non-fatal on failure.</td>
+            </tr>
+          </tbody>
+        </table>
+        <p>For the full walkthrough, see the
+          <a href="#/tutorials">Tutorials → Form Follow-Up: Notifications &amp; Actions</a> tutorial.</p>
+
+        <h3>Interactive</h3>
+        <table class="table table-sm">
+          <thead><tr><th>Shortcode</th><th>Description</th></tr></thead>
+          <tbody>
+            <tr><td><code>[slideover title="..." trigger="..."]...[/slideover]</code></td><td>Slide-in panel opened by a trigger button</td></tr>
+            <tr><td><code>[dconfig]{...}[/dconfig]</code></td><td>Declarative click handlers and class toggles — no JavaScript needed</td></tr>
+          </tbody>
+        </table>
+
+        <h3>Pro shortcodes</h3>
+        <table class="table table-sm">
+          <thead><tr><th>Shortcode</th><th>Description</th></tr></thead>
+          <tbody>
+            <tr><td><code>[view slug="..." display="table" /]</code></td><td>Executes a saved View and renders results. Requires MongoDB.</td></tr>
+            <tr><td><code>[cta action="..." entry="..."]Label[/cta]</code></td><td>Action-trigger button. Requires the visitor to be logged in.</td></tr>
+          </tbody>
+        </table>
+
+        <p>Full attribute reference and live demos: <a href="/resources/shortcodes" target="_blank">Shortcode Reference</a> · <a href="/resources/components" target="_blank">Components</a> · <a href="/resources/effects" target="_blank">Effects</a></p>
+      </div>
+    </div>
+
     <!-- Settings -->
     <div class="card card-collapsible mb-4">
       <div class="card-header" role="button" tabindex="0">
@@ -366,6 +462,168 @@ Content goes here.
         <h3>Authentication</h3>
         <p>The admin panel uses JWT Bearer tokens. Tokens are stored in the browser and automatically refreshed.
           Sessions expire according to <code>config/auth.json</code> — default is 24 hours.</p>
+
+        <h3>Views &amp; Actions</h3>
+        <p>Views and Actions are pro-only features that require a MongoDB connection.
+          Both roles — Admin and Manager — can create, edit, and run Views and Actions.</p>
+        <table class="table table-sm">
+          <thead><tr><th>Role</th><th>Views</th><th>Actions</th></tr></thead>
+          <tbody>
+            <tr><td><strong>Admin</strong></td><td>Full access</td><td>Full access</td></tr>
+            <tr><td><strong>Manager</strong></td><td>Full access</td><td>Full access</td></tr>
+            <tr><td><strong>Editor</strong></td><td>No access</td><td>No access</td></tr>
+            <tr><td><strong>Subscriber</strong></td><td>No access</td><td>No access</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Views -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="eye"></span> Views <span class="badge badge-warning" style="font-size:.7rem;">Pro</span></h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Views are admin-designed display configurations that query one or more Collections via a stored
+          MongoDB aggregation pipeline, then render the results in the admin panel.
+          Views require a MongoDB connection configured under <strong>Collections → Options</strong>.</p>
+
+        <h3>Creating a View</h3>
+        <ol>
+          <li>Navigate to <strong>Data → Views</strong> and click <strong>New View</strong>.</li>
+          <li><strong>Source tab</strong> — enter a title, choose the primary source collection, and select the MongoDB connection.</li>
+          <li><strong>Pipeline tab</strong> — add aggregation stages in order. Each stage has a type and a JSON config object.</li>
+          <li><strong>Display tab</strong> — choose table or list mode, set page size, and optionally define column definitions.</li>
+          <li><strong>Access tab</strong> — select which roles can access this view and whether it is publicly accessible.</li>
+          <li>Click <strong>Save View</strong>, then use <strong>Preview</strong> to execute and inspect the results.</li>
+        </ol>
+
+        <h3>Allowed Pipeline Stage Types</h3>
+        <table class="table table-sm">
+          <thead><tr><th>Stage</th><th>Purpose</th></tr></thead>
+          <tbody>
+            <tr><td><code>$match</code></td><td>Filter documents by condition</td></tr>
+            <tr><td><code>$lookup</code></td><td>Left join from another collection</td></tr>
+            <tr><td><code>$sort</code></td><td>Sort documents</td></tr>
+            <tr><td><code>$project</code></td><td>Include or exclude fields</td></tr>
+            <tr><td><code>$unwind</code></td><td>Deconstruct an array field</td></tr>
+            <tr><td><code>$addFields</code></td><td>Compute and add new fields</td></tr>
+            <tr><td><code>$group</code></td><td>Group and aggregate</td></tr>
+            <tr><td><code>$count</code></td><td>Count documents</td></tr>
+            <tr><td><code>$skip</code></td><td>Skip documents (added automatically for pagination)</td></tr>
+            <tr><td><code>$limit</code></td><td>Limit documents (added automatically for pagination)</td></tr>
+          </tbody>
+        </table>
+        <p>Forbidden stages (<code>$out</code>, <code>$merge</code>, <code>$function</code>, <code>$accumulator</code>,
+          <code>$graphLookup</code>) are rejected at save and execution time.</p>
+
+        <h3>Collection Name Mapping</h3>
+        <p>The <strong>source</strong> field in the pipeline config is a collection <em>slug</em>
+          (e.g. <code>users</code>). At execution time this is automatically prefixed to
+          <code>cms_users</code> to match the MongoDB collection name used by the adapter.</p>
+        <p>The same applies inside <code>$lookup</code> stages — use the CMS slug as the <code>from</code> value
+          and the service maps it automatically.</p>
+
+        <h3>Column Definitions</h3>
+        <p>On the Display tab, column definitions are a JSON array. Each object has a <code>key</code>
+          (dot-path into the result document) and a <code>label</code>.</p>
+        <pre class="code-block"><code>[
+  { "key": "data.name",  "label": "Name" },
+  { "key": "data.email", "label": "Email" },
+  { "key": "orders",     "label": "Orders" }
+]</code></pre>
+        <p>If no columns are defined, the preview auto-generates columns from the first result document.</p>
+
+        <h3>Public Access</h3>
+        <p>Tick <strong>Public</strong> on the Access tab to expose the view via
+          <code>GET /api/views/:slug/public</code> without requiring a login.
+          Leave it unticked to require JWT authentication with one of the allowed roles.</p>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="zap"></span> Actions <span class="badge badge-warning" style="font-size:.7rem;">Pro</span></h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Actions are admin-designed sequential workflow operations triggered against individual collection
+          entries. When an action is assigned to a collection, a trigger button appears per row in the
+          entry list. Actions require a MongoDB connection (pro mode).</p>
+
+        <h3>Creating an Action</h3>
+        <ol>
+          <li>Navigate to <strong>Data → Actions</strong> and click <strong>New Action</strong>.</li>
+          <li><strong>General tab</strong> — enter a title and select the target collection.</li>
+          <li><strong>Trigger tab</strong> — configure the button label, icon, and optional confirmation message.</li>
+          <li><strong>Steps tab</strong> — add steps in order. Each step runs sequentially; if one fails the action stops.</li>
+          <li><strong>Access tab</strong> — select which roles can trigger this action.</li>
+          <li>Click <strong>Save Action</strong>. The button will appear on the collection's entry list.</li>
+        </ol>
+
+        <h3>Phase 1 Step Types</h3>
+        <table class="table table-sm">
+          <thead><tr><th>Step</th><th>What it does</th><th>Config fields</th></tr></thead>
+          <tbody>
+            <tr>
+              <td><code>updateField</code></td>
+              <td>Set a field on the entry to a new value</td>
+              <td><code>field</code>, <code>value</code></td>
+            </tr>
+            <tr>
+              <td><code>deleteEntry</code></td>
+              <td>Permanently delete the entry</td>
+              <td>None</td>
+            </tr>
+            <tr>
+              <td><code>moveToCollection</code></td>
+              <td>Create the entry in a target collection then delete it from the source</td>
+              <td><code>targetCollection</code></td>
+            </tr>
+            <tr>
+              <td><code>webhook</code></td>
+              <td>HTTP request to an external URL</td>
+              <td><code>url</code>, <code>method</code>, <code>body</code> (JSON)</td>
+            </tr>
+            <tr>
+              <td><code>email</code></td>
+              <td>Send an email via the configured SMTP transport</td>
+              <td><code>to</code>, <code>subject</code>, <code>template</code></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h3>Template Variables</h3>
+        <p>Step config fields support <code>{{variable}}</code> interpolation:</p>
+        <table class="table table-sm">
+          <thead><tr><th>Variable</th><th>Resolves to</th></tr></thead>
+          <tbody>
+            <tr><td><code>{{entry.data.fieldName}}</code></td><td>A field value from the current entry</td></tr>
+            <tr><td><code>{{entry.id}}</code></td><td>The entry's ID</td></tr>
+            <tr><td><code>{{now}}</code></td><td>Current timestamp (ISO 8601)</td></tr>
+            <tr><td><code>{{user.name}}</code></td><td>Name of the user who triggered the action</td></tr>
+            <tr><td><code>{{user.email}}</code></td><td>Email of the triggering user</td></tr>
+            <tr><td><code>{{env.CMS_PUBLIC_*}}</code></td><td>Environment variables prefixed <code>CMS_PUBLIC_</code> only</td></tr>
+          </tbody>
+        </table>
+        <p><strong>Example</strong> — approve an application and notify by email:</p>
+        <pre class="code-block"><code>Step 1: updateField  field=status      value=approved
+Step 2: updateField  field=approvedAt  value={{now}}
+Step 3: email        to={{entry.data.email}}
+                     subject=Your application has been approved
+                     template=Congratulations {{entry.data.name}}, your application is approved.</code></pre>
+
+        <h3>Partial Execution</h3>
+        <p>Actions are <strong>not transactional</strong>. If a step fails, the action stops and returns the
+          number of steps completed so far (<code>stepsCompleted</code>). Steps that already ran are
+          <strong>not rolled back</strong>. Design step order with this in mind — put irreversible steps
+          (delete, email) last.</p>
+
+        <h3>After a deleteEntry step</h3>
+        <p>If an action contains a <code>deleteEntry</code> step, subsequent steps will fail because the entry
+          no longer exists. Place <code>deleteEntry</code> as the last step.</p>
       </div>
     </div>