domma-cms 0.3.0 → 0.5.0

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>

package/admin/js/templates/views-list.html

@@ -0,0 +1,19 @@
+<div class="view-header">
+    <h1><span data-icon="eye"></span> Views</h1>
+    <button id="create-view-btn" class="btn btn-primary">
+        <span data-icon="plus"></span> New View
+    </button>
+</div>
+
+<div id="views-pro-notice" class="card mb-3" style="display:none;">
+    <div class="card-body" style="color:var(--dm-warning,#f59e0b);display:flex;align-items:center;gap:.6rem;">
+        <span data-icon="alert-triangle"></span>
+        <span>Views require a MongoDB connection (pro mode). Configure one under Collections → Options.</span>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="views-table"></div>
+    </div>
+</div>

package/admin/js/views/action-editor.js

@@ -0,0 +1 @@
+import{api as S}from"../api.js";let _=null;const z={deleteEntry:[],moveToCollection:[{name:"targetCollection",label:"Target Collection Slug",placeholder:"e.g. archived-applications"}],webhook:[{name:"url",label:"URL",placeholder:"https://hooks.example.com/notify"},{name:"method",label:"Method",placeholder:"POST"},{name:"body",label:"Body (JSON)",placeholder:'{"email": "{{entry.data.email}}"}',multiline:!0}],email:[{name:"to",label:"To",placeholder:"{{entry.data.email}}"},{name:"subject",label:"Subject",placeholder:"Your application update"},{name:"template",label:"Body",placeholder:"Your application has been approved.",multiline:!0}]};export const actionEditorView={templateUrl:"/admin/js/templates/action-editor.html",async onMount(e){_=null;const o=window.location.hash.match(/\/actions\/edit\/([^/?#]+)/);o&&(_=o[1]),E.tabs(e.find("#action-editor-tabs").get(0)),await D(e),await J(e),_&&(e.find("#action-editor-title").text("Edit Action"),await P(e,_)),e.find("#add-step-btn").off("click").on("click",()=>{const n=e.find("#add-step-type").val()||"updateField";B(e,{type:n,config:{}})}),e.find("#save-action-btn").off("click").on("click",async()=>{await K(e)}),U(e),Domma.icons.scan()}};async function D(e){const t=e.find("#action-collection").get(0);if(t)try{(await S.collections.list()).forEach(n=>{const i=document.createElement("option");i.value=n.slug,i.textContent=`${n.title} (${n.slug})`,t.appendChild(i)})}catch{}}async function J(e){const t=e.find("#action-roles-checkboxes").get(0);if(!t)return;["admin","manager","editor","subscriber"].forEach(n=>{const i=document.createElement("label");i.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;";const l=document.createElement("input");l.type="checkbox",l.value=n,l.dataset.role=n,l.className="action-role-cb",l.checked=n==="admin",i.appendChild(l),i.appendChild(document.createTextNode(n)),t.appendChild(i)})}async function P(e,t){try{const o=await S.actions.get(t);if(!o){E.toast("Action not found.",{type:"error"}),R.navigate("/actions");return}j(e,o)}catch(o){E.toast(o.message||"Failed to load action.",{type:"error"}),R.navigate("/actions")}}function U(e){const t=e.find("#action-rowlevel-enabled").get(0),o=e.find("#action-rowlevel-config").get(0),n=e.find("#action-rowlevel-mode").get(0),i=e.find("#action-rowlevel-field-group").get(0);t&&(t.addEventListener("change",()=>{o&&(o.style.display=t.checked?"flex":"none")}),n&&n.addEventListener("change",()=>{i&&(i.style.display=n.value==="field"?"":"none")}))}function j(e,t){e.find("#action-title").val(t.title||""),e.find("#action-slug").val(t.slug||""),e.find("#action-description").val(t.description||""),e.find("#action-collection").val(t.collection||""),e.find("#action-trigger-type").val(t.trigger?.type||"manual"),e.find("#action-trigger-label").val(t.trigger?.label||"Run"),e.find("#action-trigger-icon").val(t.trigger?.icon||"zap"),e.find("#action-trigger-confirm").val(t.trigger?.confirmMessage||"");const o=t.access?.roles||["admin"];e.find(".action-role-cb").each(function(){this.checked=o.includes(this.value)});const n=t.access?.rowLevel;n&&(e.find("#action-rowlevel-enabled").prop("checked",!0),e.find("#action-rowlevel-config").css("display","flex"),e.find("#action-rowlevel-mode").val(n.mode||"owner"),e.find("#action-rowlevel-userkey").val(n.userKey||"id"),n.mode==="field"&&(e.find("#action-rowlevel-field-group").css("display",""),e.find("#action-rowlevel-field").val(n.field||"")));const i=e.find("#action-steps-list").get(0);if(i){const l=i.querySelector(".steps-empty-placeholder");for(l&&l.remove();i.firstChild;)i.removeChild(i.firstChild);const a=document.createElement("p");a.className="text-muted steps-empty-placeholder",a.textContent="No steps yet. Add a step to define what this action does.",a.style.cssText="text-align:center;padding:2rem 0;",i.appendChild(a)}(t.steps||[]).forEach(l=>B(e,l))}function B(e,t){const o=e.find("#action-steps-list").get(0);if(!o)return;const n=o.querySelector(".steps-empty-placeholder");n&&n.remove();const i=z[t.type]||[],l=document.createElement("div");l.className="card mb-2 step-card",l.dataset.stepType=t.type;const a=document.createElement("div");a.className="card-header",a.style.cssText="display:flex;align-items:center;gap:.5rem;";const s=document.createElement("code");s.textContent=t.type,s.style.cssText="flex:1;font-size:.85rem;";const p=document.createElement("button");p.type="button",p.className="btn btn-sm btn-danger";const g=document.createElement("span");g.setAttribute("data-icon","trash-2"),p.appendChild(g),p.addEventListener("click",()=>{if(l.remove(),!o.querySelector(".step-card")){const c=document.createElement("p");c.className="text-muted steps-empty-placeholder",c.textContent="No steps yet. Add a step to define what this action does.",c.style.cssText="text-align:center;padding:2rem 0;",o.appendChild(c)}}),a.appendChild(s),a.appendChild(p);const u=document.createElement("div");if(u.className="card-body",i.length===0){const c=document.createElement("p");c.className="text-muted",c.textContent=t.type==="deleteEntry"?"This step deletes the entry. No configuration required.":"No additional configuration required.",c.style.margin="0",u.appendChild(c)}t.type==="updateField"?G(u,t,e):i.forEach(c=>{const h=document.createElement("div");h.style.cssText="margin-bottom:.75rem;";const b=document.createElement("label");b.className="form-label",b.textContent=c.label,h.appendChild(b);let m;c.multiline?(m=document.createElement("textarea"),m.rows=3,m.style.cssText="font-family:monospace;font-size:.8rem;resize:vertical;",m.value=typeof t.config?.[c.name]=="object"?JSON.stringify(t.config[c.name],null,2):t.config?.[c.name]??""):(m=document.createElement("input"),m.type="text",m.value=t.config?.[c.name]??""),m.className=`form-input step-field-${c.name}`,m.placeholder=c.placeholder||"",m.dataset.field=c.name,h.appendChild(m),u.appendChild(h)}),l.appendChild(a),l.appendChild(u),o.appendChild(l),Domma.icons.scan(l)}async function G(e,t,o){const n=o.find("#action-collection").val(),i=document.createElement("div");i.style.cssText="margin-bottom:.75rem;";const l=document.createElement("label");l.className="form-label",l.textContent="Field",i.appendChild(l);const a=document.createElement("select");a.className="form-input step-field-field",a.dataset.field="field";const s=document.createElement("input");s.type="text",s.className="form-input mt-2 step-field-field-custom",s.placeholder="Field name, e.g. status",s.style.display="none";const p=document.createElement("div");p.style.cssText="margin-bottom:.75rem;";const g=document.createElement("label");g.className="form-label",g.textContent="New Value",p.appendChild(g);const u=document.createElement("div");p.appendChild(u);const c=document.createElement("button");c.type="button",c.className="btn btn-ghost btn-sm mt-2",c.style.cssText="font-size:.75rem;padding:.2rem .5rem;",c.textContent="Template Variables";const h=document.createElement("div");h.style.cssText="display:none;background:var(--dm-surface-2,#1e1e2e);border-radius:.4rem;padding:.75rem;margin-top:.5rem;font-size:.8rem;line-height:1.7;";const b=document.createElement("strong");b.textContent="Available template variables:",h.appendChild(b);const m=document.createElement("table");m.style.cssText="width:100%;border-collapse:collapse;margin-top:.4rem;",[["{{now}}","Current ISO timestamp"],["{{user.id}}","Executing user's ID"],["{{user.name}}","Executing user's name"],["{{user.email}}","Executing user's email"],["{{entry.id}}","Entry's unique ID"],["{{entry.data.fieldName}}","Any field value from the entry"],["{{env.CMS_PUBLIC_*}}","Public environment variables"]].forEach(([r,f])=>{const x=document.createElement("tr"),w=document.createElement("td");w.style.cssText="padding:.2rem .5rem .2rem 0;opacity:.7;white-space:nowrap;";const T=document.createElement("code");T.textContent=r,w.appendChild(T);const d=document.createElement("td");d.textContent=f,x.appendChild(w),x.appendChild(d),m.appendChild(x)}),h.appendChild(m),c.addEventListener("click",()=>{const r=h.style.display!=="none";h.style.display=r?"none":"",c.textContent=r?"Template Variables":"Hide Variables"}),p.appendChild(c),p.appendChild(h),e.appendChild(i),e.appendChild(p);let k=[];if(n)try{k=(await S.collections.get(n)).fields||[]}catch{}const F=document.createElement("option");F.value="",F.textContent=k.length?"\u2014 select a field \u2014":"\u2014 no fields available \u2014",a.appendChild(F),k.forEach(r=>{const f=document.createElement("option");f.value=r.name,f.textContent=`${r.label} (${r.name})`,f.dataset.fieldType=r.type,f.dataset.fieldOptions=r.type==="select"?JSON.stringify(r.options||[]):"",a.appendChild(f)});const L=document.createElement("option");L.value="__custom__",L.textContent="\u2014 enter manually \u2014",a.appendChild(L);const C=t.config?.field||"",I=C&&[...a.options].find(r=>r.value===C);I?a.value=C:C&&(a.value="__custom__",s.value=C,s.style.display=""),i.appendChild(a),i.appendChild(s);function V(r,f){u.textContent="";const x=r?[...a.options].find(d=>d.value===r):null,w=x?.dataset.fieldType==="select",T=w?JSON.parse(x.dataset.fieldOptions||"[]"):[];if(w&&T.length){const d=document.createElement("select");d.className="form-input step-field-value",d.dataset.field="value";const O=document.createElement("option");O.value="",O.textContent="\u2014 select a value \u2014",d.appendChild(O),T.forEach(v=>{const N=typeof v=="string"?v:v.value??"",M=typeof v=="string"?v:v.label||v.value||N;if(!N||N==="undefined")return;const A=document.createElement("option");A.value=N,A.textContent=M,d.appendChild(A)});const q=document.createElement("option");q.value="__custom__",q.textContent="\u2014 enter manually \u2014",d.appendChild(q);const y=document.createElement("input");y.type="text",y.className="form-input mt-2",y.placeholder="e.g. approved or {{now}}",y.style.display="none",f&&[...d.options].find(v=>v.value===f&&v.value!=="__custom__")?d.value=f:f&&(d.value="__custom__",y.value=f,y.style.display=""),d.addEventListener("change",()=>{const v=d.value==="__custom__";y.style.display=v?"":"none",v||(y.value="")}),u.appendChild(d),u.appendChild(y)}else{const d=document.createElement("input");d.type="text",d.className="form-input step-field-value",d.dataset.field="value",d.placeholder="e.g. approved or {{now}}",d.value=f||"",u.appendChild(d)}}V(I?C:null,t.config?.value||""),a.addEventListener("change",()=>{const r=a.value==="__custom__";s.style.display=r?"":"none",r||(s.value=""),V(r?null:a.value,"")})}function H(e){const t=[];return e.find(".step-card").each(function(){const o=this.dataset.stepType,n={};if(o==="updateField"){let l=this.querySelector(".step-field-field")?.value?.trim()||"";l==="__custom__"&&(l=this.querySelector(".step-field-field-custom")?.value?.trim()||""),n.field=l;const a=this.querySelector(".step-field-value");let s=a?.value?.trim()||"";s==="__custom__"&&(s=a?.nextElementSibling?.value?.trim()||""),n.value=s}else(z[o]||[]).forEach(l=>{const a=this.querySelector(`.step-field-${l.name}`);if(!a)return;const s=a.value.trim();if(l.multiline&&s)try{n[l.name]=JSON.parse(s)}catch{n[l.name]=s}else n[l.name]=s});t.push({type:o,config:n})}),t}async function K(e){const t=e.find("#action-title").val().trim();if(!t){E.toast("Title is required.",{type:"warning"});return}const o=e.find("#action-collection").val();if(!o){E.toast("Target collection is required (General tab).",{type:"warning"});return}const n=[];e.find(".action-role-cb:checked").each(function(){n.push(this.value)});const i=e.find("#action-rowlevel-enabled").is(":checked");let l=null;if(i){const p=e.find("#action-rowlevel-mode").val()||"owner",g=e.find("#action-rowlevel-userkey").val()||"id";if(l={mode:p,userKey:g},p==="field"){const u=e.find("#action-rowlevel-field").val().trim();if(!u){E.toast("Field name is required for Field Match mode.",{type:"warning"});return}l.field=u}}const a={title:t,slug:e.find("#action-slug").val().trim()||void 0,description:e.find("#action-description").val().trim(),collection:o,trigger:{type:e.find("#action-trigger-type").val()||"manual",label:e.find("#action-trigger-label").val().trim()||"Run",icon:e.find("#action-trigger-icon").val().trim()||"zap",confirmMessage:e.find("#action-trigger-confirm").val().trim()||null},steps:H(e),access:{roles:n,rowLevel:l}},s=e.find("#save-action-btn").get(0);s&&(s.disabled=!0);try{if(_)await S.actions.update(_,a),E.toast("Action updated.",{type:"success"});else{const p=await S.actions.create(a);E.toast("Action created.",{type:"success"}),R.navigate(`/actions/edit/${p.slug}`)}}catch(p){E.toast(p.message||"Failed to save action.",{type:"error"})}finally{s&&(s.disabled=!1)}}

package/admin/js/views/actions-list.js

@@ -0,0 +1 @@
+import{api as i}from"../api.js";function a(o){return String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}export const actionsListView={templateUrl:"/admin/js/templates/actions-list.html",async onMount(o){await r(o),o.find("#create-action-btn").off("click").on("click",()=>{R.navigate("/actions/new")}),Domma.icons.scan()}};async function r(o){let s=[];try{s=await i.actions.list(),o.find("#actions-pro-notice").hide()}catch(e){e.message?.includes("MongoDB")||e.message?.includes("pro mode")||e.message?.includes("connection")?o.find("#actions-pro-notice").show():E.toast("Could not load actions.",{type:"error"})}T.create("#actions-table",{data:s,columns:[{key:"title",title:"Title",render:(e,t)=>{const n=document.createElement("a");return n.href=`#/actions/edit/${a(t.slug)}`,n.textContent=e,n.style.fontWeight="600",n.outerHTML}},{key:"slug",title:"Slug",render:e=>`<code>${a(e)}</code>`},{key:"collection",title:"Collection",render:e=>`<code>${a(e||"\u2014")}</code>`},{key:"trigger",title:"Trigger",render:e=>a(e?.label||e?.type||"manual")},{key:"steps",title:"Steps",render:e=>String(Array.isArray(e)?e.length:0)},{key:"access",title:"Roles",render:e=>(e?.roles||[]).map(t=>`<span class="badge badge-secondary">${a(t)}</span>`).join(" ")},{key:"slug",title:"Actions",render:e=>{const t=document.createElement("div");t.style.cssText="display:flex;gap:.4rem;justify-content:flex-end;";const n=document.createElement("a");n.href=`#/actions/edit/${a(e)}`,n.className="btn btn-sm btn-primary",n.textContent="Edit";const c=document.createElement("button");return c.className="btn btn-sm btn-danger js-delete-action",c.dataset.slug=e,c.textContent="Delete",t.appendChild(n),t.appendChild(c),t.outerHTML}}],emptyMessage:'No actions yet. Click "New Action" to create your first action.'}),document.querySelectorAll(".js-delete-action").forEach(e=>{e.addEventListener("click",async()=>{const t=e.dataset.slug;if(await E.confirm(`Delete action "${t}"? This cannot be undone.`))try{await i.actions.delete(t),E.toast("Action deleted.",{type:"success"}),await r(o)}catch{E.toast("Failed to delete action.",{type:"error"})}})}),Domma.icons.scan()}

package/admin/js/views/api-reference.js

@@ -0,0 +1 @@
+export const apiReferenceView={templateUrl:"/admin/js/templates/api-reference.html",async onMount(e){Domma.icons.scan(),Domma.syntax.scan()}};

package/admin/js/views/block-editor.js

@@ -0,0 +1,8 @@
+import{api as p}from"../api.js";let d=null;export const blockEditorView={templateUrl:"/admin/js/templates/block-editor.html",async onMount(e){d=null;const s=window.location.hash.match(/\/blocks\/edit\/([^/?#]+)/);s&&(d=decodeURIComponent(s[1]));const i=e.find("#block-name").get(0),n=e.find("#block-content").get(0);if(d){e.find("#block-editor-title").text("Edit Block"),i&&(i.value=d,i.disabled=!0);try{const c=await p.blocks.get(d);n&&(n.value=c.content||"")}catch(c){E.toast(c.message||"Block not found.",{type:"error"}),R.navigate("/blocks");return}}n&&(v(n,e),w(n,e)),e.find("#save-block-btn").off("click").on("click",async()=>{await L(e)}),Domma.icons.scan()}};function v(e,t){const s=t.find("#block-line-numbers").get(0),i=t.find("#block-cursor-pos").get(0);function n(){const l=e.value.split(`
+`).length;s.textContent=Array.from({length:l},(o,r)=>r+1).join(`
+`),s.scrollTop=e.scrollTop}n(),e.addEventListener("input",n),e.addEventListener("scroll",()=>{s.scrollTop=e.scrollTop});function c(){if(!i)return;const o=e.value.slice(0,e.selectionStart).split(`
+`);i.textContent=`Ln ${o.length}, Col ${o[o.length-1].length+1}`}e.addEventListener("keyup",c),e.addEventListener("click",c),e.addEventListener("keydown",l=>{if(l.key==="Tab"){l.preventDefault();const o=e.selectionStart,r=e.selectionEnd;if(!l.shiftKey)e.value=e.value.slice(0,o)+"  "+e.value.slice(r),e.selectionStart=e.selectionEnd=o+2;else{const a=e.value.lastIndexOf(`
+`,o-1)+1,m=e.value.slice(a,a+2),f=m==="  "?2:m[0]===" "?1:0;f>0&&(e.value=e.value.slice(0,a)+e.value.slice(a+f),e.selectionStart=e.selectionEnd=Math.max(a,o-f))}e.dispatchEvent(new Event("input"))}if(l.key==="Enter"){l.preventDefault();const o=e.selectionStart,r=e.value.lastIndexOf(`
+`,o-1)+1,a=e.value.slice(r,o).match(/^(\s*)/)[1];e.value=e.value.slice(0,o)+`
+`+a+e.value.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=o+1+a.length,e.dispatchEvent(new Event("input"))}});const u=t.find("#block-editor-toolbar").get(0);u&&u.addEventListener("click",l=>{const o=l.target.closest("[data-action]");o&&(b(o.dataset.action,e),e.focus())})}function b(e,t){switch(e){case"undo":document.execCommand("undo");break;case"redo":document.execCommand("redo");break;case"cut":t.selectionStart!==t.selectionEnd&&(navigator.clipboard.writeText(t.value.slice(t.selectionStart,t.selectionEnd)).catch(()=>{}),document.execCommand("cut"));break;case"copy":t.selectionStart!==t.selectionEnd&&navigator.clipboard.writeText(t.value.slice(t.selectionStart,t.selectionEnd)).catch(()=>{});break;case"paste":navigator.clipboard.readText().then(s=>{const i=t.selectionStart;t.value=t.value.slice(0,i)+s+t.value.slice(t.selectionEnd),t.selectionStart=t.selectionEnd=i+s.length,t.dispatchEvent(new Event("input"))}).catch(()=>E.toast("Use Ctrl+V to paste.",{type:"info"}));break;case"select-all":t.select();break;case"format":g(t);break}}function g(e){const t=e.value.match(/(<[^>]+>|[^<]+)/g)||[],s=[];let i=0;const n="  ";for(const l of t){const o=l.trim();if(o)if(o.startsWith("</"))i=Math.max(0,i-1),s.push(n.repeat(i)+o);else if(o.startsWith("<")&&!o.startsWith("<!")&&!o.endsWith("/>")){s.push(n.repeat(i)+o);const r=(o.match(/^<(\w+)/)||[])[1]||"";k.has(r.toLowerCase())||i++}else s.push(n.repeat(i)+o)}const c=s.join(`
+`),u=e.selectionStart;e.value=c,e.selectionStart=e.selectionEnd=Math.min(u,c.length),e.dispatchEvent(new Event("input"))}const k=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]);function w(e,t){const s=t.find("#block-editor-body").get(0),i=t.find("#block-sample-data").get(0),n=t.find("#block-preview-output");t.find("[data-mode]").each(function(){this.addEventListener("click",()=>{t.find("[data-mode]").each(function(){this.classList.remove("active")}),this.classList.add("active"),s.className=`editor-body editor-mode-${this.dataset.mode}`,this.dataset.mode!=="write"&&c()})}),e.addEventListener("input",()=>{h(i,e),c()}),e.value.trim()&&h(i,e);function c(){if(!!s.classList.contains("editor-mode-write"))return;const l=e.value.replace(/\{\{([\w_]+)\}\}/g,(o,r)=>{const a=i.querySelector(`[data-placeholder="${CSS.escape(r)}"]`);return C(a?.value??`[${r}]`)});n.html(l,{safe:!1}),Domma.icons.scan(n.get(0))}i._renderPreview=c}function h(e,t){const s=y(t.value),i=new Set([...e.querySelectorAll("[data-placeholder]")].map(n=>n.dataset.placeholder));if(s.size>0&&e.querySelector("p.text-muted")?.remove(),s.forEach(n=>{i.has(n)||S(e,n)}),e.querySelectorAll("[data-placeholder]").forEach(n=>{s.has(n.dataset.placeholder)||n.closest(".block-sample-row")?.remove()}),s.size===0&&!e.querySelector("p.text-muted")){const n=document.createElement("p");n.className="text-muted",n.style.cssText="font-size:.8rem;margin:0;",n.textContent="No {{placeholders}} detected in template.",e.appendChild(n)}}function S(e,t){const s=document.createElement("div");s.className="block-sample-row",s.style.cssText="display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;";const i=document.createElement("label");i.style.cssText="font-size:.75rem;color:var(--dm-text-muted,#888);white-space:nowrap;min-width:90px;text-align:right;flex-shrink:0;",i.textContent=`{{${t}}}`;const n=document.createElement("input");n.type="text",n.className="form-input form-input--sm",n.style.flex="1",n.dataset.placeholder=t,n.placeholder=`Sample ${t}`,n.value=x(t),n.addEventListener("input",()=>{e._renderPreview&&e._renderPreview()}),s.appendChild(i),s.appendChild(n),e.appendChild(s)}function x(e){const t=e.toLowerCase();return t==="_id"?"a1b2c3d4-e5f6-7890-abcd-ef1234567890":t==="_createdat"?new Date().toISOString():t==="_updatedat"?new Date().toISOString():t.includes("email")?"user@example.com":t.includes("phone")?"+44 7700 900000":t.includes("name")?"Jane Smith":t.includes("title")?"Sample Title":t.includes("message")||t.includes("content")||t.includes("description")?"This is a sample value for preview purposes.":t.includes("rating")?"excellent":t.includes("status")?"active":t.includes("priority")?"high":t.includes("date")?new Date().toLocaleDateString():t.includes("tag")?"tag1, tag2":t.includes("subject")?"Sample Subject":t.includes("category")?"general":`Sample ${e}`}function y(e){const t=new Set;for(const[,s]of e.matchAll(/\{\{([\w_]+)\}\}/g))t.add(s);return t}function C(e){return String(e??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}async function L(e){const t=e.find("#block-name").get(0),s=e.find("#block-content").get(0),i=(t?.value||"").trim(),n=s?.value??"";if(!i){E.toast("Block name is required.",{type:"warning"});return}if(!/^[a-z0-9][a-z0-9-]*$/.test(i)){E.toast("Name must start with a letter or digit and contain only lowercase letters, digits, and hyphens.",{type:"warning"});return}const c=e.find("#save-block-btn").get(0);c&&(c.disabled=!0);try{await p.blocks.put(i,{content:n}),E.toast(d?"Block updated.":"Block created.",{type:"success"}),d||(d=i,R.navigate(`/blocks/edit/${encodeURIComponent(i)}`))}catch(u){E.toast(u.message||"Failed to save block.",{type:"error"})}finally{c&&(c.disabled=!1)}}

package/admin/js/views/blocks.js

@@ -0,0 +1,4 @@
+import{api as o}from"../api.js";function l(t){return String(t??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}export const blocksView={templateUrl:"/admin/js/templates/blocks.html",async onMount(t){await s(t),Domma.icons.scan()}};async function s(t){const a=t.find("#blocks-table-container").get(0);if(!a)return;let c=[];try{c=await o.blocks.list()}catch(e){a.innerHTML="";const n=document.createElement("p");n.className="text-muted",n.textContent=`Failed to load blocks: ${e.message}`,a.appendChild(n);return}T.create(a,{data:c,emptyMessage:'No blocks yet. Click "New Block" to create your first template.',columns:[{key:"name",title:"Name",render:e=>`<a href="#/blocks/edit/${l(e)}">${l(e)}.html</a>`},{key:"size",title:"Size",render:e=>`${e} B`},{key:"updatedAt",title:"Updated",render:e=>e?new Date(e).toLocaleString():"\u2014"},{key:"name",title:"Actions",render:e=>{const n=l(e);return`<div style="display:flex;gap:.4rem;justify-content:flex-end;">
+                        <a href="#/blocks/edit/${n}" class="btn btn-sm btn-primary">Edit</a>
+                        <button class="btn btn-sm btn-danger js-delete-block" data-name="${n}">Delete</button>
+                    </div>`}}]}),a.querySelectorAll(".js-delete-block").forEach(e=>{e.addEventListener("click",async()=>{await r(e.dataset.name,t)})}),Domma.icons.scan(a)}async function r(t,a){if(await E.confirm(`Delete block "${t}"? This cannot be undone.`))try{await o.blocks.delete(t),E.toast("Block deleted.",{type:"success"}),await s(a)}catch(e){E.toast(e.message||"Failed to delete block.",{type:"error"})}}

package/admin/js/views/collection-editor.js

@@ -1,3 +1,3 @@
-import{api as O}from"../api.js";const j=[{value:"string",label:"Text (single line)"},{value:"email",label:"Email"},{value:"tel",label:"Phone"},{value:"number",label:"Number"},{value:"textarea",label:"Textarea (multi-line)"},{value:"select",label:"Dropdown (select)"},{value:"radio",label:"Radio buttons"},{value:"checkbox",label:"Single checkbox"},{value:"checkbox-group",label:"Checkbox group"},{value:"date",label:"Date"},{value:"time",label:"Time"},{value:"url",label:"URL"},{value:"hidden",label:"Hidden field"}],U=new Set(["select","radio","checkbox-group"]),G=["public","subscriber","editor","manager","admin"],H=["create","read","update","delete"];let m=[],N=null,w=!0;function M(e){return e.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")}function V(e){return j.find(t=>t.value===e)?.label||e}function J(e){const t={...m[e]},c=document.getElementById(`fb-label-${e}`),s=document.getElementById(`fb-name-${e}`),p=document.getElementById(`fb-type-${e}`),i=document.getElementById(`fb-required-${e}`),l=document.getElementById(`fb-placeholder-${e}`),n=document.getElementById(`fb-helper-${e}`);if(c&&(t.label=c.value.trim()||t.label),s&&(t.name=s.value.trim()||t.name),p&&(t.type=p.value||t.type),i&&(t.required=i.checked),l&&(t.placeholder=l.value.trim()),n&&(t.helper=n.value.trim()),U.has(t.type)){const o=document.getElementById(`fb-options-${e}`);o&&(t.options=o.value.split(`
-`).filter(a=>a.trim()).map(a=>{const[r,...u]=a.split(":");return{value:r.trim(),label:u.join(":").trim()||r.trim()}}))}return t}function Y(){return m.map((e,t)=>J(t))}function K(e,t){const c=document.createElement("div");c.className="fb-field-card",c.dataset.index=t,c.style.cssText="border:1px solid var(--border-color,#333);border-radius:8px;margin-bottom:.75rem;overflow:hidden;";const s=document.createElement("div");s.className="fb-field-header",s.style.cssText="display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;background:var(--card-header-bg,rgba(255,255,255,.03));cursor:pointer;user-select:none;";const p=document.createElement("span");p.textContent="\u283F",p.style.cssText="cursor:grab;opacity:.4;font-size:1.1rem;";const i=document.createElement("span");i.className="fb-field-summary",i.style.cssText="flex:1;font-weight:500;font-size:.9rem;",i.textContent=e.label||"(Untitled field)";const l=document.createElement("span");l.style.cssText="font-size:.75rem;opacity:.5;",l.textContent=V(e.type);const n=document.createElement("span");n.className="fb-field-chevron",n.textContent="\u25BE",n.style.cssText="opacity:.5;transition:transform .2s;";const o=document.createElement("button");o.type="button",o.textContent="\xD7",o.className="btn btn-sm",o.style.cssText="padding:.15rem .45rem;line-height:1;font-size:1rem;opacity:.6;",o.title="Remove field",o.addEventListener("click",d=>{d.stopPropagation(),m.splice(t,1),_(document.getElementById("fields-list"))}),s.appendChild(p),s.appendChild(i),s.appendChild(l),s.appendChild(n),s.appendChild(o);const a=document.createElement("div");a.className="fb-field-body",a.style.cssText="padding:.75rem;display:none;";const r=document.createElement("div");r.style.cssText="display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-bottom:.6rem;";const u=document.createElement("div"),f=document.createElement("label");f.className="form-label",f.textContent="Label";const b=document.createElement("input");b.id=`fb-label-${t}`,b.type="text",b.className="form-input",b.value=e.label||"",b.addEventListener("input",()=>{i.textContent=b.value.trim()||"(Untitled field)";const d=document.getElementById(`fb-name-${t}`);d&&!d.dataset.manual&&(d.value=M(b.value).replace(/-/g,"_"))}),u.appendChild(f),u.appendChild(b);const S=document.createElement("div"),q=document.createElement("label");q.className="form-label",q.textContent="Name (key)";const h=document.createElement("input");h.id=`fb-name-${t}`,h.type="text",h.className="form-input",h.value=e.name||"",h.addEventListener("input",()=>{h.dataset.manual="1"}),S.appendChild(q),S.appendChild(h);const A=document.createElement("div"),B=document.createElement("label");B.className="form-label",B.textContent="Type";const g=document.createElement("select");g.id=`fb-type-${t}`,g.className="form-input",j.forEach(d=>{const I=document.createElement("option");I.value=d.value,I.textContent=d.label,d.value===e.type&&(I.selected=!0),g.appendChild(I)}),g.addEventListener("change",()=>{l.textContent=V(g.value);const d=a.querySelector(".fb-options-wrap");d&&(d.style.display=U.has(g.value)?"":"none")}),A.appendChild(B),A.appendChild(g),r.appendChild(u),r.appendChild(S),r.appendChild(A);const y=document.createElement("div");y.style.cssText="display:grid;grid-template-columns:1fr 1fr auto;gap:.6rem;align-items:end;margin-bottom:.6rem;";const F=document.createElement("div"),$=document.createElement("label");$.className="form-label",$.textContent="Placeholder";const v=document.createElement("input");v.id=`fb-placeholder-${t}`,v.type="text",v.className="form-input",v.value=e.placeholder||"",F.appendChild($),F.appendChild(v);const W=document.createElement("div"),z=document.createElement("label");z.className="form-label",z.textContent="Helper text";const C=document.createElement("input");C.id=`fb-helper-${t}`,C.type="text",C.className="form-input",C.value=e.helper||"",W.appendChild(z),W.appendChild(C);const P=document.createElement("div");P.style.cssText="padding-bottom:.35rem;";const L=document.createElement("label");L.style.cssText="display:flex;align-items:center;gap:.4rem;cursor:pointer;white-space:nowrap;";const k=document.createElement("input");k.id=`fb-required-${t}`,k.type="checkbox",k.checked=!!e.required,L.appendChild(k),L.appendChild(document.createTextNode("Required")),P.appendChild(L),y.appendChild(F),y.appendChild(W),y.appendChild(P);const x=document.createElement("div");x.className="fb-options-wrap",x.style.display=U.has(e.type)?"":"none";const D=document.createElement("label");D.className="form-label",D.textContent="Options (one per line: value: Label)";const T=document.createElement("textarea");return T.id=`fb-options-${t}`,T.className="form-input",T.rows=4,T.value=(e.options||[]).map(d=>`${d.value}: ${d.label}`).join(`
-`),x.appendChild(D),x.appendChild(T),a.appendChild(r),a.appendChild(y),a.appendChild(x),s.addEventListener("click",()=>{const d=a.style.display!=="none";a.style.display=d?"none":"",n.style.transform=d?"":"rotate(180deg)"}),c.appendChild(s),c.appendChild(a),c}function _(e){if(e){if(e.textContent="",m.length===0){const t=document.createElement("p");t.className="text-muted",t.id="fields-empty-msg",t.style.cssText="text-align:center;padding:2rem 0;",t.textContent='No fields yet. Click "Add Field" to get started.',e.appendChild(t);return}m.forEach((t,c)=>{e.appendChild(K(t,c))})}}function Q(e,t){t.textContent="",H.forEach(c=>{const s=e?.[c]||{enabled:!1,access:"admin"},p=document.createElement("div");p.style.cssText="display:grid;grid-template-columns:140px 1fr 160px;gap:.75rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border-color,#333);";const i=document.createElement("strong");i.textContent=c.charAt(0).toUpperCase()+c.slice(1),i.style.cssText="font-size:.9rem;";const l=document.createElement("label");l.style.cssText="display:flex;align-items:center;gap:.45rem;cursor:pointer;font-size:.875rem;";const n=document.createElement("input");n.type="checkbox",n.id=`api-${c}-enabled`,n.checked=!!s.enabled,l.appendChild(n),l.appendChild(document.createTextNode("Enable public access"));const o=document.createElement("select");o.id=`api-${c}-access`,o.className="form-input",G.forEach(a=>{const r=document.createElement("option");r.value=a,r.textContent=a.charAt(0).toUpperCase()+a.slice(1),a===s.access&&(r.selected=!0),o.appendChild(r)}),p.appendChild(i),p.appendChild(l),p.appendChild(o),t.appendChild(p)})}function X(){const e={};return H.forEach(t=>{const c=document.getElementById(`api-${t}-enabled`)?.checked??!1,s=document.getElementById(`api-${t}-access`)?.value||"admin";e[t]={enabled:c,access:s}}),e}export const collectionEditorView={templateUrl:"/admin/js/templates/collection-editor.html",async onMount(e){m=[],N=null,w=!0;const c=window.location.hash.match(/\/collections\/edit\/([^/?#]+)/);c&&(N=c[1],w=!1),E.tabs(e.find("#collection-tabs").get(0));const s=e.find("#fields-list").get(0),p=e.find("#api-access-rows").get(0);let i={create:{enabled:!1,access:"admin"},read:{enabled:!0,access:"public"},update:{enabled:!1,access:"admin"},delete:{enabled:!1,access:"admin"}};if(w){const l=e.find("#field-title").get(0),n=e.find("#field-slug").get(0);l&&n&&(l.addEventListener("input",()=>{n.dataset.manual||(n.value=M(l.value))}),n.addEventListener("input",()=>{n.dataset.manual="1"}))}else try{const l=await O.collections.get(N);if(!l){E.toast("Collection not found.",{type:"error"}),R.navigate("/collections");return}const n=e.find("#editor-title-text").get(0);n&&(n.textContent=l.title),e.find("#field-title").val(l.title||""),e.find("#field-slug").val(l.slug||""),e.find("#field-slug").prop("readonly",!0),e.find("#slug-hint").get(0).textContent="Slug cannot be changed after creation.",e.find("#field-description").val(l.description||""),m=l.fields||[],i=l.api||i}catch{E.toast("Failed to load collection.",{type:"error"}),R.navigate("/collections");return}_(s),Q(i,p),e.find("#add-field-btn").off("click").on("click",()=>{m=Y(),m.push({id:`field-${Date.now()}`,name:"",label:"",type:"string",required:!1,placeholder:"",helper:"",options:[],validation:[],logic:null}),_(s);const l=s.querySelectorAll(".fb-field-card");if(l.length){const n=l[l.length-1],o=n.querySelector(".fb-field-body"),a=n.querySelector(".fb-field-chevron");o&&(o.style.display=""),a&&(a.style.transform="rotate(180deg)"),n.querySelector(`#fb-label-${m.length-1}`)?.focus()}}),e.find("#save-collection-btn").off("click").on("click",async()=>{const l=e.find("#field-title").val().trim(),n=e.find("#field-slug").val().trim(),o=e.find("#field-description").val().trim();if(!l){E.toast("Title is required.",{type:"warning"});return}const a=Y(),r=X(),u=e.find("#save-collection-btn");u.prop("disabled",!0);try{if(w){const f=await O.collections.create({title:l,slug:n,description:o,fields:a,api:r});N=f.slug,w=!1,E.toast("Collection created.",{type:"success"}),R.navigate(`/collections/edit/${f.slug}`)}else await O.collections.update(N,{title:l,description:o,fields:a,api:r}),E.toast("Collection saved.",{type:"success"})}catch(f){E.toast(f.message||"Failed to save.",{type:"error"})}finally{u.prop("disabled",!1)}}),Domma.icons.scan()}};
+import{api as D}from"../api.js";const Q=[{value:"string",label:"Text (single line)"},{value:"email",label:"Email"},{value:"tel",label:"Phone"},{value:"number",label:"Number"},{value:"textarea",label:"Textarea (multi-line)"},{value:"select",label:"Dropdown (select)"},{value:"radio",label:"Radio buttons"},{value:"checkbox",label:"Single checkbox"},{value:"checkbox-group",label:"Checkbox group"},{value:"date",label:"Date"},{value:"time",label:"Time"},{value:"url",label:"URL"},{value:"hidden",label:"Hidden field"}],J=new Set(["select","radio","checkbox-group"]),le=["public","subscriber","editor","manager","admin"],X=["create","read","update","delete"];let f=[],x=null,T=!0;function Z(e){return e.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")}function $(e){return Q.find(t=>t.value===e)?.label||e}function ne(e){const t={...f[e]},o=document.getElementById(`fb-label-${e}`),n=document.getElementById(`fb-name-${e}`),i=document.getElementById(`fb-type-${e}`),p=document.getElementById(`fb-required-${e}`),r=document.getElementById(`fb-placeholder-${e}`),l=document.getElementById(`fb-helper-${e}`);if(o&&(t.label=o.value.trim()||t.label),n&&(t.name=n.value.trim()||t.name),i&&(t.type=i.value||t.type),p&&(t.required=p.checked),r&&(t.placeholder=r.value.trim()),l&&(t.helper=l.value.trim()),J.has(t.type)){const c=document.getElementById(`fb-options-${e}`);c&&(t.options=c.value.split(`
+`).filter(u=>u.trim()).map(u=>{const[g,...m]=u.split(":");return{value:g.trim(),label:m.join(":").trim()||g.trim()}}))}const a=document.getElementById(`fb-span-${e}`);if(document.getElementById(`fb-fullwidth-${e}`)?.checked)t.fullWidth=!0,delete t.span;else{delete t.fullWidth;const c=parseInt(a?.value,10);c>1?t.span=c:delete t.span}return t}function ee(){return f.map((e,t)=>ne(t))}function ae(e,t){const o=document.createElement("div");o.className="fb-field-card",o.dataset.index=t,o.style.cssText="border:1px solid var(--border-color,#333);border-radius:8px;margin-bottom:.75rem;overflow:hidden;";const n=document.createElement("div");n.className="fb-field-header",n.style.cssText="display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;background:var(--card-header-bg,rgba(255,255,255,.03));cursor:pointer;user-select:none;";const i=document.createElement("span");i.textContent="\u283F",i.style.cssText="cursor:grab;opacity:.4;font-size:1.1rem;";const p=document.createElement("span");p.className="fb-field-summary",p.style.cssText="flex:1;font-weight:500;font-size:.9rem;",p.textContent=e.label||"(Untitled field)";const r=document.createElement("span");r.style.cssText="font-size:.75rem;opacity:.5;",r.textContent=$(e.type);const l=document.createElement("span");l.className="fb-field-chevron",l.textContent="\u25BE",l.style.cssText="opacity:.5;transition:transform .2s;";const a=document.createElement("button");a.type="button",a.textContent="\xD7",a.className="btn btn-sm",a.style.cssText="padding:.15rem .45rem;line-height:1;font-size:1rem;opacity:.6;",a.title="Remove field",a.addEventListener("click",d=>{d.stopPropagation(),f.splice(t,1),K(document.getElementById("fields-list"))}),n.appendChild(i),n.appendChild(p),n.appendChild(r),n.appendChild(l),n.appendChild(a);const s=document.createElement("div");s.className="fb-field-body",s.style.cssText="padding:.75rem;display:none;";const c=document.createElement("div");c.style.cssText="display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-bottom:.6rem;";const u=document.createElement("div"),g=document.createElement("label");g.className="form-label",g.textContent="Label";const m=document.createElement("input");m.id=`fb-label-${t}`,m.type="text",m.className="form-input",m.value=e.label||"",m.addEventListener("input",()=>{p.textContent=m.value.trim()||"(Untitled field)";const d=document.getElementById(`fb-name-${t}`);d&&!d.dataset.manual&&(d.value=Z(m.value).replace(/-/g,"_"))}),u.appendChild(g),u.appendChild(m);const w=document.createElement("div"),h=document.createElement("label");h.className="form-label",h.textContent="Name (key)";const y=document.createElement("input");y.id=`fb-name-${t}`,y.type="text",y.className="form-input",y.value=e.name||"",y.addEventListener("input",()=>{y.dataset.manual="1"}),w.appendChild(h),w.appendChild(y);const z=document.createElement("div"),P=document.createElement("label");P.className="form-label",P.textContent="Type";const v=document.createElement("select");v.id=`fb-type-${t}`,v.className="form-input",Q.forEach(d=>{const F=document.createElement("option");F.value=d.value,F.textContent=d.label,d.value===e.type&&(F.selected=!0),v.appendChild(F)}),v.addEventListener("change",()=>{r.textContent=$(v.value);const d=s.querySelector(".fb-options-wrap");d&&(d.style.display=J.has(v.value)?"":"none")}),z.appendChild(P),z.appendChild(v),c.appendChild(u),c.appendChild(w),c.appendChild(z);const N=document.createElement("div");N.style.cssText="display:grid;grid-template-columns:1fr 1fr auto;gap:.6rem;align-items:end;margin-bottom:.6rem;";const O=document.createElement("div"),U=document.createElement("label");U.className="form-label",U.textContent="Placeholder";const I=document.createElement("input");I.id=`fb-placeholder-${t}`,I.type="text",I.className="form-input",I.value=e.placeholder||"",O.appendChild(U),O.appendChild(I);const M=document.createElement("div"),_=document.createElement("label");_.className="form-label",_.textContent="Helper text";const k=document.createElement("input");k.id=`fb-helper-${t}`,k.type="text",k.className="form-input",k.value=e.helper||"",M.appendChild(_),M.appendChild(k);const j=document.createElement("div");j.style.cssText="padding-bottom:.35rem;";const B=document.createElement("label");B.style.cssText="display:flex;align-items:center;gap:.4rem;cursor:pointer;white-space:nowrap;";const q=document.createElement("input");q.id=`fb-required-${t}`,q.type="checkbox",q.checked=!!e.required,B.appendChild(q),B.appendChild(document.createTextNode("Required")),j.appendChild(B),N.appendChild(O),N.appendChild(M),N.appendChild(j);const L=document.createElement("div");L.className="fb-options-wrap",L.style.display=J.has(e.type)?"":"none";const V=document.createElement("label");V.className="form-label",V.textContent="Options (one per line: value: Label)";const S=document.createElement("textarea");S.id=`fb-options-${t}`,S.className="form-input",S.rows=4,S.value=(e.options||[]).map(d=>typeof d=="string"?`${d}: ${d}`:`${d.value??""}: ${d.label??d.value??""}`).join(`
+`),L.appendChild(V),L.appendChild(S);const b=document.createElement("div");b.className="fb-grid-row",b.style.gridTemplateColumns="1fr auto",b.style.gap=".6rem",b.style.alignItems="end",b.style.marginBottom=".6rem",b.style.display=document.getElementById("collection-layout")?.value==="grid"?"grid":"none";const H=document.createElement("div"),Y=document.createElement("label");Y.className="form-label",Y.textContent="Column Span";const C=document.createElement("input");C.id=`fb-span-${t}`,C.type="number",C.className="form-input",C.min="1",C.max="6",C.value=e.span>1?String(e.span):"1",H.appendChild(Y),H.appendChild(C);const G=document.createElement("div");G.style.cssText="padding-bottom:.35rem;";const W=document.createElement("label");W.style.cssText="display:flex;align-items:center;gap:.4rem;cursor:pointer;white-space:nowrap;";const A=document.createElement("input");return A.id=`fb-fullwidth-${t}`,A.type="checkbox",A.checked=!!e.fullWidth,W.appendChild(A),W.appendChild(document.createTextNode("Full Width")),G.appendChild(W),b.appendChild(H),b.appendChild(G),s.appendChild(c),s.appendChild(N),s.appendChild(L),s.appendChild(b),n.addEventListener("click",()=>{const d=s.style.display!=="none";s.style.display=d?"none":"",l.style.transform=d?"":"rotate(180deg)"}),o.appendChild(n),o.appendChild(s),o}function K(e){if(e){if(e.textContent="",f.length===0){const t=document.createElement("p");t.className="text-muted",t.id="fields-empty-msg",t.style.cssText="text-align:center;padding:2rem 0;",t.textContent='No fields yet. Click "Add Field" to get started.',e.appendChild(t);return}f.forEach((t,o)=>{e.appendChild(ae(t,o))})}}function oe(e,t){t.textContent="",X.forEach(o=>{const n=e?.[o]||{enabled:!1,access:"admin"},i=document.createElement("div");i.style.cssText="display:grid;grid-template-columns:140px 1fr 160px;gap:.75rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border-color,#333);";const p=document.createElement("strong");p.textContent=o.charAt(0).toUpperCase()+o.slice(1),p.style.cssText="font-size:.9rem;";const r=document.createElement("label");r.style.cssText="display:flex;align-items:center;gap:.45rem;cursor:pointer;font-size:.875rem;";const l=document.createElement("input");l.type="checkbox",l.id=`api-${o}-enabled`,l.checked=!!n.enabled,r.appendChild(l),r.appendChild(document.createTextNode("Enable public access"));const a=document.createElement("select");a.id=`api-${o}-access`,a.className="form-input",le.forEach(s=>{const c=document.createElement("option");c.value=s,c.textContent=s.charAt(0).toUpperCase()+s.slice(1),s===n.access&&(c.selected=!0),a.appendChild(c)}),i.appendChild(p),i.appendChild(r),i.appendChild(a),t.appendChild(i)})}function se(e,t){E.dropdown("#storage-adapter-trigger",{items:[{label:"File (default)",value:"file"},{label:"MongoDB",value:"mongodb"}],onSelect:({item:n})=>{e.find("#storage-adapter").val(n.value),e.find("#storage-adapter-label").text(n.label);const i=n.value==="mongodb";e.find("#storage-connection-group").toggle(i),e.find("#storage-migration-warning").toggle(i&&!T)}});const o=t.map(n=>({label:n,value:n}));E.dropdown("#storage-connection-trigger",{items:o.length?o:[{label:"default",value:"default"}],onSelect:({item:n})=>{e.find("#storage-connection").val(n.value),e.find("#storage-connection-label").text(n.label)}})}function te(){return(document.getElementById("storage-adapter")?.value||"file")==="mongodb"?{adapter:"mongodb",connection:document.getElementById("storage-connection")?.value||"default"}:{adapter:"file"}}function ce(){const e={};return X.forEach(t=>{const o=document.getElementById(`api-${t}-enabled`)?.checked??!1,n=document.getElementById(`api-${t}-access`)?.value||"admin";e[t]={enabled:o,access:n}}),e}export const collectionEditorView={templateUrl:"/admin/js/templates/collection-editor.html",async onMount(e){f=[],x=null,T=!0;const o=window.location.hash.match(/\/collections\/edit\/([^/?#]+)/);o&&(x=o[1],T=!1),E.tabs(e.find("#collection-tabs").get(0)),e.find("#collection-layout").get(0)?.addEventListener("change",function(){const l=this.value==="grid";e.find("#collection-columns-group").get(0).style.display=l?"":"none",document.querySelectorAll(".fb-grid-row").forEach(a=>{a.style.display=l?"grid":"none"})});const n=e.find("#fields-list").get(0),i=e.find("#api-access-rows").get(0),p=await D.collections.proStatus();p?.pro&&x!=="roles"&&(e.find("#storage-tab-btn").show(),se(e,p.connections));let r={create:{enabled:!1,access:"admin"},read:{enabled:!0,access:"public"},update:{enabled:!1,access:"admin"},delete:{enabled:!1,access:"admin"}};if(T){const l=e.find("#field-title").get(0),a=e.find("#field-slug").get(0);l&&a&&(l.addEventListener("input",()=>{a.dataset.manual||(a.value=Z(l.value))}),a.addEventListener("input",()=>{a.dataset.manual="1"}))}else try{const l=await D.collections.get(x);if(!l){E.toast("Collection not found.",{type:"error"}),R.navigate("/collections");return}const a=e.find("#editor-title-text").get(0);a&&(a.textContent=l.title),e.find("#field-title").val(l.title||""),e.find("#field-slug").val(l.slug||""),e.find("#field-slug").prop("readonly",!0),e.find("#slug-hint").get(0).textContent="Slug cannot be changed after creation.",e.find("#field-description").val(l.description||""),e.find("#collection-layout").val(l.layout||"stacked"),e.find("#collection-columns").val(l.columns||2),e.find("#collection-columns-group").get(0).style.display=l.layout==="grid"?"":"none",f=l.fields||[],r=l.api||r,l.storage&&(e.find("#storage-adapter").val(l.storage.adapter||"file"),e.find("#storage-adapter-label").text(l.storage.adapter==="mongodb"?"MongoDB":"File (default)"),l.storage.adapter==="mongodb"&&(e.find("#storage-connection-group").show(),e.find("#storage-connection").val(l.storage.connection||"default"),e.find("#storage-connection-label").text(l.storage.connection||"default"))),x==="roles"&&e.find("#storage-tab-btn").hide()}catch{E.toast("Failed to load collection.",{type:"error"}),R.navigate("/collections");return}K(n),oe(r,i),e.find("#add-field-btn").off("click").on("click",()=>{f=ee(),f.push({id:`field-${Date.now()}`,name:"",label:"",type:"string",required:!1,placeholder:"",helper:"",options:[],validation:[],logic:null}),K(n);const l=n.querySelectorAll(".fb-field-card");if(l.length){const a=l[l.length-1],s=a.querySelector(".fb-field-body"),c=a.querySelector(".fb-field-chevron");s&&(s.style.display=""),c&&(c.style.transform="rotate(180deg)"),a.querySelector(`#fb-label-${f.length-1}`)?.focus()}}),e.find("#save-collection-btn").off("click").on("click",async()=>{const l=e.find("#field-title").val().trim(),a=e.find("#field-slug").val().trim(),s=e.find("#field-description").val().trim();if(!l){E.toast("Title is required.",{type:"warning"});return}const c=ee(),u=ce(),g=e.find("#collection-layout").val()||"stacked",m=parseInt(e.find("#collection-columns").val(),10)||2,w=e.find("#save-collection-btn");w.prop("disabled",!0);try{if(T){const h=await D.collections.create({title:l,slug:a,description:s,layout:g,columns:m,fields:c,api:u,storage:te()});x=h.slug,T=!1,E.toast("Collection created.",{type:"success"}),R.navigate(`/collections/edit/${h.slug}`)}else await D.collections.update(x,{title:l,description:s,layout:g,columns:m,fields:c,api:u,storage:te()}),E.toast("Collection saved.",{type:"success"})}catch(h){E.toast(h.message||"Failed to save.",{type:"error"})}finally{w.prop("disabled",!1)}}),Domma.icons.scan()}};