domma-cms 0.3.0 → 0.5.0

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

@@ -91,6 +91,40 @@
           </select>
         </div>
       </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Theme Override</label>
+          <select id="field-theme" class="form-select">
+            <option value="">— Use site default —</option>
+            <option value="charcoal-dark">Charcoal Dark</option>
+            <option value="charcoal-light">Charcoal Light</option>
+            <option value="ocean-dark">Ocean Dark</option>
+            <option value="ocean-light">Ocean Light</option>
+            <option value="forest-dark">Forest Dark</option>
+            <option value="forest-light">Forest Light</option>
+            <option value="sunset-dark">Sunset Dark</option>
+            <option value="sunset-light">Sunset Light</option>
+            <option value="royal-dark">Royal Dark</option>
+            <option value="royal-light">Royal Light</option>
+            <option value="lemon-dark">Lemon Dark</option>
+            <option value="lemon-light">Lemon Light</option>
+            <option value="silver-dark">Silver Dark</option>
+            <option value="silver-light">Silver Light</option>
+            <option value="grayve-dark">Grayve Dark</option>
+            <option value="grayve-light">Grayve Light</option>
+              <option value="mint-dark">Mint Dark</option>
+              <option value="mint-light">Mint Light</option>
+          </select>
+          <small class="form-hint">Overrides the site-wide theme for this page only.</small>
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col">
+          <label class="form-label">Tags</label>
+          <div id="field-tags"></div>
+          <small class="form-hint">Comma-separated keywords for filtering and search.</small>
+        </div>
+      </div>
       <div class="row">
         <div class="col-auto">
           <label class="form-check-label">
@@ -102,6 +136,11 @@
             <input id="field-sidebar" type="checkbox" class="form-check"> Show Sidebar
           </label>
         </div>
+        <div class="col-auto">
+          <label class="form-check-label">
+            <input id="field-show-breadcrumbs" type="checkbox" class="form-check" checked> Show Breadcrumbs
+          </label>
+        </div>
       </div>
     </div>
 

package/admin/js/templates/pages.html

@@ -3,16 +3,21 @@
     <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
 </div>
 
-<div class="toolbar mb-3">
+<div class="toolbar mb-3" style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
     <select id="status-filter" class="form-select form-select-sm" style="width:auto">
         <option value="">All statuses</option>
         <option value="published">Published</option>
         <option value="draft">Draft</option>
     </select>
+    <div class="btn-group" style="margin-left:auto;">
+        <button id="view-table-btn" class="btn btn-sm btn-primary" data-tooltip="Table view"><span data-icon="list"></span></button>
+        <button id="view-tree-btn" class="btn btn-sm btn-ghost" data-tooltip="Tree view"><span data-icon="tree"></span></button>
+    </div>
 </div>
 
 <div class="card">
     <div class="card-body">
         <div id="pages-table"></div>
+        <div id="pages-tree" style="display:none;"></div>
     </div>
 </div>

package/admin/js/templates/pro-docs.html

