domma-cms 0.3.0 → 0.5.2

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,9 +105,17 @@
               <option value="grayve-dark">Grayve Dark</option>
               <option value="grayve-light">Grayve Light</option>
             </optgroup>
-            <optgroup label="Other">
+              <optgroup label="Mint">
+                  <option value="mint-dark">Mint Dark</option>
+                  <option value="mint-light">Mint Light</option>
+              </optgroup>
+              <optgroup label="Christmas">
               <option value="christmas-dark">Christmas Dark</option>
               <option value="christmas-light">Christmas Light</option>
+              </optgroup>
+              <optgroup label="Wedding">
+                  <option value="wedding-dark">Wedding Dark</option>
+                  <option value="wedding-light">Wedding Light</option>
             </optgroup>
           </select>
           <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the public-facing
@@ -155,13 +164,55 @@
               <option value="grayve-dark">Grayve Dark</option>
               <option value="grayve-light">Grayve Light</option>
             </optgroup>
-            <optgroup label="Other">
+              <optgroup label="Mint">
+                  <option value="mint-dark">Mint Dark</option>
+                  <option value="mint-light">Mint Light</option>
+            </optgroup>
+              <optgroup label="Christmas">
               <option value="christmas-dark">Christmas Dark</option>
               <option value="christmas-light">Christmas Light</option>
             </optgroup>
+              <optgroup label="Wedding">
+                  <option value="wedding-dark">Wedding Dark</option>
+                  <option value="wedding-light">Wedding Light</option>
+              </optgroup>
           </select>
           <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the admin panel.</p>
         </div>
+      </div>
+        <!-- Auto day/night theme -->
+        <div class="row mt-3">
+            <div class="col">
+                <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                    <input id="field-auto-theme-enabled" type="checkbox" class="form-check"> Enable automatic day/night
+                    theme switching
+                </label>
+                <p id="auto-theme-roller-hint" class="form-hint text-muted"
+                   style="display:none;margin-top:.35rem;font-size:.8rem;">Custom themes (Theme Roller) do not support
+                    auto-switching.</p>
+            </div>
+        </div>
+        <div id="auto-theme-fields" class="row mt-3" style="display:none;">
+            <div class="col-6">
+                <label class="form-label">Day Theme</label>
+                <select id="field-day-theme" class="form-select"></select>
+            </div>
+            <div class="col-6">
+                <label class="form-label">Night Theme</label>
+                <select id="field-night-theme" class="form-select"></select>
+            </div>
+            <div class="col-3 mt-3">
+                <label class="form-label">Day Starts At</label>
+                <input id="field-day-start" type="time" class="form-input" value="07:00">
+            </div>
+            <div class="col-3 mt-3">
+                <label class="form-label">Night Starts At</label>
+                <input id="field-night-start" type="time" class="form-input" value="19:00">
+            </div>
+            <div class="col-12 mt-2">
+                <p class="form-hint text-muted" style="font-size:.8rem;">Themes switch based on each visitor's local
+                    time. Any theme can be used — they need not be light/dark pairs.</p>
+        </div>
       </div>
       <div class="row mt-3">
         <div class="col-3">
@@ -296,52 +347,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 +493,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">

package/admin/js/templates/tutorials.html

