domma-cms 0.25.15 → 0.25.16

package/admin/js/templates/documentation.html

@@ -4,1531 +4,69 @@
 
 <div class="row">
   <div class="col-12">
+    <div class="docs-body">
+
+      <p class="lead">
+        Task-by-task reference for running a Domma CMS site. Pick a topic below — each opens as its own
+        page, and every topic is also listed under <strong>Documentation → Usage</strong> in the sidebar.
+      </p>
+
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1.5rem;">
+
+        <a href="#/docs/usage/pages" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="file-text"></span> Pages</h3>
+            <p class="text-muted" style="margin-bottom:0;">Markdown pages, YAML frontmatter, and how files map to URLs.</p></div>
+        </a>
+        <a href="#/docs/usage/media" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="image"></span> Media</h3>
+            <p class="text-muted" style="margin-bottom:0;">Uploading files and using the media library.</p></div>
+        </a>
+        <a href="#/docs/usage/navigation" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="menu"></span> Navigation</h3>
+            <p class="text-muted" style="margin-bottom:0;">Menus, locations, and the multi-menu system.</p></div>
+        </a>
+        <a href="#/docs/usage/dconfig" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="settings"></span> DConfig</h3>
+            <p class="text-muted" style="margin-bottom:0;">Declarative, per-page configuration blocks.</p></div>
+        </a>
+        <a href="#/docs/usage/shortcodes" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="code"></span> Shortcodes</h3>
+            <p class="text-muted" style="margin-bottom:0;">The full catalogue of in-page shortcodes.</p></div>
+        </a>
+        <a href="#/docs/usage/site-settings" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="settings"></span> Site Settings</h3>
+            <p class="text-muted" style="margin-bottom:0;">Title, theme, brand, footer and SMTP.</p></div>
+        </a>
+        <a href="#/docs/usage/plugins" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="package"></span> Plugins</h3>
+            <p class="text-muted" style="margin-bottom:0;">Installing, enabling and configuring plugins.</p></div>
+        </a>
+        <a href="#/docs/usage/users-roles" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="users"></span> Users &amp; Roles</h3>
+            <p class="text-muted" style="margin-bottom:0;">Accounts, roles and the permission model.</p></div>
+        </a>
+        <a href="#/docs/usage/views" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="eye"></span> Views</h3>
+            <p class="text-muted" style="margin-bottom:0;">Saved, reusable views over your collections.</p></div>
+        </a>
+        <a href="#/docs/usage/actions" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="zap"></span> Actions</h3>
+            <p class="text-muted" style="margin-bottom:0;">Server-side workflow buttons and transitions.</p></div>
+        </a>
+        <a href="#/docs/usage/cta-shortcode" class="card" style="text-decoration:none;display:block;">
+          <div class="card-body"><h3 style="margin-top:0;"><span data-icon="zap"></span> CTA Shortcode</h3>
+            <p class="text-muted" style="margin-bottom:0;">Triggering collection actions from a page.</p></div>
+        </a>
 
-      <div class="tabs" id="docs-tabs">
-          <div class="tab-list" style="flex-wrap: wrap;">
-              <button class="tab-item active">Pages</button>
-              <button class="tab-item">Media</button>
-              <button class="tab-item">Navigation</button>
-              <button class="tab-item">DConfig</button>
-              <button class="tab-item">Shortcodes</button>
-              <button class="tab-item">Site Settings</button>
-              <button class="tab-item">Plugins</button>
-              <button class="tab-item">Users &amp; Roles</button>
-              <button class="tab-item">Views</button>
-              <button class="tab-item">Actions</button>
-              <button class="tab-item">CTA Shortcode</button>
       </div>
-          <div class="tab-content">
 