@@ -0,0 +1,259 @@
+<div class="view-header">
+  <h1><span data-icon="zap"></span> Pro Documentation</h1>
+</div>
+
+<div class="tabs" id="pro-docs-tabs">
+  <div class="tab-list">
+    <button class="tab-item active">Views</button>
+    <button class="tab-item">Actions</button>
+    <button class="tab-item">CTA Shortcode</button>
+  </div>
+  <div class="tab-content">
+
+    <!-- ── Views tab ─────────────────────────────────────── -->
+    <div class="tab-panel active">
+
+      <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> What is a View?</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <p>A <strong>View</strong> is a saved MongoDB aggregation pipeline that runs against a collection and returns shaped results. Views are created under <strong>Data → Views</strong> and exposed via a REST endpoint that respects role-level and row-level access.</p>
+          <p>Views require a MongoDB connection configured in <code>config/connections.json</code>.</p>
+        </div>
+      </div>
+
+      <div class="card card-collapsible mb-4">
+        <div class="card-header" role="button" tabindex="0">
+          <div class="card-header-content"><h2><span data-icon="layers"></span> Allowed Pipeline Stages</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <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 field values</td></tr>
+              <tr><td><code>$sort</code></td><td>Order results</td></tr>
+              <tr><td><code>$project</code></td><td>Include, exclude, or rename fields</td></tr>
+              <tr><td><code>$lookup</code></td><td>Join from another collection</td></tr>
+              <tr><td><code>$unwind</code></td><td>Flatten an array field</td></tr>
+              <tr><td><code>$addFields</code></td><td>Compute new fields</td></tr>
+              <tr><td><code>$group</code></td><td>Aggregate (count, sum, etc.)</td></tr>
+              <tr><td><code>$limit</code></td><td>Cap results</td></tr>
+              <tr><td><code>$skip</code></td><td>Skip N results</td></tr>
+              <tr><td><code>$count</code></td><td>Return a document count</td></tr>
+            </tbody>
+          </table>
+          <p class="text-muted" style="margin-top:.75rem;">Blocked: <code>$out</code>, <code>$merge</code>, <code>$function</code>, <code>$accumulator</code>, <code>$graphLookup</code></p>
+          <p>Collections are prefixed <code>cms_</code> in MongoDB — use this prefix in <code>$lookup</code> <code>from</code> values.</p>
+        </div>
+      </div>
+
+      <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> Example Pipeline</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <p>Match active entries and count related submissions:</p>
+          <pre class="code-block"><code>[
+  { "$match": { "data.isActive": true } },
+  {
+    "$lookup": {
+      "from": "cms_feedback",
+      "localField": "_id",
+      "foreignField": "data.userId",
+      "as": "submissions"
+    }
+  },
+  { "$addFields": { "submissionCount": { "$size": "$submissions" } } },
+  { "$project": { "data.name": 1, "data.email": 1, "submissionCount": 1 } },
+  { "$sort": { "submissionCount": -1 } }
+]</code></pre>
+        </div>
+      </div>
+
+      <div class="card card-collapsible mb-4">
+        <div class="card-header" role="button" tabindex="0">
+          <div class="card-header-content"><h2><span data-icon="lock"></span> Access Control</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <table class="table table-sm">
+            <thead><tr><th>Setting</th><th>Description</th></tr></thead>
+            <tbody>
+              <tr><td>Allowed Roles</td><td>Which roles can call <code>GET /api/views/:slug/public</code></td></tr>
+              <tr><td>Public</td><td>No authentication required when checked</td></tr>
+              <tr><td>Row-Level — Owner</td><td>User sees only entries they created</td></tr>
+              <tr><td>Row-Level — Field Match</td><td>A specified entry field must match a user property</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div><!-- /Views tab -->
+
+    <!-- ── Actions tab ───────────────────────────────────── -->
+    <div class="tab-panel">
+
+      <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> What is an Action?</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <p>An <strong>Action</strong> is a named sequence of steps that runs against a single collection entry. Actions are defined under <strong>Data → Actions</strong> and can be triggered from the entry list or via the <code>[cta]</code> shortcode on any public page.</p>
+          <p>Actions require a MongoDB connection configured in <code>config/connections.json</code>.</p>
+          <p>Steps run in order. If a step fails, execution stops and a partial result is returned with a <code>stepsCompleted</code> count.</p>
+        </div>
+      </div>
+
+      <div class="card card-collapsible mb-4">
+        <div class="card-header" role="button" tabindex="0">
+          <div class="card-header-content"><h2><span data-icon="list"></span> Step Types</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <table class="table table-sm">
+            <thead><tr><th>Type</th><th>What it does</th></tr></thead>
+            <tbody>
+              <tr><td><code>updateField</code></td><td>Sets a field on the entry to a new value</td></tr>
+              <tr><td><code>deleteEntry</code></td><td>Permanently deletes the target entry</td></tr>
+              <tr><td><code>moveToCollection</code></td><td>Moves the entry to a different collection</td></tr>
+              <tr><td><code>webhook</code></td><td>POSTs entry data to an external URL</td></tr>
+              <tr><td><code>email</code></td><td>Sends an email via the configured SMTP server</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div class="card card-collapsible mb-4">
+        <div class="card-header" role="button" tabindex="0">
+          <div class="card-header-content"><h2><span data-icon="tag"></span> Template Variables</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <p>All step field values support <code>&#123;&#123;...&#125;&#125;</code> interpolation:</p>
+          <table class="table table-sm">
+            <thead><tr><th>Variable</th><th>Value</th></tr></thead>
+            <tbody>
+              <tr><td><code>&#123;&#123;entry.data.fieldName&#125;&#125;</code></td><td>Any field from the target entry</td></tr>
+              <tr><td><code>&#123;&#123;entry.id&#125;&#125;</code></td><td>The entry's UUID</td></tr>
+              <tr><td><code>&#123;&#123;now&#125;&#125;</code></td><td>Current ISO 8601 timestamp</td></tr>
+              <tr><td><code>&#123;&#123;user.name&#125;&#125;</code></td><td>Name of the triggering user</td></tr>
+              <tr><td><code>&#123;&#123;user.email&#125;&#125;</code></td><td>Email of the triggering user</td></tr>
+              <tr><td><code>&#123;&#123;user.id&#125;&#125;</code></td><td>UUID of the triggering user</td></tr>
+              <tr><td><code>&#123;&#123;env.CMS_PUBLIC_*&#125;&#125;</code></td><td>Public environment variables</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <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> Step Examples</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <p><strong>updateField</strong> — mark an entry as approved:</p>
+          <pre class="code-block"><code>{ "field": "status", "value": "approved" }</code></pre>
+          <p><strong>webhook</strong> — notify an external service:</p>
+          <pre class="code-block"><code>{
+  "url": "https://hooks.example.com/notify",
+  "headers": { "X-Secret": "{{env.CMS_PUBLIC_HOOK_SECRET}}" }
+}</code></pre>
+          <p><strong>email</strong> — send confirmation to applicant:</p>
+          <pre class="code-block"><code>{
+  "to": "{{entry.data.email}}",
+  "subject": "Your application was approved",
+  "body": "Hi {{entry.data.name}}, your application has been approved."
+}</code></pre>
+        </div>
+      </div>
+
+    </div><!-- /Actions tab -->
+
+    <!-- ── CTA Shortcode tab ──────────────────────────────── -->
+    <div class="tab-panel">
+
+      <div class="card card-collapsible mb-4">
+        <div class="card-header" role="button" tabindex="0">
+          <div class="card-header-content"><h2><span data-icon="mouse-pointer"></span> What is the CTA shortcode?</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body 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.</p>
+          <p>If the user is not logged in, a warning toast is shown instead.</p>
+        </div>
+      </div>
+
+      <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> Syntax &amp; Attributes</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <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>
+        </div>
+      </div>
+
+      <div class="card card-collapsible mb-4">
+        <div class="card-header" role="button" tabindex="0">
+          <div class="card-header-content"><h2><span data-icon="grid"></span> Collection Integration</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <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 class="card card-collapsible mb-4">
+        <div class="card-header" role="button" tabindex="0">
+          <div class="card-header-content"><h2><span data-icon="book-open"></span> Full Reference</h2></div>
+          <span class="card-collapse-icon" data-icon="chevron-down"></span>
+        </div>
+        <div class="card-body docs-body">
+          <p>See the public documentation for live examples and the complete attribute reference:</p>
+          <a href="/resources/pro/cta" target="_blank" class="btn btn-ghost btn-sm">
+            <span data-icon="external-link"></span> CTA Shortcode Reference
+          </a>
+        </div>
+      </div>
+
+    </div><!-- /CTA tab -->
+
+  </div><!-- .tab-content -->
+</div><!-- .tabs -->

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

