domma-cms 0.36.0 → 0.36.2

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

@@ -33,13 +33,13 @@
                 style="font-size:.65rem;opacity:.6;margin-left:.1rem;">▾</span>
             </button>
             <div id="add-element-menu"
-                 style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--card-bg,#1e1e2e);border:1px solid var(--border-color,#333);border-radius:6px;min-width:140px;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.3);overflow:hidden;">
+                 style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--dm-card-bg,#1e1e2e);border:1px solid var(--dm-border,#333);border-radius:6px;min-width:140px;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.3);overflow:hidden;">
               <button id="add-field-btn" type="button"
-                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border,#333);">
                 Field
               </button>
               <button id="add-spacer-btn" type="button"
-                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border,#333);">
                 Spacer
               </button>
               <button id="add-page-break-btn" type="button"
@@ -61,7 +61,7 @@
         <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
           <h2><span data-icon="eye"></span> Preview</h2>
           <span id="preview-test-badge"
-                style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:rgba(99,102,241,.15);color:var(--primary,#6366f1);">Test Mode — submissions are stored</span>
+                style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:rgba(99,102,241,.15);color:var(--dm-primary,#6366f1);">Test Mode — submissions are stored</span>
         </div>
         <div class="card-body">
           <div id="preview-container"></div>

package/admin/js/templates/form-submissions.html

@@ -17,7 +17,7 @@
     <div class="card-body" style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;">
         <input id="sub-search" type="text" class="form-input" placeholder="Search submissions…" style="flex:1;min-width:200px;">
         <input id="sub-date-from" type="date" class="form-input" style="width:auto;">
-        <span style="color:var(--text-muted,#888);">to</span>
+        <span style="color:var(--dm-text-muted,#888);">to</span>
         <input id="sub-date-to" type="date" class="form-input" style="width:auto;">
         <span id="sub-count" class="text-muted" style="white-space:nowrap;font-size:.85rem;"></span>
     </div>

package/admin/js/templates/forms.html

@@ -1,17 +1,17 @@
-<div class="view-header">
-    <h1><span data-icon="layout"></span> Forms</h1>
-    <div style="display:flex;gap:.5rem;">
-        <button id="test-email-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="mail"></span> Test Email
-        </button>
-        <button id="create-form-btn" class="btn btn-primary">
-            <span data-icon="plus"></span> Create Form
-        </button>
-    </div>
-</div>
-
-<div class="card">
-    <div class="card-body">
-        <div id="forms-table"></div>
-    </div>
-</div>
+<div class="view-header">
+    <h1><span data-icon="layout"></span> Forms</h1>
+    <div style="display:flex;gap:.5rem;">
+        <button id="test-email-btn" class="btn btn-ghost btn-sm">
+            <span data-icon="mail"></span> Test Email
+        </button>
+        <button id="create-form-btn" class="btn btn-primary">
+            <span data-icon="plus"></span> Create Form
+        </button>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="forms-table"></div>
+    </div>
+</div>

package/admin/js/templates/my-profile.html

@@ -1,17 +1,17 @@
-<div class="view-header">
-    <h1><span data-icon="user"></span> My Profile</h1>
-</div>
-
-<div class="card">
-    <div class="card-header"><h2>Account</h2></div>
-    <div class="card-body">
-        <div id="account-form-container"></div>
-    </div>
-</div>
-
-<div class="card mt-4" id="profile-card" style="display:none;">
-    <div class="card-header"><h2>Profile</h2></div>
-    <div class="card-body">
-        <div id="profile-form-container"></div>
-    </div>
-</div>
+<div class="view-header">
+    <h1><span data-icon="user"></span> My Profile</h1>
+</div>
+
+<div class="card">
+    <div class="card-header"><h2>Account</h2></div>
+    <div class="card-body">
+        <div id="account-form-container"></div>
+    </div>
+</div>
+
+<div class="card mt-4" id="profile-card" style="display:none;">
+    <div class="card-header"><h2>Profile</h2></div>
+    <div class="card-body">
+        <div id="profile-form-container"></div>
+    </div>
+</div>

package/admin/js/templates/navigation.html

@@ -63,7 +63,7 @@
         <p class="form-hint">Icon uses Domma icon names (e.g. <code>star</code>, <code>home</code>, <code>bolt</code>).
             Logo URL overrides the icon when set. Leave both blank for text-only brand.</p>
 
-        <hr style="margin: 1.25rem 0; border-color: var(--border-color, rgba(255,255,255,.1));">
+        <hr style="margin: 1.25rem 0; border-color: var(--dm-border, rgba(255,255,255,.1));">
         <h3 style="font-size:.9rem;font-weight:600;margin-bottom:1rem;opacity:.7;text-transform:uppercase;letter-spacing:.05em;">
             Admin Panel</h3>
         <div class="row">
@@ -192,7 +192,7 @@
     </div>
 
     <div class="tab-panel">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));">
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));">
             <span class="text-muted" style="font-size:.85rem;">Add and arrange navbar menu items.</span>
             <button id="add-nav-item" class="btn btn-sm btn-outline"><span data-icon="plus"></span> Add Item</button>
     </div>