@@ -229,5 +229,86 @@ export const myPluginView = {
       </div>
     </div>
 
+  <!-- Tutorial: Form Follow-Up -->
+  <div class="card card-collapsible mb-4">
+    <div class="card-header">
+      <h2>Form Follow-Up: Notifications &amp; Actions</h2>
+    </div>
+    <div class="card-body">
+
+      <p>Every form in Domma CMS can trigger up to four things after a submission is stored:</p>
+      <ol>
+        <li>Send an <strong>email notification</strong> to one or more recipients</li>
+        <li>POST to a <strong>webhook URL</strong></li>
+        <li>Execute a <strong>CMS Action</strong> (Pro)</li>
+        <li>Redirect the visitor to a <strong>success page</strong> (or show an inline message)</li>
+      </ol>
+      <p>These are configured per-form in the admin. Open any form in <a href="#/forms">Forms</a> and go to the
+        <strong>Settings</strong> and <strong>Actions</strong> tabs.</p>
+
+      <hr>
+
+      <h3>1. Email notification</h3>
+      <p>Go to the <strong>Actions</strong> tab of your form and enable <em>Send email on submit</em>. Enter one or
+        more comma-separated recipient addresses. This uses the SMTP settings configured in
+        <a href="#/settings">Site Settings → Email / SMTP</a>.</p>
+
+      <pre class="code-block"><code>Recipients:       admin@example.com, team@example.com
+Subject Prefix:   [Contact Form]</code></pre>
+
+      <h3>2. Webhook</h3>
+      <p>Enable <em>POST to webhook on submit</em> and enter a URL. Domma will POST the following JSON body:</p>
+      <pre class="code-block"><code>{
+  "form": "enquiries",
+  "data": {
+    "full_name": "Jane Smith",
+    "email": "jane@example.com",
+    "message": "Hello!"
+  }
+}</code></pre>
+      <p>Use this to integrate with Zapier, Make, Slack, or any HTTP endpoint.</p>
+
+      <h3>3. CMS Action (Pro)</h3>
+      <p>Actions are reusable workflow steps defined in <a href="#/actions">Actions</a>. A single action can chain
+        multiple steps: update a field, move an entry to another collection, send an email, call a webhook, or
+        delete an entry.</p>
+      <p>To wire an Action to a form:</p>
+      <ol>
+        <li>Create an Action in <a href="#/actions">Actions</a> targeting the same collection as your form.</li>
+        <li>Open the form in <a href="#/forms">Forms</a> → <strong>Actions</strong> tab → <strong>CMS Action</strong>
+          card.</li>
+        <li>Select the Action from the dropdown and save.</li>
+      </ol>
+      <p>The Action runs server-side, after the entry is saved. If it fails (e.g. MongoDB is not configured),
+        the submission is still stored — the action failure is non-fatal and logged as a warning.</p>
+
+      <h3>4. Success message vs. redirect</h3>
+      <p>After a successful submission the visitor sees one of two things:</p>
+      <ul>
+        <li><strong>Inline success message</strong> — the form is replaced by the text set in
+          <em>Settings → Success Message</em>. Good for simple acknowledgements.</li>
+        <li><strong>Page redirect</strong> — the visitor is sent to the URL set in
+          <em>Settings → Success Redirect URL</em>. Good for registration flows, checkouts, or when you want
+          a full thank-you page with additional content. <strong>Takes priority</strong> if both are set.</li>
+      </ul>
+      <p>Example: set <em>Success Redirect URL</em> to <code>/thank-you</code> and create a <code>thank-you.md</code>
+        page in the CMS with any content you like.</p>
+
+      <h3>Execution order</h3>
+      <p>On every submission, the pipeline runs in this fixed order:</p>
+      <ol>
+        <li>Validate fields + honeypot + rate limit</li>
+        <li>Store entry to collection</li>
+        <li>Send email (if enabled)</li>
+        <li>Call webhook (if enabled)</li>
+        <li>Execute CMS Action (if set)</li>
+        <li>Return success response → client redirects or shows message</li>
+      </ol>
+      <p>Steps 3–5 are non-fatal: a failure in any of them is logged as a warning but does not prevent the
+        submission from being stored or the success response from being returned.</p>
+
+    </div>
+  </div>
+
   </div>
 </div>

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

@@ -10,3 +10,10 @@
         <div id="user-form-container"></div>
     </div>
 </div>
+
+<div class="card mt-4" id="profile-card" style="display:none;">
+    <div class="card-header"><h2><span data-icon="user"></span> Profile</h2></div>
+    <div class="card-body">
+        <div id="profile-form-container"></div>
+    </div>
+</div>

package/admin/js/templates/users.html

@@ -5,31 +5,8 @@
     </div>
 </div>
 
-<div class="tabs" id="users-tabs">
-    <div class="tab-list">
-        <button class="tab-item active" data-tab="users">Users</button>
-        <button class="tab-item" data-tab="user-types">User Types</button>
-    </div>
-    <div class="tab-content">
-        <div class="tab-panel active" id="panel-users">
-            <div class="card">
-                <div class="card-body">
-                    <div id="users-table"></div>
-                </div>
-            </div>
-        </div>
-        <div class="tab-panel" id="panel-user-types">
-            <div class="card">
-                <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;">
-                    <strong>User Types</strong>
-                    <button class="btn btn-primary btn-sm" id="btn-add-user-type">
-                        <span data-icon="plus"></span> Add User Type
-                    </button>
-                </div>
-                <div class="card-body">
-                    <div id="user-types-table"></div>
-                </div>
-            </div>
-        </div>
+<div class="card">
+    <div class="card-body">
+        <div id="users-table"></div>
     </div>
 </div>

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

@@ -0,0 +1,201 @@
+<div class="view-header">
+    <h1><span data-icon="eye"></span> <span id="view-editor-title">New View</span></h1>
+    <div style="display:flex;gap:.5rem;">
+        <a href="#/views" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> All Views
+        </a>
+        <button id="save-view-btn" class="btn btn-primary">
+            <span data-icon="save"></span> Save View
+        </button>
+    </div>
+</div>
+
+<div class="tabs" id="view-editor-tabs">
+    <div class="tab-list">
+        <button class="tab-item active">Source</button>
+        <button class="tab-item">Pipeline</button>
+        <button class="tab-item">Display</button>
+        <button class="tab-item">Access</button>
+    </div>
+    <div class="tab-content">
+
+        <!-- Source tab -->
+        <div class="tab-panel active">
+            <div class="card">
+                <div class="card-body" style="display:flex;flex-direction:column;gap:1rem;max-width:600px;">
+                    <div>
+                        <label class="form-label">Title <span style="color:var(--dm-danger,#f87171);">*</span></label>
+                        <input id="view-title" type="text" class="form-input" placeholder="e.g. Active Premium Users">
+                    </div>
+                    <div>
+                        <label class="form-label">Slug</label>
+                        <input id="view-slug" type="text" class="form-input" placeholder="Auto-generated from title">
+                        <small class="text-muted">URL-safe identifier. Leave blank to auto-generate.</small>
+                    </div>
+                    <div>
+                        <label class="form-label">Description</label>
+                        <textarea id="view-description" class="form-input" rows="2" placeholder="Describe what this view shows…"></textarea>
+                    </div>
+                    <div>
+                        <label class="form-label">Source Collection <span style="color:var(--dm-danger,#f87171);">*</span></label>
+                        <select id="view-source" class="form-input">
+                            <option value="">— select collection —</option>
+                        </select>
+                        <small class="text-muted">Changing the collection will refresh field lists in Pipeline and
+                            Display tabs.</small>
+                    </div>
+                    <div>
+                        <label class="form-label">Connection</label>
+                        <select id="view-connection" class="form-input">
+                            <option value="default">default</option>
+                        </select>
+                        <small class="text-muted">MongoDB connection to use for execution.</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Pipeline tab -->
+        <div class="tab-panel">
+            <div class="card mb-3">
+                <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+                    <h2>Aggregation Stages</h2>
+                    <div style="display:flex;gap:.5rem;">
+                        <select id="add-stage-type" class="form-input form-input--sm">
+                            <option value="$match">$match — filter rows</option>
+                            <option value="$sort">$sort — order rows</option>
+                            <option value="$lookup">$lookup — join collection</option>
+                            <option value="$project">$project — reshape fields</option>
+                            <option value="$unwind">$unwind — flatten array</option>
+                            <option value="$addFields">$addFields — compute fields</option>
+                            <option value="$group">$group — aggregate</option>
+                        </select>
+                        <button id="add-stage-btn" class="btn btn-ghost btn-sm">
+                            <span data-icon="plus"></span> Add Stage
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div id="pipeline-stages-list">
+                        <p class="text-muted stage-empty-placeholder" style="text-align:center;padding:2rem 0;">
+                            No stages yet. Add a stage to filter, join, or transform your data.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-body" style="font-size:.8rem;color:var(--dm-text-muted,#888);">
+                    <strong>Guided stages</strong> ($match, $sort) show a visual condition builder.
+                    Other stages use a raw JSON textarea — enter only the <em>inner</em> config (e.g. for $lookup, enter
+                    <code>{ from, localField, foreignField, as }</code> — do not wrap in <code>{ "$lookup": ... }</code>).
+                    Field dropdowns are populated from the source collection — select a collection on the Source tab
+                    first.
+                </div>
+            </div>
+        </div>
+
+        <!-- Display tab -->
+        <div class="tab-panel">
+            <div class="card">
+                <div class="card-body" style="display:flex;flex-direction:column;gap:1.25rem;max-width:640px;">
+                    <div>
+                        <label class="form-label">Display Mode</label>
+                        <select id="view-display-mode" class="form-input">
+                            <option value="table">Table</option>
+                            <option value="list">List</option>
+                            <option value="block">Block</option>
+                        </select>
+                    </div>
+                    <div id="view-block-section" style="display:none;">
+                        <label class="form-label">Block Template</label>
+                        <select id="view-block-name" class="form-input">
+                            <option value="">— select block —</option>
+                        </select>
+                        <small class="text-muted">
+                            Choose a reusable HTML block template.
+                            <a href="#/blocks" style="margin-left:.35rem;">Manage blocks</a>
+                        </small>
+                    </div>
+                    <div>
+                        <label class="form-label">Page Size</label>
+                        <input id="view-page-size" type="number" class="form-input" value="25" min="1" max="200">
+                    </div>
+                    <div id="view-columns-section">
+                        <label class="form-label">Columns</label>
+                        <small class="text-muted" style="display:block;margin-bottom:.75rem;">
+                            Choose which fields to display and their labels.
+                            Field dropdowns are auto-populated from the source collection.
+                        </small>
+                        <div id="view-columns-builder" style="min-height:2rem;"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Access tab -->
+        <div class="tab-panel">
+            <div class="card mb-3">
+                <div class="card-body" style="max-width:500px;">
+                    <div style="margin-bottom:1.25rem;">
+                        <label class="form-label">Allowed Roles</label>
+                        <small class="text-muted" style="display:block;margin-bottom:.75rem;">
+                            Select which roles can access this view.
+                        </small>
+                        <div id="view-roles-checkboxes" style="display:flex;flex-direction:column;gap:.5rem;"></div>
+                    </div>
+                    <div>
+                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                            <input type="checkbox" id="view-public">
+                            <span>Public (no authentication required)</span>
+                        </label>
+                        <small class="text-muted" style="display:block;margin-top:.4rem;">
+                            When enabled, the <code>/views/:slug/public</code> endpoint requires no login.
+                        </small>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header"><h2>Row-Level Access</h2></div>
+                <div class="card-body" style="max-width:500px;display:flex;flex-direction:column;gap:1rem;">
+                    <div>
+                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                            <input type="checkbox" id="view-rowlevel-enabled">
+                            <span>Filter results to current user's entries</span>
+                        </label>
+                        <small class="text-muted" style="display:block;margin-top:.4rem;">
+                            When enabled, each user sees only their own matching entries.
+                            Admins always see all results.
+                        </small>
+                    </div>
+                    <div id="view-rowlevel-config" style="display:none;flex-direction:column;gap:1rem;">
+                        <div>
+                            <label class="form-label">Mode</label>
+                            <select id="view-rowlevel-mode" class="form-input">
+                                <option value="owner">Owner — entry was created by the current user</option>
+                                <option value="field">Field Match — a field on the entry matches the user</option>
+                            </select>
+                        </div>
+                        <div id="view-rowlevel-field-group" style="display:none;">
+                            <label class="form-label">Field Name</label>
+                            <input id="view-rowlevel-field" type="text" class="form-input"
+                                   placeholder="e.g. assigned_to">
+                            <small class="text-muted">The entry field whose value must match the user property
+                                below.</small>
+                        </div>
+                        <div>
+                            <label class="form-label">User Property</label>
+                            <select id="view-rowlevel-userkey" class="form-input">
+                                <option value="id">id (UUID)</option>
+                                <option value="email">email</option>
+                                <option value="name">name</option>
+                                <option value="role">role</option>
+                            </select>
+                            <small class="text-muted">Which property of the logged-in user to compare against.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

package/admin/js/templates/view-preview.html

@@ -0,0 +1,51 @@
+<div class="view-header">
+    <h1><span data-icon="eye"></span> <span id="preview-title">View Preview</span></h1>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <a id="preview-edit-btn" href="#/views" class="btn btn-ghost btn-sm">
+            <span data-icon="edit-3"></span> Edit View
+        </a>
+        <a href="#/views" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> All Views
+        </a>
+        <button id="preview-run-btn" class="btn btn-primary">
+            <span data-icon="play"></span> Run
+        </button>
+    </div>
+</div>
+
+<div class="card mb-3" id="preview-meta-card" style="display:none;">
+    <div class="card-body" style="display:flex;gap:2rem;flex-wrap:wrap;font-size:.875rem;color:var(--dm-text-muted,#888);">
+        <span>Source: <strong id="preview-source"></strong></span>
+        <span>Connection: <strong id="preview-connection"></strong></span>
+        <span>Mode: <strong id="preview-mode"></strong></span>
+    </div>
+</div>
+
+<div class="card mb-3" id="preview-pagination" style="display:none;">
+    <div class="card-body" style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
+        <span id="preview-count" class="text-muted" style="font-size:.875rem;"></span>
+        <div style="display:flex;gap:.4rem;margin-left:auto;">
+            <button id="preview-prev" class="btn btn-ghost btn-sm" disabled>
+                <span data-icon="chevron-left"></span> Prev
+            </button>
+            <span id="preview-page-label" style="padding:.25rem .5rem;font-size:.875rem;align-self:center;"></span>
+            <button id="preview-next" class="btn btn-ghost btn-sm" disabled>
+                Next <span data-icon="chevron-right"></span>
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="preview-placeholder" style="text-align:center;padding:3rem;color:var(--dm-text-muted,#888);">
+            <span data-icon="play" data-icon-size="48" style="opacity:.3;display:block;margin-bottom:1rem;"></span>
+            Click <strong>Run</strong> to execute this view and see results.
+        </div>
+        <div id="preview-table" style="display:none;"></div>
+        <div id="preview-list" style="display:none;"></div>
+        <div id="preview-empty" style="display:none;text-align:center;padding:2rem;color:var(--dm-text-muted,#888);">
+            No results returned.
+        </div>
+    </div>
+</div>