@@ -0,0 +1,59 @@
+<div class="view-header">
+    <h1><span data-icon="shield"></span> <span id="role-title">Edit Role</span></h1>
+    <div>
+        <a href="#/roles" class="btn btn-secondary"><span data-icon="arrow-left"></span> Back</a>
+        <button id="btn-save-role" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+    </div>
+</div>
+
+<div class="tabs" id="role-tabs">
+    <div class="tab-list">
+        <button class="tab-item active">General</button>
+        <button class="tab-item">Permissions</button>
+    </div>
+    <div class="tab-content">
+        <!-- General Tab -->
+        <div class="tab-panel active" id="panel-general">
+            <div class="card">
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-6">
+                            <div class="mb-3">
+                                <label class="form-label">Name (slug)</label>
+                                <input id="role-name" type="text" class="form-input" placeholder="e.g. moderator">
+                                <p class="form-hint">Lowercase identifier. Cannot be changed for the root admin
+                                    role.</p>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="mb-3">
+                                <label class="form-label">Display Label</label>
+                                <input id="role-label" type="text" class="form-input" placeholder="e.g. Moderator">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6">
+                            <div class="mb-3">
+                                <label class="form-label">Level</label>
+                                <input id="role-level" type="number" class="form-input" min="0">
+                                <p class="form-hint">Lower = more privileged. 0 is reserved for the root admin.</p>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="mb-3">
+                                <label class="form-label">Badge Colour</label>
+                                <select id="role-badge" class="form-input"></select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Permissions Tab -->
+        <div class="tab-panel" id="panel-permissions">
+            <div id="permissions-container"></div>
+        </div>
+    </div>
+</div>