@@ -208,7 +208,7 @@
     </div>
 
     <div class="tab-panel">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));">
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));">
             <span class="text-muted" style="font-size:.85rem;">Links shown in the site footer.</span>
             <button id="add-footer-link" class="btn btn-sm btn-outline"><span data-icon="plus"></span> Add Link</button>
         </div>

package/admin/js/templates/notifications.html

@@ -6,7 +6,7 @@
     <div id="notif-list"></div>
 
     <div id="notif-empty" hidden class="card">
-        <div class="card-body" style="text-align:center;padding:3rem;color:var(--dm-color-text-muted)">
+        <div class="card-body" style="text-align:center;padding:3rem;color:var(--dm-text-muted)">
             <span data-icon="check-circle" style="font-size:2rem;display:block;margin-bottom:.5rem"></span>
             <p>No notifications — you're all caught up.</p>
         </div>

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

@@ -178,7 +178,7 @@
               <h3 style="margin:0;font-size:1rem;">Version History</h3>
               <div style="display:flex;gap:.5rem;align-items:center;">
                   <button class="btn btn-ghost btn-sm" id="history-delete-selected-btn"
-                          style="display:none;color:var(--dm-text-danger,#e55);">
+                          style="display:none;color:var(--dm-danger,#e55);">
                       <span data-icon="trash"></span> Delete Selected
                   </button>
                   <button class="btn btn-ghost btn-sm" id="history-save-named-btn">
@@ -202,13 +202,13 @@
                       <p style="font-size:.8rem;font-weight:600;margin-bottom:.5rem;color:var(--dm-text-muted);">
                           SELECTED VERSION</p>
                       <pre id="version-compare-old"
-                           style="background:var(--dm-surface-subtle);padding:1rem;border-radius:6px;overflow:auto;white-space:pre-wrap;font-size:.8rem;max-height:60vh;"></pre>
+                           style="background:var(--dm-background-alt);padding:1rem;border-radius:6px;overflow:auto;white-space:pre-wrap;font-size:.8rem;max-height:60vh;"></pre>
                   </div>
                   <div class="col">
                       <p style="font-size:.8rem;font-weight:600;margin-bottom:.5rem;color:var(--dm-text-muted);">CURRENT
                           (UNSAVED)</p>
                       <pre id="version-compare-new"
-                           style="background:var(--dm-surface-subtle);padding:1rem;border-radius:6px;overflow:auto;white-space:pre-wrap;font-size:.8rem;max-height:60vh;"></pre>
+                           style="background:var(--dm-background-alt);padding:1rem;border-radius:6px;overflow:auto;white-space:pre-wrap;font-size:.8rem;max-height:60vh;"></pre>
                   </div>
               </div>
           </div>

package/admin/js/templates/project-detail.html

@@ -7,11 +7,11 @@
         gap: 1.25rem;
         align-items: flex-start;
         padding: 1.5rem;
-        border: 1px solid var(--border-color, rgba(255,255,255,.08));
+        border: 1px solid var(--dm-border, rgba(255,255,255,.08));
         border-radius: 14px;
         background:
-            radial-gradient(120% 160% at 0% 0%, rgba(91,140,255,.12), transparent 55%),
-            var(--card-bg, rgba(255,255,255,.04));
+            radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--dm-primary) 12%, transparent), transparent 55%),
+            var(--dm-card-bg, rgba(255,255,255,.04));
         position: relative;
         overflow: hidden;
     }
@@ -20,16 +20,16 @@
         position: absolute;
         top: 0; bottom: 0; left: 0;
         width: 4px;
-        background: linear-gradient(180deg, #5b8cff, #7c6af7);
+        background: linear-gradient(180deg, var(--dm-primary), var(--dm-primary-dark));
     }
     .pd-hero-icon {
         width: 64px; height: 64px;
         flex-shrink: 0;
         border-radius: 16px;
         display: flex; align-items: center; justify-content: center;
-        background: linear-gradient(135deg, rgba(91,140,255,.28), rgba(124,106,247,.28));
-        color: #cfe0ff;
-        box-shadow: 0 6px 18px rgba(91,140,255,.18);
+        background: linear-gradient(135deg, color-mix(in srgb, var(--dm-primary) 28%, transparent), color-mix(in srgb, var(--dm-primary-dark) 28%, transparent));
+        color: var(--dm-primary);
+        box-shadow: 0 6px 18px color-mix(in srgb, var(--dm-primary) 18%, transparent);
     }
     .pd-hero-icon svg, .pd-hero-icon span[data-icon] { width: 32px; height: 32px; }
     .pd-hero-main { flex: 1; min-width: 0; }