-              <!-- Pages -->
-              <div class="tab-panel active docs-body">
-                  <p>Pages are stored as Markdown files in <code>content/pages/</code>. Each file has a YAML frontmatter
-                      block at
-                      the top followed by the page body in Markdown.</p>
-
-                  <h3>URL mapping</h3>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>File path</th>
-                          <th>Public URL</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>content/pages/index.md</code></td>
-                          <td><code>/</code></td>
-                      </tr>
-                      <tr>
-                          <td><code>content/pages/about.md</code></td>
-                          <td><code>/about</code></td>
-                      </tr>
-                      <tr>
-                          <td><code>content/pages/blog/index.md</code></td>
-                          <td><code>/blog</code></td>
-                      </tr>
-                      <tr>
-                          <td><code>content/pages/blog/hello-world.md</code></td>
-                          <td><code>/blog/hello-world</code></td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h3>Frontmatter reference</h3>
-                  <pre class="code-block"><code>---
-title: My Page
-description: A short description for SEO meta tags.
-status: published        # published | draft  (draft pages return 404)
-layout: default          # layout name from config/presets.json
-tags: [one, two]         # optional taxonomy
-updatedAt: 2026-03-01    # auto-set on save
----
-
-# Page heading
-
-Your Markdown content goes here.</code></pre>
-
-                  <h3>Drafts</h3>
-                  <p>Pages with <code>status: draft</code> are never served on the public site — they return a 404.
-                      Toggle status
-                      in the Page Editor to publish.</p>
-
-                  <h3>Layouts</h3>
-                  <p>Layouts are defined in <code>config/presets.json</code> and apply CSS class wrappers around page
-                      content.
-                      Select a layout per-page in the editor, or change the default in Site Settings.</p>
-              </div>
-
-              <!-- Media -->
-              <div class="tab-panel docs-body">
-                  <p>Media files are stored in <code>content/media/</code> and served publicly at <code>/media/{filename}</code>.
-                  </p>
-
-                  <h3>Using media in pages</h3>
-                  <p>Reference uploaded files by their public URL in Markdown:</p>
-                  <pre class="code-block"><code>![Alt text](/media/my-image.jpg)
-
-&lt;img src="/media/my-image.jpg" alt="Alt text"&gt;</code></pre>
-
-                  <h3>Upload limits</h3>
-                  <p>The maximum file size is configured in <code>config/server.json</code> under <code>uploads.maxFileSize</code>
-                      (bytes). Default is 10 MB.</p>
-              </div>
-
-              <!-- Navigation -->
-              <div class="tab-panel docs-body">
-                  <p>The navigation tree is stored in <code>config/navigation.json</code> and injected into every public
-                      page as
-                      <code>window.__CMS_NAV__</code>.</p>
-
-                  <h3>Dropdowns</h3>
-                  <p>Nest items under a parent using the drag-and-drop tree in the Navigation editor. Child items are
-                      stored under
-                      the <code>items</code> key — the public navbar renders them as a dropdown.</p>
-
-                  <h3>External links</h3>
-                  <p>Set the URL to a full <code>https://</code> address to link outside the site. Leave blank for
-                      section
-                      headings.</p>
-
-                  <h3>Icons</h3>
-                  <p>Set the <code>icon</code> field to any registered icon name. Icons appear in the navbar link
-                      alongside the
-                      label.</p>
-              </div>
-
-              <!-- DConfig -->
-              <div class="tab-panel docs-body">
-                  <p>DConfig lets you wire up declarative behaviour on any public page — no JavaScript required. Define
-                      event
-                      handlers and class toggles in JSON; the page runtime applies them automatically on load.</p>
-
-                  <p>DConfig can be set in two ways, and both are merged at runtime (inline shortcode wins on selector
-                      conflict):</p>
-                  <ul>
-                      <li><strong>Page editor</strong> — the <em>DConfig</em> collapsible section accepts a JSON blob
-                          stored in page
-                          frontmatter and injected as <code>window.__CMS_DCONFIG__</code>.
-                      </li>
-                      <li><strong>Inline shortcode</strong> — place one or more <code>[dconfig]…[/dconfig]</code> blocks
-                          directly in
-                          the page body Markdown.
-                      </li>
-                  </ul>
-
-                  <h3>Schema</h3>
-                  <pre class="code-block"><code>{
-  "#selector": {
-    "events": {
-      "eventName": {
-        "target": "#target-selector",
-        "action": "value"
-      }
-    }
-  }
-}</code></pre>
-
-                  <p>Multiple selectors and multiple event types can appear in a single config block.</p>
-
-                  <h3>Supported events</h3>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Event</th>
-                          <th>Description</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>click</code></td>
-                          <td>Fires when the selector element is clicked.</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h3>Supported actions</h3>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Action key</th>
-                          <th>Value type</th>
-                          <th>Description</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>toggleClass</code></td>
-                          <td><code>string</code></td>
-                          <td>Adds the class if absent, removes it if present, on the <code>target</code> element.
-                              Typical use:
-                              show/hide content with a <code>hidden</code> class.
-                          </td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <p><em>Additional actions (addClass, removeClass, setAttribute, scroll-to) are planned for future
-                      releases.</em></p>
-
-                  <h3>Targeting shortcode elements with <code>id</code></h3>
-                  <p>All shortcodes support an <code>id</code> attribute, which is written directly onto the generated
-                      element.
-                      Use this instead of raw HTML when you want DConfig to target a card, column, or grid:</p>
-                  <pre class="code-block"><code>[card id="my-panel" title="Hidden Details"]
-Content goes here.
-[/card]
-
-[dconfig]
-{
-  "#my-btn": {
-    "events": {
-      "click": { "target": "#my-panel", "toggleClass": "hidden" }
-    }
-  }
-}
-[/dconfig]</code></pre>
-                  <p>Supported on: <code>[card]</code>, <code>[col]</code>, <code>[row]</code>, <code>[grid]</code>.</p>
-
-                  <h3>Using the <code>[dconfig]</code> shortcode</h3>
-                  <pre class="code-block"><code>[dconfig]
-{
-  "#my-btn": {
-    "events": {
-      "click": { "target": "#my-panel", "toggleClass": "hidden" }
-    }
-  }
-}
-[/dconfig]
-
-&lt;button id="my-btn" class="btn btn-primary"&gt;Toggle&lt;/button&gt;
-
-&lt;div id="my-panel" class="card hidden"&gt;
-  &lt;div class="card-body"&gt;Hidden content.&lt;/div&gt;
-&lt;/div&gt;</code></pre>
-
-                  <h3>Multiple selectors</h3>
-                  <p>Any number of selectors can appear in one block. Selectors are matched with
-                      <code>document.querySelector</code> — use IDs, classes, or attribute selectors.</p>
-                  <pre class="code-block"><code>[dconfig]
-{
-  "#show-btn": {
-    "events": {
-      "click": { "target": "#panel", "toggleClass": "hidden" }
-    }
-  },
-  "#hide-btn": {
-    "events": {
-      "click": { "target": "#panel", "toggleClass": "hidden" }
-    }
-  }
-}
-[/dconfig]</code></pre>
-
-                  <h3>Using the page editor DConfig section</h3>
-                  <p>The same JSON (without the shortcode tags) can be pasted directly into the <em>DConfig</em> card in
-                      the page
-                      editor. This is useful when the config should apply to the whole page without appearing in the
-                      body content.
-                      Inline <code>[dconfig]</code> shortcodes are applied last and will win on any shared selector key.
-                  </p>
-
-                  <p>See live demos on the <a href="/resources/interactive" target="_blank">Interactive Resources
-                      page</a>.</p>
-              </div>
-
-              <!-- Shortcodes -->
-              <div class="tab-panel 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. Supports 6 variants, ~44 gradients and 33 layouts — see the
-                              <strong>Cards</strong> subsection below.
-                          </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>Cards &mdash; variants, gradients &amp; layouts</h3>
-                  <p>The <code>[card]</code> shortcode is the most configurable component in the system. It has three
-                      layers you can mix freely: <strong>variant</strong> (the overall visual style), <strong>gradient</strong>
-                      (colour palette, used with <code>variant="gradient"</code> or any layout that accepts a gradient),
-                      and <strong>layout</strong> (the internal structure — header/body/footer, image position, sub-tags,
-                      etc.). Every layout accepts every variant, gradient and universal attribute listed below.</p>
-                  <pre><code>[card variant="gradient" gradient="ocean" layout="icon-top" icon="star" title="Fast"]
-Body content in **Markdown** is supported.
-[/card]</code></pre>
-
-                  <h4>Variants</h4>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Variant</th>
-                          <th>Description</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>clean</code></td>
-                          <td>Flat, minimal chrome &mdash; no border, subtle background</td>
-                      </tr>
-                      <tr>
-                          <td><code>gradient</code></td>
-                          <td>Coloured gradient background (see Gradients below). Pair with <code>gradient="name"</code>
-                          </td>
-                      </tr>
-                      <tr>
-                          <td><code>glass</code></td>
-                          <td>Frosted glass / backdrop-blur effect, translucent background</td>
-                      </tr>
-                      <tr>
-                          <td><code>accent</code></td>
-                          <td>Primary-colour accent border on the left edge</td>
-                      </tr>
-                      <tr>
-                          <td><code>dark</code></td>
-                          <td>Dark background with inverted text &mdash; good on light pages</td>
-                      </tr>
-                      <tr>
-                          <td><code>glow</code></td>
-                          <td>Subtle halo / outer glow effect</td>
-                      </tr>
-                      <tr>
-                          <td><code>primary</code></td>
-                          <td>Legacy alias &mdash; adds <code>card-primary</code> class for backwards compatibility</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h4>Built-in gradients</h4>
-                  <p>Shipped in <code>public/css/</code> &mdash; available on every install. Default when
-                      <code>gradient</code> is omitted: <code>indigo</code>.</p>
-                  <p><code>arctic</code>, <code>aurora</code>, <code>dusk</code>, <code>fire</code>, <code>forest</code>,
-                      <code>gold</code>, <code>indigo</code>, <code>lagoon</code>, <code>lime</code>,
-                      <code>midnight</code>, <code>ocean</code>, <code>rose</code>, <code>slate</code>,
-                      <code>sunset</code></p>
-
-                  <h4>Project-specific gradients</h4>
-                  <p>Defined in <code>content/custom.css</code> on this site only &mdash; fresh installs will not have
-                      these unless the CSS is copied over.</p>
-                  <p><strong>Single-tone:</strong> <code>purple</code>, <code>blue</code>, <code>green</code>,
-                      <code>night</code></p>
-                  <p><strong>Theme &middot; light pairs:</strong> <code>ocean-light</code>, <code>forest-light</code>,
-                      <code>sunset-light</code>, <code>royal-light</code>, <code>lemon-light</code>,
-                      <code>silver-light</code>, <code>charcoal-light</code>, <code>christmas-light</code>,
-                      <code>unicorn-light</code>, <code>dreamy-light</code>, <code>grayve-light</code>,
-                      <code>mint-light</code>, <code>wedding-light</code></p>
-                  <p><strong>Theme &middot; dark pairs:</strong> <code>ocean-dark</code>, <code>forest-dark</code>,
-                      <code>sunset-dark</code>, <code>royal-dark</code>, <code>lemon-dark</code>,
-                      <code>silver-dark</code>, <code>charcoal-dark</code>, <code>christmas-dark</code>,
-                      <code>unicorn-dark</code>, <code>dreamy-dark</code>, <code>grayve-dark</code>,
-                      <code>mint-dark</code>, <code>wedding-dark</code></p>
-                  <p class="text-muted"><small>Gradient names are not validated &mdash; a typo falls through to the
-                      default background with no warning. Use <code>/test-card-gradients</code> to preview every
-                      palette.</small></p>
-
-                  <h4>Universal attributes</h4>
-                  <p>These work on any layout and any variant.</p>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Attribute</th>
-                          <th>Values</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>title</code></td>
-                          <td>string</td>
-                          <td>Card heading (most layouts)</td>
-                      </tr>
-                      <tr>
-                          <td><code>subtitle</code></td>
-                          <td>string</td>
-                          <td>Secondary heading (many layouts re-use it as date / role / plan)</td>
-                      </tr>
-                      <tr>
-                          <td><code>icon</code></td>
-                          <td>icon name</td>
-                          <td>Domma icon (see Icons view)</td>
-                      </tr>
-                      <tr>
-                          <td><code>footer</code></td>
-                          <td>string</td>
-                          <td>Footer text (also used by <code>pricing</code> as the CTA label)</td>
-                      </tr>
-                      <tr>
-                          <td><code>image</code></td>
-                          <td>URL</td>
-                          <td>Background image for image / media layouts</td>
-                      </tr>
-                      <tr>
-                          <td><code>collapsible</code></td>
-                          <td><code>true</code></td>
-                          <td>Body toggles open/closed via click on the header</td>
-                      </tr>
-                      <tr>
-                          <td><code>hover</code></td>
-                          <td>boolean flag</td>
-                          <td>Raises the card on mouse-over</td>
-                      </tr>
-                      <tr>
-                          <td><code>borderless</code></td>
-                          <td>boolean flag</td>
-                          <td>Removes the card border</td>
-                      </tr>
-                      <tr>
-                          <td><code>shadow</code></td>
-                          <td><code>none</code> &middot; <code>md</code> &middot; <code>lg</code></td>
-                          <td>Drop-shadow depth</td>
-                      </tr>
-                      <tr>
-                          <td><code>rounded</code></td>
-                          <td><code>none</code> &middot; <code>sm</code> &middot; <code>lg</code> &middot;
-                              <code>full</code></td>
-                          <td>Corner radius</td>
-                      </tr>
-                      <tr>
-                          <td><code>padding</code></td>
-                          <td><code>compact</code> &middot; <code>spacious</code></td>
-                          <td>Internal spacing</td>
-                      </tr>
-                      <tr>
-                          <td><code>text-align</code></td>
-                          <td><code>center</code> &middot; <code>right</code></td>
-                          <td>Body text alignment (default left)</td>
-                      </tr>
-                      <tr>
-                          <td><code>font</code></td>
-                          <td><code>serif</code> &middot; <code>mono</code></td>
-                          <td>Override card typeface</td>
-                      </tr>
-                      <tr>
-                          <td><code>font-size</code></td>
-                          <td><code>sm</code> &middot; <code>lg</code> &middot; <code>xl</code></td>
-                          <td>Override card body text size</td>
-                      </tr>
-                      <tr>
-                          <td><code>class</code></td>
-                          <td>string</td>
-                          <td>Extra CSS classes appended to the root element</td>
-                      </tr>
-                      <tr>
-                          <td><code>id</code></td>
-                          <td>string</td>
-                          <td>DOM id (useful for anchor links / dconfig targets)</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h4>Layouts</h4>
-                  <p>Select a layout with <code>layout="name"</code>. If omitted, the card uses a simple body-only
-                      layout. Layouts marked <em>(needs sub-tags)</em> will render empty without their child tags.</p>
-
-                  <h5>Structural</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>basic</code></td>
-                          <td><code>footer</code></td>
-                          <td>Body-only card, optional footer</td>
-                      </tr>
-                      <tr>
-                          <td><code>header-body</code></td>
-                          <td><code>title</code></td>
-                          <td>Header with title + body</td>
-                      </tr>
-                      <tr>
-                          <td><code>header-body-footer</code></td>
-                          <td><code>title</code>, <code>footer</code></td>
-                          <td>Classic three-zone card</td>
-                      </tr>
-                      <tr>
-                          <td><code>no-header-footer</code></td>
-                          <td><code>footer</code></td>
-                          <td>Body + footer only</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h5>Icon headers</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>icon-top</code></td>
-                          <td><code>icon</code>, <code>title</code>, <code>subtitle</code></td>
-                          <td>Large centred icon above title &mdash; good for feature grids</td>
-                      </tr>
-                      <tr>
-                          <td><code>icon-inline</code></td>
-                          <td><code>icon</code>, <code>title</code>, <code>subtitle</code></td>
-                          <td>Icon sits to the left of the title in the header row</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h5>Image</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>image-top</code></td>
-                          <td><code>image</code>, <code>title</code></td>
-                          <td>Image banner above header + body</td>
-                      </tr>
-                      <tr>
-                          <td><code>image-overlay</code></td>
-                          <td><code>image</code>, <code>title</code></td>
-                          <td>Title overlaid on the image with a tint</td>
-                      </tr>
-                      <tr>
-                          <td><code>thumb-left</code></td>
-                          <td><code>image</code>, <code>title</code></td>
-                          <td>Square thumbnail on the left, body on the right</td>
-                      </tr>
-                      <tr>
-                          <td><code>thumb-right</code></td>
-                          <td><code>image</code>, <code>title</code></td>
-                          <td>Mirror of <code>thumb-left</code></td>
-                      </tr>
-                      <tr>
-                          <td><code>wide-left-image</code></td>
-                          <td><code>image</code>, <code>title</code>, <code>footer</code></td>
-                          <td>Horizontal card, wider image strip on the left</td>
-                      </tr>
-                      <tr>
-                          <td><code>full-bg</code></td>
-                          <td><code>image</code>, <code>title</code></td>
-                          <td>Full-bleed image backdrop with body text over it</td>
-                      </tr>
-                      <tr>
-                          <td><code>split-half</code></td>
-                          <td><code>image</code>, <code>gradient</code>, <code>title</code></td>
-                          <td>Half gradient (or image) on the left, content on the right</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h5>Media</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>video-media</code></td>
-                          <td><code>image</code> (poster), <code>duration</code>, <code>title</code></td>
-                          <td>Video thumbnail with a play button and duration badge</td>
-                      </tr>
-                      <tr>
-                          <td><code>location-map</code></td>
-                          <td><code>address</code>, <code>title</code></td>
-                          <td>Placeholder map panel + address block (static &mdash; no live map)</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h5>People &amp; social proof</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>avatar-profile</code></td>
-                          <td><code>icon</code>, <code>title</code>, <code>subtitle</code>,
-                              <code>tags</code> (comma-separated)
-                          </td>
-                          <td>Circular avatar + name + role + pill tags &mdash; team / author cards</td>
-                      </tr>
-                      <tr>
-                          <td><code>quote-testimonial</code></td>
-                          <td><code>title</code> (author), <code>subtitle</code> (role)</td>
-                          <td>Quotation mark + body quote + author attribution row</td>
-                      </tr>
-                      <tr>
-                          <td><code>rating-review</code></td>
-                          <td><code>rating</code> (0&ndash;5), <code>title</code>, <code>subtitle</code>,
-                              <code>verified</code> (flag)
-                          </td>
-                          <td>Star rating + review body + reviewer attribution</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h5>Metrics &amp; data</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>stat-metric</code></td>
-                          <td><code>title</code> (label), <code>value</code>, <code>delta</code>,
-                              <code>progress</code> (0&ndash;100)
-                          </td>
-                          <td>Big-number KPI tile with delta arrow and optional progress bar</td>
-                      </tr>
-                      <tr>
-                          <td><code>progress-goal</code> <em>(needs sub-tags)</em></td>
-                          <td><code>title</code>, <code>subtitle</code>, <code>progress</code>; child
-                              <code>[milestone done]...[/milestone]</code>
-                          </td>
-                          <td>Progress bar + milestone checklist</td>
-                      </tr>
-                      <tr>
-                          <td><code>activity-feed</code> <em>(needs sub-tags)</em></td>
-                          <td><code>title</code>; child
-                              <code>[activity user="..." action="..." time="..." /]</code>
-                          </td>
-                          <td>User activity list with initials avatars and timestamps</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h5>Markers &amp; callouts</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>callout</code></td>
-                          <td><code>callout-type</code> (<code>info</code>/<code>warn</code>/<code>success</code>/<code>error</code>),
-                              <code>icon</code>, <code>title</code>
-                          </td>
-                          <td>Coloured inline notice / tip box</td>
-                      </tr>
-                      <tr>
-                          <td><code>step-numbered</code></td>
-                          <td><code>step</code> (number), <code>title</code>, <code>gradient</code></td>
-                          <td>Numbered step for tutorials / walkthroughs</td>
-                      </tr>
-                      <tr>
-                          <td><code>corner-badge</code></td>
-                          <td><code>badge</code> (label), <code>icon</code>, <code>title</code></td>
-                          <td>Card with a ribbon-style badge in the top-right corner</td>
-                      </tr>
-                      <tr>
-                          <td><code>badge-band</code></td>
-                          <td><code>badge</code>, <code>icon</code>, <code>gradient</code>, <code>title</code></td>
-                          <td>Full-width coloured band across the top with a label and icon</td>
-                      </tr>
-                      <tr>
-                          <td><code>tag-cloud</code></td>
-                          <td><code>title</code>, <code>tags</code> (comma-separated)</td>
-                          <td>Coloured pill list &mdash; topic tags, skills, categories</td>
-                      </tr>
-                      <tr>
-                          <td><code>timeline-entry</code></td>
-                          <td><code>title</code>, <code>subtitle</code> (date), <code>badge</code> (tag)</td>
-                          <td>Single dot-on-line timeline entry &mdash; stack several for a history list</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h5>Commerce &amp; comparison</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes &amp; sub-tags</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>pricing</code> <em>(needs sub-tags)</em></td>
-                          <td><code>title</code>, <code>price</code>, <code>period</code>, <code>gradient</code>,
-                              <code>footer</code> (CTA label); child <code>[feature]...[/feature]</code>
-                          </td>
-                          <td>Pricing tier card with gradient header, feature list and CTA link</td>
-                      </tr>
-                      <tr>
-                          <td><code>feature-comparison</code> <em>(needs sub-tags)</em></td>
-                          <td><code>title</code>, <code>subtitle</code> (plan), <code>gradient</code>; child
-                              <code>[feature]text[/feature]</code> or <code>[feature excluded]text[/feature]</code>
-                          </td>
-                          <td>Plan comparison rows with tick / cross marks</td>
-                      </tr>
-                      <tr>
-                          <td><code>before-after</code> <em>(needs sub-tags)</em></td>
-                          <td><code>title</code>; children
-                              <code>[before]item &middot; item[/before]</code> and
-                              <code>[after]item &middot; item[/after]</code> (items split on <code>&middot;</code> or
-                              newline)
-                          </td>
-                          <td>Two-column before/after comparison list</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h5>Special &amp; utility</h5>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Layout</th>
-                          <th>Attributes</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>glass-gradient-border</code></td>
-                          <td><code>title</code></td>
-                          <td>Frosted glass card with a gradient border ring. <strong>Note:</strong> this layout
-                              bypasses <code>cardVariantClasses</code>, so universal variant / gradient / shadow
-                              attributes do not apply.
-                          </td>
-                      </tr>
-                      <tr>
-                          <td><code>code-snippet</code></td>
-                          <td><code>lang</code> (label); body is rendered as escaped code</td>
-                          <td>Code block with language label header</td>
-                      </tr>
-                      <tr>
-                          <td><code>file-document</code></td>
-                          <td><code>filename</code>, <code>filesize</code>, <code>filetype</code>, <code>title</code>
-                          </td>
-                          <td>File attachment row with type icon and download link (link href is placeholder)</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h4>Sub-tag reference</h4>
-                  <p>These are child tags accepted by specific layouts &mdash; they are not shortcodes in their own right
-                      and only render inside a matching parent card.</p>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Sub-tag</th>
-                          <th>Parent layout</th>
-                          <th>Attributes</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>[feature]text[/feature]</code></td>
-                          <td><code>pricing</code>, <code>feature-comparison</code></td>
-                          <td><code>excluded</code> (flag, comparison only) &mdash; renders as a cross instead of a tick
-                          </td>
-                      </tr>
-                      <tr>
-                          <td><code>[before]a &middot; b &middot; c[/before]</code></td>
-                          <td><code>before-after</code></td>
-                          <td>Items split on <code>&middot;</code> or newline</td>
-                      </tr>
-                      <tr>
-                          <td><code>[after]a &middot; b &middot; c[/after]</code></td>
-                          <td><code>before-after</code></td>
-                          <td>Items split on <code>&middot;</code> or newline</td>
-                      </tr>
-                      <tr>
-                          <td><code>[activity user="..." action="..." time="..." /]</code></td>
-                          <td><code>activity-feed</code></td>
-                          <td>Self-closing; one row per tag</td>
-                      </tr>
-                      <tr>
-                          <td><code>[milestone done]text[/milestone]</code></td>
-                          <td><code>progress-goal</code></td>
-                          <td><code>done</code> (flag) &mdash; filled dot if present, hollow otherwise</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, list, accordion, or block)</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h4>Collection attributes</h4>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Attribute</th>
-                          <th>Values</th>
-                          <th>Purpose</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>slug</code></td>
-                          <td>collection slug</td>
-                          <td>Required. Which collection to render.</td>
-                      </tr>
-                      <tr>
-                          <td><code>display</code></td>
-                          <td><code>table</code> &middot; <code>cards</code> &middot; <code>list</code> &middot;
-                              <code>accordion</code> &middot; <code>block</code></td>
-                          <td>How to render each entry. Default <code>table</code>.</td>
-                      </tr>
-                      <tr>
-                          <td><code>block</code></td>
-                          <td>block template name</td>
-                          <td>Required when <code>display="block"</code>. Names a template in
-                              <code>content/blocks/&lt;name&gt;.html</code> whose
-                              <code>{{field}}</code> placeholders get substituted per entry.
-                          </td>
-                      </tr>
-                      <tr>
-                          <td><code>cols</code></td>
-                          <td><code>2</code> &middot; <code>3</code> &middot; <code>4</code> &middot; <code>5</code>
-                              &middot; <code>6</code></td>
-                          <td>Grid column count when <code>display="block"</code>.</td>
-                      </tr>
-                      <tr>
-                          <td><code>where</code></td>
-                          <td><code>field=value</code> or<br><code>f1=v1,f2=v2</code></td>
-                          <td>Row filter (simple equality only, AND'd across comma-separated predicates). Example:
-                              <code>where="tab=developers"</code> or
-                              <code>where="tier=free,featured=true"</code>. No OR, no comparison operators &mdash;
-                              use a saved View for anything more complex.
-                          </td>
-                      </tr>
-                      <tr>
-                          <td><code>sort</code></td>
-                          <td>field name or <code>createdAt</code></td>
-                          <td>Sort field. Default <code>createdAt</code>.</td>
-                      </tr>
-                      <tr>
-                          <td><code>order</code></td>
-                          <td><code>asc</code> &middot; <code>desc</code></td>
-                          <td>Sort direction. Default <code>desc</code>.</td>
-                      </tr>
-                      <tr>
-                          <td><code>limit</code></td>
-                          <td>integer</td>
-                          <td>Maximum number of entries to render. 0 or omitted = all.</td>
-                      </tr>
-                      <tr>
-                          <td><code>fields</code></td>
-                          <td>comma-separated field names</td>
-                          <td>Column filter &mdash; only these fields are shown (table/cards/list displays only).
-                          </td>
-                      </tr>
-                      <tr>
-                          <td><code>title-field</code></td>
-                          <td>field name</td>
-                          <td>Which field to use as the entry title (cards/accordion displays).</td>
-                      </tr>
-                      <tr>
-                          <td><code>empty</code></td>
-                          <td>string</td>
-                          <td>Message shown when the filter matches no entries.</td>
-                      </tr>
-                      <tr>
-                          <td><code>cta</code></td>
-                          <td>action slug</td>
-                          <td>Attach a CMS Action button to each rendered entry. See CTA attributes below.</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>
-
-              <!-- Site Settings -->
-              <div class="tab-panel docs-body">
-                  <p>Site Settings are stored in <code>config/site.json</code> and editable from the Settings page in
-                      the admin
-                      panel.</p>
-
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Field</th>
-                          <th>Description</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>siteName</code></td>
-                          <td>Site title used in the public navbar and browser tab.</td>
-                      </tr>
-                      <tr>
-                          <td><code>tagline</code></td>
-                          <td>Subtitle shown in the public site footer.</td>
-                      </tr>
-                      <tr>
-                          <td><code>adminTheme</code></td>
-                          <td>Admin panel colour theme (e.g. <code>charcoal-dark</code>, <code>ocean-light</code>).</td>
-                      </tr>
-                      <tr>
-                          <td><code>publicTheme</code></td>
-                          <td>Public site theme applied to <code>&lt;html data-theme&gt;</code>.</td>
-                      </tr>
-                      <tr>
-                          <td><code>defaultLayout</code></td>
-                          <td>Fallback layout for pages that don't specify one.</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h3>Server configuration</h3>
-                  <p>Low-level settings (port, CORS, upload size) live in <code>config/server.json</code> and require a
-                      server
-                      restart to take effect. These are not editable from the admin panel.</p>
-              </div>
-
-              <!-- Plugins -->
-              <div class="tab-panel docs-body">
-                  <p>Plugins extend the CMS with new server routes, admin views, and public-site injection snippets.
-                      Each plugin
-                      is a directory under <code>plugins/</code>.</p>
-
-                  <h3>Enabling and disabling</h3>
-                  <p>Use the Plugins page in the admin to toggle plugins on or off. State is saved to
-                      <code>config/plugins.json</code>. <strong>A server restart is required for changes to take
-                          effect.</strong>
-                  </p>
-
-                  <h3>Plugin settings</h3>
-                  <p>Plugins that expose a settings page will appear as a link in the sidebar under the Plugins section.
-                      Settings
-                      are merged with the plugin's defaults from <code>config.js</code> and saved to
-                      <code>config/plugins.json</code>.</p>
-
-                  <h3>Security</h3>
-                  <p>Only files inside a plugin's <code>admin/</code> and <code>public/</code> subdirectories are served
-                      statically. Server files (<code>plugin.js</code>, <code>config.js</code>, <code>data/</code>) are
-                      blocked and
-                      return 404.</p>
-
-                  <p>See the <a href="#/tutorials">Tutorials</a> section for a guide to writing your own plugin.</p>
-              </div>
-
-              <!-- Users & Roles -->
-              <div class="tab-panel docs-body">
-                  <p>Users are stored as individual JSON files in <code>content/users/</code>. Passwords are hashed with
-                      bcrypt
-                      and never returned by the API.</p>
-
-                  <h3>Roles</h3>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Role</th>
-                          <th>Access</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><strong>Admin</strong></td>
-                          <td>Full access — users, plugins, settings, all content.</td>
-                      </tr>
-                      <tr>
-                          <td><strong>Manager</strong></td>
-                          <td>Content + structure (navigation, layouts). No users or plugins.</td>
-                      </tr>
-                      <tr>
-                          <td><strong>Editor</strong></td>
-                          <td>Pages and media only.</td>
-                      </tr>
-                      <tr>
-                          <td><strong>Subscriber</strong></td>
-                          <td>Read-only access to the API.</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <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>
-
-              <!-- Views -->
-              <div class="tab-panel 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>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>
-
-              <!-- Actions -->
-              <div class="tab-panel 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>
-
-              <!-- CTA Shortcode -->
-              <div class="tab-panel docs-body">
-                  <p>The <code>[cta]</code> shortcode places an action-trigger button in any public page. Clicking it
-                      calls
-                      <code>POST /api/actions/:slug/public</code> with the entry ID, using the logged-in user's JWT.
-                      If the user is not logged in, a warning toast is shown instead.</p>
-
-                  <h3>Syntax &amp; Attributes</h3>
-                  <p><strong>Wrapping form:</strong></p>
-                  <pre class="code-block"><code>[cta action="slug" entry="entry-id" icon="check" confirm="Are you sure?"]Button label[/cta]</code></pre>
-                  <p><strong>Self-closing form:</strong></p>
-                  <pre class="code-block"><code>[cta action="slug" entry="entry-id" label="Button label" /]</code></pre>
-                  <table class="table table-sm" style="margin-top:1rem;">
-                      <thead>
-                      <tr>
-                          <th>Attribute</th>
-                          <th>Required</th>
-                          <th>Default</th>
-                          <th>Description</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>action</code></td>
-                          <td>Yes</td>
-                          <td>—</td>
-                          <td>Action slug</td>
-                      </tr>
-                      <tr>
-                          <td><code>entry</code></td>
-                          <td>Yes</td>
-                          <td>—</td>
-                          <td>Entry UUID to act on</td>
-                      </tr>
-                      <tr>
-                          <td><code>label</code></td>
-                          <td>No</td>
-                          <td><code>"Run"</code></td>
-                          <td>Button text (self-closing only)</td>
-                      </tr>
-                      <tr>
-                          <td><code>style</code></td>
-                          <td>No</td>
-                          <td><code>"primary"</code></td>
-                          <td>primary · secondary · ghost · danger</td>
-                      </tr>
-                      <tr>
-                          <td><code>icon</code></td>
-                          <td>No</td>
-                          <td>—</td>
-                          <td>Domma icon name</td>
-                      </tr>
-                      <tr>
-                          <td><code>size</code></td>
-                          <td>No</td>
-                          <td>—</td>
-                          <td>sm · md · lg</td>
-                      </tr>
-                      <tr>
-                          <td><code>confirm</code></td>
-                          <td>No</td>
-                          <td>—</td>
-                          <td>Confirmation prompt before executing</td>
-                      </tr>
-                      </tbody>
-                  </table>
-
-                  <h3>Collection Integration</h3>
-                  <p>Add per-entry buttons to any <code>[collection]</code> shortcode:</p>
-                  <pre class="code-block"><code>[collection slug="applications" display="cards" title-field="name"
-  cta="approve-application"
-  cta-label="Approve"
-  cta-icon="check"
-  cta-style="primary"
-  cta-confirm="Approve this application?" /]</code></pre>
-                  <table class="table table-sm" style="margin-top:1rem;">
-                      <thead>
-                      <tr>
-                          <th>Attribute</th>
-                          <th>Default</th>
-                          <th>Description</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>cta</code></td>
-                          <td>—</td>
-                          <td>Action slug — enables per-entry buttons</td>
-                      </tr>
-                      <tr>
-                          <td><code>cta-label</code></td>
-                          <td><code>"Run"</code></td>
-                          <td>Button label</td>
-                      </tr>
-                      <tr>
-                          <td><code>cta-icon</code></td>
-                          <td>—</td>
-                          <td>Domma icon name</td>
-                      </tr>
-                      <tr>
-                          <td><code>cta-style</code></td>
-                          <td><code>"primary"</code></td>
-                          <td>Button variant</td>
-                      </tr>
-                      <tr>
-                          <td><code>cta-confirm</code></td>
-                          <td>—</td>
-                          <td>Confirmation prompt</td>
-                      </tr>
-                      </tbody>
-                  </table>
-                  <p>All three display modes support CTA buttons: <strong>cards</strong> (card footer),
-                      <strong>list</strong> (inline), <strong>table</strong> (dedicated column).</p>
-              </div>
-
-          </div>
-      </div>
+      <hr style="margin-top:2rem;">
+      <p class="text-muted" style="font-size:.9rem;">
+        New to the CMS? Start with the <a href="#/tutorials">Tutorials</a>. Building reusable elements?
+        See <a href="#/docs/components">Components</a>. Integrating externally? See the
+        <a href="#/api-reference">API Reference</a>.
+      </p>
 
+    </div>
   </div>
 </div>