package/admin/js/templates/roles.html

@@ -0,0 +1,10 @@
+<div class="view-header">
+    <h1><span data-icon="shield"></span> Roles &amp; Permissions</h1>
+    <button id="btn-add-role" class="btn btn-primary"><span data-icon="plus"></span> Add Role</button>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="roles-table"></div>
+    </div>
+</div>

package/admin/js/templates/settings.html

@@ -11,6 +11,7 @@
     <button class="tab-item">Email / SMTP</button>
     <button class="tab-item">Back to Top</button>
     <button class="tab-item">Cookie Consent</button>
+    <button class="tab-item">Breadcrumbs</button>
     <button class="tab-item">Custom CSS</button>
   </div>
   <div class="tab-content">
@@ -104,6 +105,10 @@
               <option value="grayve-dark">Grayve Dark</option>
               <option value="grayve-light">Grayve Light</option>
             </optgroup>
+              <optgroup label="Mint">
+                  <option value="mint-dark">Mint Dark</option>
+                  <option value="mint-light">Mint Light</option>
+              </optgroup>
             <optgroup label="Other">
               <option value="christmas-dark">Christmas Dark</option>
               <option value="christmas-light">Christmas Light</option>
@@ -154,6 +159,10 @@
             <optgroup label="Grayve">
               <option value="grayve-dark">Grayve Dark</option>
               <option value="grayve-light">Grayve Light</option>
+            </optgroup>
+              <optgroup label="Mint">
+                  <option value="mint-dark">Mint Dark</option>
+                  <option value="mint-light">Mint Light</option>
             </optgroup>
             <optgroup label="Other">
               <option value="christmas-dark">Christmas Dark</option>
@@ -296,52 +305,48 @@
 
     <!-- Back to Top -->
     <div class="tab-panel">
-      <div class="row mb-3">
-        <div class="col">
+      <div class="mb-3">
+        <label class="form-label">Label <span class="text-muted" style="font-weight:400;">(optional)</span></label>
+        <input id="field-btt-label" type="text" class="form-input" placeholder="Back to top">
+        <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Leave blank for icon-only button.</p>
+      </div>
+      <div class="grid grid-cols-2 gap-3 mb-4">
+        <div>
           <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
             <input id="field-btt-enabled" type="checkbox" class="form-check"> Enable Back to Top button
           </label>
         </div>
+        <div>
+          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+            <input id="field-btt-smooth" type="checkbox" class="form-check"> Smooth scroll
+          </label>
+        </div>
       </div>
-      <div class="row mb-3">
-        <div class="col-4">
+      <div class="grid grid-cols-2 gap-3">
+        <div>
           <label class="form-label">Scroll Threshold (px)</label>
           <input id="field-btt-threshold" type="number" class="form-input" placeholder="300">
           <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Show button after scrolling this many pixels.</p>
         </div>
-        <div class="col-4">
+        <div>
           <label class="form-label">Position</label>
           <select id="field-btt-position" class="form-select">
             <option value="bottom-right">Bottom Right</option>
             <option value="bottom-left">Bottom Left</option>
           </select>
         </div>
-        <div class="col-4">
+        <div>
           <label class="form-label">Side Offset (px)</label>
           <input id="field-btt-offset" type="number" class="form-input" placeholder="32">
           <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Distance from the left or right
             edge.</p>
         </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-4">
+        <div>
           <label class="form-label">Bottom Offset (px)</label>
           <input id="field-btt-bottom-offset" type="number" class="form-input" placeholder="32">
           <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Distance from the bottom edge.</p>
         </div>
       </div>
-      <div class="row mb-3">
-        <div class="col-6">
-          <label class="form-label">Label <span class="text-muted" style="font-weight:400;">(optional)</span></label>
-          <input id="field-btt-label" type="text" class="form-input" placeholder="Back to top">
-          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Leave blank for icon-only button.</p>
-        </div>
-        <div class="col-6" style="padding-top:2rem;">
-          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-            <input id="field-btt-smooth" type="checkbox" class="form-check"> Smooth scroll
-          </label>
-        </div>
-      </div>
     </div>
 
     <!-- Cookie Consent -->
@@ -446,6 +451,103 @@
       </div>
     </div>
 