@@ -39,7 +39,7 @@
     }
     .pd-title { font-size: 1.6rem; font-weight: 700; margin: 0; line-height: 1.15; }
     .pd-actions { display: flex; gap: .5rem; flex-shrink: 0; }
-    .pd-desc { color: var(--text-muted, #888); margin: .5rem 0 0; max-width: 64ch; }
+    .pd-desc { color: var(--dm-text-muted, #888); margin: .5rem 0 0; max-width: 64ch; }
     .pd-desc:empty { display: none; }
 
     /* ── Meta badges ──────────────────────────────────────────────────── */
@@ -52,7 +52,7 @@
         border: 1px solid transparent;
     }
     .pd-meta-badge svg, .pd-meta-badge span[data-icon] { width: 14px; height: 14px; }
-    .pd-meta-k { color: var(--text-muted, #999); font-weight: 500; }
+    .pd-meta-k { color: var(--dm-text-muted, #999); font-weight: 500; }
     .pd-meta-v { font-weight: 600; }
 
     /* ── Section header ───────────────────────────────────────────────── */
@@ -65,10 +65,10 @@
         display: flex; align-items: center; gap: .5rem;
     }
     .pd-section-title svg, .pd-section-title span[data-icon] {
-        width: 17px; height: 17px; color: var(--text-muted, #888);
+        width: 17px; height: 17px; color: var(--dm-text-muted, #888);
     }
-    .pd-total { font-size: .8rem; color: var(--text-muted, #888); }
-    .pd-hint { color: var(--text-muted, #888); margin: 0 0 .9rem; font-size: .82rem; }
+    .pd-total { font-size: .8rem; color: var(--dm-text-muted, #888); }
+    .pd-hint { color: var(--dm-text-muted, #888); margin: 0 0 .9rem; font-size: .82rem; }
 
     /* ── Artefact stat tiles (each with a + to create one) ────────────── */
     .pd-tiles {
@@ -78,15 +78,15 @@
     }
     .pd-tile {
         position: relative;
-        border: 1px solid var(--border-color, rgba(255,255,255,.08));
+        border: 1px solid var(--dm-border, rgba(255,255,255,.08));
         border-left: 3px solid var(--c, #5b8cff);
         border-radius: 11px;
-        background: var(--card-bg, rgba(255,255,255,.04));
+        background: var(--dm-card-bg, rgba(255,255,255,.04));
         transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
     }
     .pd-tile--link:hover {
         transform: translateY(-2px);
-        box-shadow: 0 8px 22px rgba(0,0,0,.22);
+        box-shadow: var(--dm-shadow-lg);
         border-color: var(--c, #5b8cff);
     }
     .pd-tile-link {
@@ -104,15 +104,15 @@
     .pd-tile-body { display: flex; flex-direction: column; min-width: 0; }
     .pd-tile-count { font-size: 1.5rem; font-weight: 700; line-height: 1; }
     .pd-tile-label {
-        font-size: .78rem; color: var(--text-muted, #888);
+        font-size: .78rem; color: var(--dm-text-muted, #888);
         margin-top: .2rem; text-transform: uppercase; letter-spacing: .03em;
     }
     .pd-tile-add {
         position: absolute; top: 8px; right: 8px;
         width: 26px; height: 26px; border-radius: 7px;
         display: flex; align-items: center; justify-content: center;
-        border: 1px solid var(--border-color, rgba(255,255,255,.12));
-        background: var(--card-bg, rgba(255,255,255,.05));
+        border: 1px solid var(--dm-border, rgba(255,255,255,.12));
+        background: var(--dm-card-bg, rgba(255,255,255,.05));
         color: var(--c, #5b8cff);
         cursor: pointer; opacity: .7;
         transition: opacity .14s ease, background .14s ease, border-color .14s ease, transform .14s ease;
@@ -120,7 +120,7 @@
     .pd-tile-add:hover {
         opacity: 1; transform: scale(1.08);
         border-color: var(--c, #5b8cff);
-        background: rgba(255,255,255,.09);
+        background: var(--dm-hover-bg);
     }
     .pd-tile-add svg, .pd-tile-add span[data-icon] { width: 15px; height: 15px; }
 </style>

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

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

package/admin/js/templates/roles.html

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

package/admin/js/templates/settings.html

@@ -226,7 +226,7 @@
           <input id="field-smtp-from-name" type="text" class="form-input" placeholder="My Website">
         </div>
       </div>
-      <div style="border-top:1px solid var(--border-color,#333);padding-top:1rem;">
+      <div style="border-top:1px solid var(--dm-border,#333);padding-top:1rem;">
         <p class="form-label" style="margin-bottom:.5rem;">Send Test Email</p>
         <p class="text-muted" style="font-size:.8rem;margin-bottom:.75rem;">Save your SMTP settings first, then send a test to verify the configuration.</p>
         <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
@@ -421,27 +421,27 @@
                 <!-- 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;">
+                       style="display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--dm-border,rgba(255,255,255,.1));border-radius:10px;overflow:hidden;background:var(--dm-border,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;">
+                            style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--dm-text-muted,#888);border-right:1px solid var(--dm-border,rgba(255,255,255,.08));border-bottom:1px solid var(--dm-border,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;">
+                            style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--dm-text-muted,#888);border-bottom:1px solid var(--dm-border,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;">
+                            style="display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--dm-text-muted,#888);border-right:1px solid var(--dm-border,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;">
+                            style="display:flex;flex-direction:column;align-items:flex-end;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.78rem;color:var(--dm-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>

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

@@ -1 +1 @@
-import{api as _}from"../api.js";let N=null,O={};async function D(e){const t=e.find("#action-project").get(0);if(t)try{(await _.projects.list()).forEach(a=>{const n=document.createElement("option");n.value=a.slug,n.textContent=a.name||a.slug,t.appendChild(n)})}catch{}}const $={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){N=null,O={};const t=window.location.hash.match(/\/actions\/edit\/([^/?#]+)/);t&&(N=t[1]),E.tabs(e.find("#action-editor-tabs").get(0)),await I(e),await P(e),await D(e),N&&(e.find("#action-editor-title").text("Edit Action"),await B(e,N)),e.find("#add-step-btn").off("click").on("click",()=>{const l=e.find("#add-step-type").val()||"updateField";J(e,{type:l,config:{}})}),e.find("#save-action-btn").off("click").on("click",async()=>{await Y(e)}),U(e),Domma.icons.scan()}};async function I(e){const t=e.find("#action-collection").get(0);if(t)try{(await _.collections.list()).forEach(l=>{const a=document.createElement("option");a.value=l.slug,a.textContent=`${l.title} (${l.slug})`,t.appendChild(a)})}catch{}}async function P(e){const t=e.find("#action-roles-checkboxes").get(0);t&&["admin","manager","editor","subscriber"].forEach(l=>{const a=document.createElement("label");a.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;";const n=document.createElement("input");n.type="checkbox",n.value=l,n.dataset.role=l,n.className="action-role-cb",n.checked=l==="admin",a.appendChild(n),a.appendChild(document.createTextNode(l)),t.appendChild(a)})}async function B(e,t){try{const l=await _.actions.get(t);if(!l){E.toast("Action not found.",{type:"error"}),R.navigate("/actions");return}K(e,l)}catch(l){E.toast(l.message||"Failed to load action.",{type:"error"}),R.navigate("/actions")}}function U(e){const t=e.find("#action-rowlevel-enabled").get(0),l=e.find("#action-rowlevel-config").get(0),a=e.find("#action-rowlevel-mode").get(0),n=e.find("#action-rowlevel-field-group").get(0);t&&(t.addEventListener("change",()=>{l&&(l.style.display=t.checked?"flex":"none")}),a&&a.addEventListener("change",()=>{n&&(n.style.display=a.value==="field"?"":"none")}))}function K(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||""),O=t.meta||{},e.find("#action-project").val(t.meta?.project||""),e.find("#action-bundled").prop("checked",!!t.bundled),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 l=t.access?.roles||["admin"];e.find(".action-role-cb").each(function(){this.checked=l.includes(this.value)});const a=t.access?.rowLevel;a&&(e.find("#action-rowlevel-enabled").prop("checked",!0),e.find("#action-rowlevel-config").css("display","flex"),e.find("#action-rowlevel-mode").val(a.mode||"owner"),e.find("#action-rowlevel-userkey").val(a.userKey||"id"),a.mode==="field"&&(e.find("#action-rowlevel-field-group").css("display",""),e.find("#action-rowlevel-field").val(a.field||"")));const n=e.find("#action-steps-list").get(0);if(n){const c=n.querySelector(".steps-empty-placeholder");for(c&&c.remove();n.firstChild;)n.removeChild(n.firstChild);const i=document.createElement("p");i.className="text-muted steps-empty-placeholder",i.textContent="No steps yet. Add a step to define what this action does.",i.style.cssText="text-align:center;padding:2rem 0;",n.appendChild(i)}(t.steps||[]).forEach(c=>J(e,c))}function J(e,t){const l=e.find("#action-steps-list").get(0);if(!l)return;const a=l.querySelector(".steps-empty-placeholder");a&&a.remove();const n=$[t.type]||[],c=document.createElement("div");c.className="card mb-2 step-card",c.dataset.stepType=t.type;const i=document.createElement("div");i.className="card-header",i.style.cssText="display:flex;align-items:center;gap:.5rem;";const p=document.createElement("code");p.textContent=t.type,p.style.cssText="flex:1;font-size:.85rem;";const r=document.createElement("button");r.type="button",r.className="btn btn-sm btn-danger";const f=document.createElement("span");f.setAttribute("data-icon","trash"),r.appendChild(f),r.addEventListener("click",()=>{if(c.remove(),!l.querySelector(".step-card")){const o=document.createElement("p");o.className="text-muted steps-empty-placeholder",o.textContent="No steps yet. Add a step to define what this action does.",o.style.cssText="text-align:center;padding:2rem 0;",l.appendChild(o)}}),i.appendChild(p),i.appendChild(r);const h=document.createElement("div");if(h.className="card-body",n.length===0){const o=document.createElement("p");o.className="text-muted",o.textContent=t.type==="deleteEntry"?"This step deletes the entry. No configuration required.":"No additional configuration required.",o.style.margin="0",h.appendChild(o)}t.type==="updateField"?G(h,t,e):n.forEach(o=>{const g=document.createElement("div");g.style.cssText="margin-bottom:.75rem;";const b=document.createElement("label");b.className="form-label",b.textContent=o.label,g.appendChild(b);let m;o.multiline?(m=document.createElement("textarea"),m.rows=3,m.style.cssText="font-family:monospace;font-size:.8rem;resize:vertical;",m.value=typeof t.config?.[o.name]=="object"?JSON.stringify(t.config[o.name],null,2):t.config?.[o.name]??""):(m=document.createElement("input"),m.type="text",m.value=t.config?.[o.name]??""),m.className=`form-input step-field-${o.name}`,m.placeholder=o.placeholder||"",m.dataset.field=o.name,g.appendChild(m),h.appendChild(g)}),c.appendChild(i),c.appendChild(h),l.appendChild(c),Domma.icons.scan(c)}async function G(e,t,l){const a=l.find("#action-collection").val(),n=document.createElement("div");n.style.cssText="margin-bottom:.75rem;";const c=document.createElement("label");c.className="form-label",c.textContent="Field",n.appendChild(c);const i=document.createElement("select");i.className="form-input step-field-field",i.dataset.field="field";const p=document.createElement("input");p.type="text",p.className="form-input mt-2 step-field-field-custom",p.placeholder="Field name, e.g. status",p.style.display="none";const r=document.createElement("div");r.style.cssText="margin-bottom:.75rem;";const f=document.createElement("label");f.className="form-label",f.textContent="New Value",r.appendChild(f);const h=document.createElement("div");r.appendChild(h);const o=document.createElement("button");o.type="button",o.className="btn btn-ghost btn-sm mt-2",o.style.cssText="font-size:.75rem;padding:.2rem .5rem;",o.textContent="Template Variables";const g=document.createElement("div");g.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:",g.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(([d,u])=>{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=d,w.appendChild(T);const s=document.createElement("td");s.textContent=u,x.appendChild(w),x.appendChild(s),m.appendChild(x)}),g.appendChild(m),o.addEventListener("click",()=>{const d=g.style.display!=="none";g.style.display=d?"none":"",o.textContent=d?"Template Variables":"Hide Variables"}),r.appendChild(o),r.appendChild(g),e.appendChild(n),e.appendChild(r);let S=[];if(a)try{S=(await _.collections.get(a)).fields||[]}catch{}const j=document.createElement("option");j.value="",j.textContent=S.length?"\u2014 select a field \u2014":"\u2014 no fields available \u2014",i.appendChild(j),S.forEach(d=>{const u=document.createElement("option");u.value=d.name,u.textContent=`${d.label} (${d.name})`,u.dataset.fieldType=d.type,u.dataset.fieldOptions=d.type==="select"?JSON.stringify(d.options||[]):"",i.appendChild(u)});const q=document.createElement("option");q.value="__custom__",q.textContent="\u2014 enter manually \u2014",i.appendChild(q);const C=t.config?.field||"",z=C&&[...i.options].find(d=>d.value===C);z?i.value=C:C&&(i.value="__custom__",p.value=C,p.style.display=""),n.appendChild(i),n.appendChild(p);function M(d,u){h.textContent="";const x=d?[...i.options].find(s=>s.value===d):null,w=x?.dataset.fieldType==="select",T=w?JSON.parse(x.dataset.fieldOptions||"[]"):[];if(w&&T.length){const s=document.createElement("select");s.className="form-input step-field-value",s.dataset.field="value";const A=document.createElement("option");A.value="",A.textContent="\u2014 select a value \u2014",s.appendChild(A),T.forEach(y=>{const k=typeof y=="string"?y:y.value??"",V=typeof y=="string"?y:y.label||y.value||k;if(!k||k==="undefined")return;const F=document.createElement("option");F.value=k,F.textContent=V,s.appendChild(F)});const L=document.createElement("option");L.value="__custom__",L.textContent="\u2014 enter manually \u2014",s.appendChild(L);const v=document.createElement("input");v.type="text",v.className="form-input mt-2",v.placeholder="e.g. approved or {{now}}",v.style.display="none",u&&[...s.options].find(y=>y.value===u&&y.value!=="__custom__")?s.value=u:u&&(s.value="__custom__",v.value=u,v.style.display=""),s.addEventListener("change",()=>{const y=s.value==="__custom__";v.style.display=y?"":"none",y||(v.value="")}),h.appendChild(s),h.appendChild(v)}else{const s=document.createElement("input");s.type="text",s.className="form-input step-field-value",s.dataset.field="value",s.placeholder="e.g. approved or {{now}}",s.value=u||"",h.appendChild(s)}}M(z?C:null,t.config?.value||""),i.addEventListener("change",()=>{const d=i.value==="__custom__";p.style.display=d?"":"none",d||(p.value=""),M(d?null:i.value,"")})}function H(e){const t=[];return e.find(".step-card").each(function(){const l=this.dataset.stepType,a={};if(l==="updateField"){let n=this.querySelector(".step-field-field")?.value?.trim()||"";n==="__custom__"&&(n=this.querySelector(".step-field-field-custom")?.value?.trim()||""),a.field=n;const c=this.querySelector(".step-field-value");let i=c?.value?.trim()||"";i==="__custom__"&&(i=c?.nextElementSibling?.value?.trim()||""),a.value=i}else($[l]||[]).forEach(n=>{const c=this.querySelector(`.step-field-${n.name}`);if(!c)return;const i=c.value.trim();if(n.multiline&&i)try{a[n.name]=JSON.parse(i)}catch{a[n.name]=i}else a[n.name]=i});t.push({type:l,config:a})}),t}async function Y(e){const t=e.find("#action-title").val().trim();if(!t){E.toast("Title is required.",{type:"warning"});return}const l=e.find("#action-collection").val();if(!l){E.toast("Target collection is required (General tab).",{type:"warning"});return}const a=[];e.find(".action-role-cb:checked").each(function(){a.push(this.value)});const n=e.find("#action-rowlevel-enabled").is(":checked");let c=null;if(n){const f=e.find("#action-rowlevel-mode").val()||"owner",h=e.find("#action-rowlevel-userkey").val()||"id";if(c={mode:f,userKey:h},f==="field"){const o=e.find("#action-rowlevel-field").val().trim();if(!o){E.toast("Field name is required for Field Match mode.",{type:"warning"});return}c.field=o}}const i=e.find("#action-project").val()||"",p={title:t,slug:e.find("#action-slug").val().trim()||void 0,description:e.find("#action-description").val().trim(),collection:l,...e.find("#action-bundled").is(":checked")?{bundled:!0}:{},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:a,rowLevel:c},meta:{...O||{},project:i||null}},r=e.find("#save-action-btn").get(0);r&&(r.disabled=!0);try{if(N)await _.actions.update(N,p),E.toast("Action updated.",{type:"success"});else{const f=await _.actions.create(p);E.toast("Action created.",{type:"success"}),R.navigate(`/actions/edit/${f.slug}`)}}catch(f){E.toast(f.message||"Failed to save action.",{type:"error"})}finally{r&&(r.disabled=!1)}}
+import{api as _}from"../api.js";let N=null,O={};async function D(e){const t=e.find("#action-project").get(0);if(t)try{(await _.projects.list()).forEach(a=>{const n=document.createElement("option");n.value=a.slug,n.textContent=a.name||a.slug,t.appendChild(n)})}catch{}}const $={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){N=null,O={};const t=window.location.hash.match(/\/actions\/edit\/([^/?#]+)/);t&&(N=t[1]),E.tabs(e.find("#action-editor-tabs").get(0)),await I(e),await P(e),await D(e),N&&(e.find("#action-editor-title").text("Edit Action"),await B(e,N)),e.find("#add-step-btn").off("click").on("click",()=>{const l=e.find("#add-step-type").val()||"updateField";J(e,{type:l,config:{}})}),e.find("#save-action-btn").off("click").on("click",async()=>{await Y(e)}),U(e),Domma.icons.scan()}};async function I(e){const t=e.find("#action-collection").get(0);if(t)try{(await _.collections.list()).forEach(l=>{const a=document.createElement("option");a.value=l.slug,a.textContent=`${l.title} (${l.slug})`,t.appendChild(a)})}catch{}}async function P(e){const t=e.find("#action-roles-checkboxes").get(0);t&&["admin","manager","editor","subscriber"].forEach(l=>{const a=document.createElement("label");a.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;";const n=document.createElement("input");n.type="checkbox",n.value=l,n.dataset.role=l,n.className="action-role-cb",n.checked=l==="admin",a.appendChild(n),a.appendChild(document.createTextNode(l)),t.appendChild(a)})}async function B(e,t){try{const l=await _.actions.get(t);if(!l){E.toast("Action not found.",{type:"error"}),R.navigate("/actions");return}K(e,l)}catch(l){E.toast(l.message||"Failed to load action.",{type:"error"}),R.navigate("/actions")}}function U(e){const t=e.find("#action-rowlevel-enabled").get(0),l=e.find("#action-rowlevel-config").get(0),a=e.find("#action-rowlevel-mode").get(0),n=e.find("#action-rowlevel-field-group").get(0);t&&(t.addEventListener("change",()=>{l&&(l.style.display=t.checked?"flex":"none")}),a&&a.addEventListener("change",()=>{n&&(n.style.display=a.value==="field"?"":"none")}))}function K(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||""),O=t.meta||{},e.find("#action-project").val(t.meta?.project||""),e.find("#action-bundled").prop("checked",!!t.bundled),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 l=t.access?.roles||["admin"];e.find(".action-role-cb").each(function(){this.checked=l.includes(this.value)});const a=t.access?.rowLevel;a&&(e.find("#action-rowlevel-enabled").prop("checked",!0),e.find("#action-rowlevel-config").css("display","flex"),e.find("#action-rowlevel-mode").val(a.mode||"owner"),e.find("#action-rowlevel-userkey").val(a.userKey||"id"),a.mode==="field"&&(e.find("#action-rowlevel-field-group").css("display",""),e.find("#action-rowlevel-field").val(a.field||"")));const n=e.find("#action-steps-list").get(0);if(n){const c=n.querySelector(".steps-empty-placeholder");for(c&&c.remove();n.firstChild;)n.removeChild(n.firstChild);const i=document.createElement("p");i.className="text-muted steps-empty-placeholder",i.textContent="No steps yet. Add a step to define what this action does.",i.style.cssText="text-align:center;padding:2rem 0;",n.appendChild(i)}(t.steps||[]).forEach(c=>J(e,c))}function J(e,t){const l=e.find("#action-steps-list").get(0);if(!l)return;const a=l.querySelector(".steps-empty-placeholder");a&&a.remove();const n=$[t.type]||[],c=document.createElement("div");c.className="card mb-2 step-card",c.dataset.stepType=t.type;const i=document.createElement("div");i.className="card-header",i.style.cssText="display:flex;align-items:center;gap:.5rem;";const p=document.createElement("code");p.textContent=t.type,p.style.cssText="flex:1;font-size:.85rem;";const r=document.createElement("button");r.type="button",r.className="btn btn-sm btn-danger";const f=document.createElement("span");f.setAttribute("data-icon","trash"),r.appendChild(f),r.addEventListener("click",()=>{if(c.remove(),!l.querySelector(".step-card")){const o=document.createElement("p");o.className="text-muted steps-empty-placeholder",o.textContent="No steps yet. Add a step to define what this action does.",o.style.cssText="text-align:center;padding:2rem 0;",l.appendChild(o)}}),i.appendChild(p),i.appendChild(r);const h=document.createElement("div");if(h.className="card-body",n.length===0){const o=document.createElement("p");o.className="text-muted",o.textContent=t.type==="deleteEntry"?"This step deletes the entry. No configuration required.":"No additional configuration required.",o.style.margin="0",h.appendChild(o)}t.type==="updateField"?G(h,t,e):n.forEach(o=>{const g=document.createElement("div");g.style.cssText="margin-bottom:.75rem;";const b=document.createElement("label");b.className="form-label",b.textContent=o.label,g.appendChild(b);let m;o.multiline?(m=document.createElement("textarea"),m.rows=3,m.style.cssText="font-family:monospace;font-size:.8rem;resize:vertical;",m.value=typeof t.config?.[o.name]=="object"?JSON.stringify(t.config[o.name],null,2):t.config?.[o.name]??""):(m=document.createElement("input"),m.type="text",m.value=t.config?.[o.name]??""),m.className=`form-input step-field-${o.name}`,m.placeholder=o.placeholder||"",m.dataset.field=o.name,g.appendChild(m),h.appendChild(g)}),c.appendChild(i),c.appendChild(h),l.appendChild(c),Domma.icons.scan(c)}async function G(e,t,l){const a=l.find("#action-collection").val(),n=document.createElement("div");n.style.cssText="margin-bottom:.75rem;";const c=document.createElement("label");c.className="form-label",c.textContent="Field",n.appendChild(c);const i=document.createElement("select");i.className="form-input step-field-field",i.dataset.field="field";const p=document.createElement("input");p.type="text",p.className="form-input mt-2 step-field-field-custom",p.placeholder="Field name, e.g. status",p.style.display="none";const r=document.createElement("div");r.style.cssText="margin-bottom:.75rem;";const f=document.createElement("label");f.className="form-label",f.textContent="New Value",r.appendChild(f);const h=document.createElement("div");r.appendChild(h);const o=document.createElement("button");o.type="button",o.className="btn btn-ghost btn-sm mt-2",o.style.cssText="font-size:.75rem;padding:.2rem .5rem;",o.textContent="Template Variables";const g=document.createElement("div");g.style.cssText="display:none;background:var(--dm-surface-raised,#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:",g.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(([d,u])=>{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=d,w.appendChild(T);const s=document.createElement("td");s.textContent=u,x.appendChild(w),x.appendChild(s),m.appendChild(x)}),g.appendChild(m),o.addEventListener("click",()=>{const d=g.style.display!=="none";g.style.display=d?"none":"",o.textContent=d?"Template Variables":"Hide Variables"}),r.appendChild(o),r.appendChild(g),e.appendChild(n),e.appendChild(r);let S=[];if(a)try{S=(await _.collections.get(a)).fields||[]}catch{}const j=document.createElement("option");j.value="",j.textContent=S.length?"\u2014 select a field \u2014":"\u2014 no fields available \u2014",i.appendChild(j),S.forEach(d=>{const u=document.createElement("option");u.value=d.name,u.textContent=`${d.label} (${d.name})`,u.dataset.fieldType=d.type,u.dataset.fieldOptions=d.type==="select"?JSON.stringify(d.options||[]):"",i.appendChild(u)});const q=document.createElement("option");q.value="__custom__",q.textContent="\u2014 enter manually \u2014",i.appendChild(q);const C=t.config?.field||"",z=C&&[...i.options].find(d=>d.value===C);z?i.value=C:C&&(i.value="__custom__",p.value=C,p.style.display=""),n.appendChild(i),n.appendChild(p);function M(d,u){h.textContent="";const x=d?[...i.options].find(s=>s.value===d):null,w=x?.dataset.fieldType==="select",T=w?JSON.parse(x.dataset.fieldOptions||"[]"):[];if(w&&T.length){const s=document.createElement("select");s.className="form-input step-field-value",s.dataset.field="value";const A=document.createElement("option");A.value="",A.textContent="\u2014 select a value \u2014",s.appendChild(A),T.forEach(y=>{const k=typeof y=="string"?y:y.value??"",V=typeof y=="string"?y:y.label||y.value||k;if(!k||k==="undefined")return;const F=document.createElement("option");F.value=k,F.textContent=V,s.appendChild(F)});const L=document.createElement("option");L.value="__custom__",L.textContent="\u2014 enter manually \u2014",s.appendChild(L);const v=document.createElement("input");v.type="text",v.className="form-input mt-2",v.placeholder="e.g. approved or {{now}}",v.style.display="none",u&&[...s.options].find(y=>y.value===u&&y.value!=="__custom__")?s.value=u:u&&(s.value="__custom__",v.value=u,v.style.display=""),s.addEventListener("change",()=>{const y=s.value==="__custom__";v.style.display=y?"":"none",y||(v.value="")}),h.appendChild(s),h.appendChild(v)}else{const s=document.createElement("input");s.type="text",s.className="form-input step-field-value",s.dataset.field="value",s.placeholder="e.g. approved or {{now}}",s.value=u||"",h.appendChild(s)}}M(z?C:null,t.config?.value||""),i.addEventListener("change",()=>{const d=i.value==="__custom__";p.style.display=d?"":"none",d||(p.value=""),M(d?null:i.value,"")})}function H(e){const t=[];return e.find(".step-card").each(function(){const l=this.dataset.stepType,a={};if(l==="updateField"){let n=this.querySelector(".step-field-field")?.value?.trim()||"";n==="__custom__"&&(n=this.querySelector(".step-field-field-custom")?.value?.trim()||""),a.field=n;const c=this.querySelector(".step-field-value");let i=c?.value?.trim()||"";i==="__custom__"&&(i=c?.nextElementSibling?.value?.trim()||""),a.value=i}else($[l]||[]).forEach(n=>{const c=this.querySelector(`.step-field-${n.name}`);if(!c)return;const i=c.value.trim();if(n.multiline&&i)try{a[n.name]=JSON.parse(i)}catch{a[n.name]=i}else a[n.name]=i});t.push({type:l,config:a})}),t}async function Y(e){const t=e.find("#action-title").val().trim();if(!t){E.toast("Title is required.",{type:"warning"});return}const l=e.find("#action-collection").val();if(!l){E.toast("Target collection is required (General tab).",{type:"warning"});return}const a=[];e.find(".action-role-cb:checked").each(function(){a.push(this.value)});const n=e.find("#action-rowlevel-enabled").is(":checked");let c=null;if(n){const f=e.find("#action-rowlevel-mode").val()||"owner",h=e.find("#action-rowlevel-userkey").val()||"id";if(c={mode:f,userKey:h},f==="field"){const o=e.find("#action-rowlevel-field").val().trim();if(!o){E.toast("Field name is required for Field Match mode.",{type:"warning"});return}c.field=o}}const i=e.find("#action-project").val()||"",p={title:t,slug:e.find("#action-slug").val().trim()||void 0,description:e.find("#action-description").val().trim(),collection:l,...e.find("#action-bundled").is(":checked")?{bundled:!0}:{},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:a,rowLevel:c},meta:{...O||{},project:i||null}},r=e.find("#save-action-btn").get(0);r&&(r.disabled=!0);try{if(N)await _.actions.update(N,p),E.toast("Action updated.",{type:"success"});else{const f=await _.actions.create(p);E.toast("Action created.",{type:"success"}),R.navigate(`/actions/edit/${f.slug}`)}}catch(f){E.toast(f.message||"Failed to save action.",{type:"error"})}finally{r&&(r.disabled=!1)}}