+    <!-- Custom CSS -->
+    <!-- Breadcrumbs -->
+    <div class="tab-panel">
+      <div class="row mb-3">
+        <div class="col">
+          <div class="card">
+            <div class="card-header"><strong>Breadcrumb Navigation</strong></div>
+            <div class="card-body">
+              <p class="text-muted mb-3" style="font-size:.875rem;">
+                When enabled, a frosted pill breadcrumb trail is fixed to your chosen viewport corner on all public
+                pages.
+                Individual pages can opt-out via "Show Breadcrumbs" in the page editor.
+              </p>
+              <div class="row mb-4">
+                <div class="col-auto" style="display:flex;align-items:center;gap:.75rem;">
+                  <input id="field-breadcrumbs-enabled" type="checkbox" class="form-check">
+                  <label for="field-breadcrumbs-enabled">Enable breadcrumbs on all pages</label>
+                </div>
+              </div>
+
+              <div class="row mb-4" style="align-items:flex-end;gap:0;">
+                <div class="col-sm-4">
+                  <label class="form-label">Home label</label>
+                  <input id="field-breadcrumbs-home-label" type="text" class="form-input" placeholder="Home">
+                </div>
+              </div>
+
+              <label class="form-label" style="margin-bottom:.6rem;">Pill Position &amp; Offsets</label>
+              <div class="row" style="align-items:flex-start;gap:0;">
+
+                <!-- Corner picker -->
+                <div class="col-auto" style="margin-right:1.5rem;margin-bottom:1rem;">
+                  <div id="bc-pos-grid"
+                       style="display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--border-color,rgba(255,255,255,.1));border-radius:10px;overflow:hidden;background:var(--border-color,rgba(255,255,255,.07));width:fit-content;">
+                    <button type="button" class="bc-pos-btn" data-pos="TL"
+                            style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-right:1px solid var(--border-color,rgba(255,255,255,.08));border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));border-radius:0;gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:72px;">
+                      <span
+                          style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Top</span>
+                      <span style="font-weight:600;">↖ Left</span>
+                    </button>
+                    <button type="button" class="bc-pos-btn" data-pos="TR"
+                            style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));border-radius:0;gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:72px;">
+                      <span
+                          style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Top</span>
+                      <span style="font-weight:600;">Right ↗</span>
+                    </button>
+                    <button type="button" class="bc-pos-btn" data-pos="BL"
+                            style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-right:1px solid var(--border-color,rgba(255,255,255,.08));border-radius:0;gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:72px;">
+                      <span style="font-weight:600;">↙ Left</span>
+                      <span
+                          style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Bottom</span>
+                    </button>
+                    <button type="button" class="bc-pos-btn" data-pos="BR"
+                            style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--text-muted,#888);border-radius:0;gap:.05rem;user-select:none;transition:background .15s,color .15s;min-width:72px;">
+                      <span style="font-weight:600;">Right ↘</span>
+                      <span
+                          style="font-size:.6rem;opacity:.55;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;">Bottom</span>
+                    </button>
+                  </div>
+                  <input type="hidden" id="field-breadcrumbs-position" value="TL">
+                </div>
+
+                <!-- Offsets -->
+                <div class="col-sm-3" style="margin-right:1rem;">
+                  <label class="form-label" for="field-bc-offset-x">Horizontal offset</label>
+                  <div style="display:flex;align-items:center;gap:.4rem;">
+                    <input id="field-bc-offset-x" type="number" class="form-input" min="0" max="500" placeholder="8"
+                           style="max-width:90px;">
+                    <span class="text-muted" style="font-size:.8rem;">px</span>
+                  </div>
+                  <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.75rem;">Distance from left or
+                    right edge.</p>
+                </div>
+
+                <div class="col-sm-3">
+                  <label class="form-label" for="field-bc-offset-y">Vertical offset</label>
+                  <div style="display:flex;align-items:center;gap:.4rem;">
+                    <input id="field-bc-offset-y" type="number" class="form-input" min="0" max="500" placeholder="60"
+                           style="max-width:90px;">
+                    <span class="text-muted" style="font-size:.8rem;">px</span>
+                  </div>
+                  <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.75rem;">Distance from top or
+                    bottom edge.</p>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button id="save-breadcrumbs-btn" class="btn btn-primary"><span data-icon="save"></span> Save Breadcrumbs Settings</button>
+        </div>
+      </div>
+    </div>
+
     <!-- Custom CSS -->
     <div class="tab-panel">
       <div class="row mb-3">